December 06, 2005

• First you need to make a sacrifice to the Internet Deities. Basically this issue is huge. AND it's a bloody nightmare. How us web monkeys have been fixing is it through using hacks. But now M$ said don't use hacks cause they won't work in IE7. Even using javascript and allowing for access - basically it depends on the site. How much are you willing to compromise on? You need to possibly go a bit further than just having an extra style sheet for IE6. Because there is stuff that will stuff up in IE5. And then there is IE on Mac - which we are almost at the stage of totally burying into the ground - but some buggers are still insistting on hanging on.... So they are displaying differently - is this the layout or elements such as the text? Different issues will need different hacks and/or solutions. (this is why web designers drink so much)
• I also should add that most people design for Firefox - then hack to make it work in IE (~^)
• You may know these links already....but just in case: A list apart http://www.w3schools.com/ Eric Meyer Just to start you off (~^)
• Yeah the layout elements - the logo and news items are in one colum, and the "#topright", nav bar,and main text area are in a second column. I had to design for IE because that's what the client uses (natch) but in Firefox the logo is smushed into the news and the nav bar has what looks like "chunks" taken out of it after each menu text item. Should I abandon CSS and just do simple tables? It's probably not critical to use CSS but I wanted to learn it anyway, so . . . ?
• thanks for the links too - for some reason my normaly startling Google-fu fails when I try to find stuff about why CSS is mungy between browsers.
• Well having a basic layout table is always an option (and one I had to resort to recently due to a weird IE buggy thing). Still most of the issues with layout elements tend to happen more with the 3 col than the 2. Also it may play a role with what kind of measurements you are using - pixels, ems etc - and if negatives are involved. (mate if you wanna drop me a line to have a little lookie my email is in my profile)
• i would suggest finding a site that has a layout that looks similar to what you want and look at their soure code. What are you using to code with? If it is something Microsoft-centric like Frontpage it could be that it is using Microsoft-only code and that normal CSS wouldn't look that bad in IE.
• This dude: Ruthsarian layouts has done a lot of cross browser testing for css layouts and provides some examples. There are quite a few hacks in his code though.
• I find it expedient to dump the piece of shit that is Internet Explorer. It works for me!
• petebeast: The reason people design in firefox rather than IE is that firefox follows the web standards much more closely. It's generally much easier to take something that works in firefox (and by extension any other standards compliant browser) and tweak the CSS for IE than the other way around.
• *pours Skrik a drink* If only we could convince the world....
• Using Dreamweaver to edit the .css (Not touching FP with a 200' pole). I'm pretty sure all the elements use pixel, but I'll check again. I read an article arguing for using em, but isn't that for typeface only? I'll check the Ruthsarian layouts, thanks. What kind of hacks would I have to do? Is the javascript+multiple .css something everyone does or no? many thanks for the help, its all Ipso Lorum to me
• What kind of tweaks, pharm? When I read up on CSS they all look like standard elements with no "IE only" ones (as they should, I'm sure).
• Hmm no the js + multi script isn't all that common really...it depends on how big the site is and the target audience of it. If it's not a huge site I wouldn't kill yourself over doing that - if you are a style switching virgin. The em vs pixel discussing are quite involved and often a mix is used for both layout elements and text. With the Ruthsarian layouts if I recall correctly he's already added them into the style sheets. So you just have to keep an eye out for them. (CAVEAT: if you have some time to kill Call to action: The demise of CSS hacks and broken pages to see the arguments for and against hacking css for IE)
• Tweaks to avoid IE bugs. See, um, http://glish.com/css/ for some example layouts, complete with fully commented CSS.
• As much as it pains me to say it, because CSS implementation is still SO different between browsers, I still mainly use tables to do the coarse layout and CSS to do the fine styling (of backgrounds, borders, etc.), though I wish I could do it all in CSS and have it look right.
• This site is pretty good too Position is everything The key to getting this stuff to work is test, test, test. On multiple browsers, on both Mac and PC.
• does anyone know what happened to browserola? it was a fairly neat browser emulation shareware that i used six or seven years ago. supported emulation for ie, netscape, and opera, iirc.
• It's here but it doesn't seem to be updated for awhile, unless this is an old version.
• I also should add that most people design for Firefox this is not actually, ummm, true, per se. There are some things, like padding, that the browsers just interpret differently- ie IE adds the padding to the pixel width of a div, FF doesnt (I think) Something like that. Anyway you just have to learn what not to use in what context, or else learn to deal with it looking slightly different in different browsers.
• My take is to use the hack that MS built in: the <!--[if IE]> option. You can enclose a link to IE-specific CSS that way without breaking the rest of the page, and you can add version numbers to target IE 5 and 6 (and eventually 7) differently. Saves some massive headaches if used properly. And since it's not strictly a hack - other browsers read it as a comment and ignore it - you aren't breaking anything. Build a page that works in a real browser, include links to IE-specific tweaks to the code (you only need to redefine CSS rules that IE breaks) in the <!--[if IE]> tag. Oh and validate, validate, validate, and make sure you use the correct DTD or you'll trigger "quirks mode" which makes things even worse! In "quirks mode" the browsers resort to all kinds of goofy behaviors that make no sense to anyone.
• Cool, thanks frogs - but it's not very clear to me how to use it exactly - here's what should be the point in question (for me, anyway): By wrapping an embedded stylesheet in conditional comments, you can make the styles apply only to IE5+ on Windows. Below are a number of ways to write conditional comments to target specific combinations of IE5+ browsers: Only Internet Explorer will load the style sheet; other browsers think it's a comment and ignore it. I put the link to my main style sheet first, then use the IE-only one to fix IE's problems. Also, only IE has the added bandwidth for the extra style sheet, which serves it right because it's IE's fault.
• It really helps to not develop for only one browser.... There really are ways to make it work across browsers and platforms ... but it really is a pain in the ass. Amen, Iguana. I didn't realize how much IE sucks until I started working with CSS. Now IE is the main thing keeping me from using CSS exclusively -- I've had to redesign (using boring old imagination-stunting tables) two sites because IEWin doesn't display them correctly. (Even though IEMac does. Go figure!) As for learning CSS, I found Floatutorial to be extremely helpful. Step by step and fully commented. Good luck, Pete! Let us see what you come up with!
• Thanks all, those are great tips/links. I'm gonna start kicking at it, I'll let you know!
• Is it too late for me to jump in and complain a bit? If anybody out there should ever get within a couple of feet of Bill Gates, please kick him in the nuts for me. I can't tell you the number of unpaid hours I have killed trying to make CSS work in Explorer. Encourage everyone you know to upgrade their browsers to Firefox. If you have a complex layout or a near term deadline, I'd say stick with tables until you are more comfortable with the techniques. Go buy Dan Cederholm's book, 'Bulletproof websites'. It's worth every penny. Here's some of my recommended bookmarks. Sorry for the lack of linkage, my preview wasn't processing when it had html mark up in it Misc http://www.htmldog.com/guides/cssbeginner/ http://css-discuss.incutio.com/?page=FrontPage <-really good general source http://www.mezzoblue.com/css/cribsheet/ http://www.corecss.com/properties/full-chart.php http://www.quirksmode.org/ http://www.ilovejackdaniels.com/resources/view-page-structure/ http://www.sitepoint.com/print/top-ten-css-tricks http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/ http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/ http://css.maxdesign.com.au/selectutorial/index.htm Validator http://validator.w3.org/ http://www.htmlhelp.com/tools/csscheck/ http://www.codepoetry.net/archives/2004/02/07/css_debugger_redux.php font/text issues http://www.allmyfaqs.com/faq.pl?Center_with_CSS http://www.kdwebpagedesign.com/tutorials/fonts.asp http://www.myfonts.com/WhatTheFont/ http://www.angelfire.com/al4/rcollins/style/fonts.html http://www.mikeindustries.com/sifr/ http://www.petefreitag.com/item/396.cfm http://typetester.maratz.com/ http://freaksauce.com/blog/ http://www.clagnut.com/blog/348/ http://www.thenoodleincident.com/tutorials/typography/index.html http://www.xvsxp.com/fonts/ http://www.visibone.com/font/FontResults.html http://home.tampabay.rr.com/bmerkey/examples/fonts-in-MS-products.htm http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html auto generated layout tools http://www.geekman.com/blog/arc/000711.html http://www.inknoise.com/experimental/layoutomatic.php http://www.positioniseverything.net/guests/3colcomplexside.html http://wannabegirl.org/firdamatic/ http://flurf.net/boxy/boxy.php Menus & Lists http://www.alistapart.com/articles/hybrid/ http://www.alvit.de/web-dev/tabs-and-pure-css-navigation-menus.html http://www.alistapart.com/articles/slidingdoors2/ http://css.maxdesign.com.au/listamatic2/ http://superfluousbanter.org/archives/2004/05/navigation_matr_1.php http://www.fiftyfoureleven.com/sandbox/doors-meets-mountaintops-3/ http://www.collylogic.com/scripts/rollover.html Layouts http://www.communitymx.com/content/article.cfm?cid=AFC58 http://www.positioniseverything.net/ordered-borders-center.html http://www.manisheriar.com/holygrail/rightcol.htm http://www.ssi-developer.net/main/templates/3col.shtml http://www.highresolution.info/webdesign/yaml/index.html http://www.svendtofte.com/code/max_width_in_ie/
• MoFi tends to look much uglier in IE than in any other browser because I used Safari as my base-browser, and am not CSS-proficient enough to make things nice in IE as well. However, Gyan wrote a lot of the available stylesheets and although I haven't actually looked, odds are they look better in IE than the ones I made. Pity Gyan's not around at the moment.
• beauty, thanks mmmuttly. That's just the case with me, due to time constraints I think I'm going to have to bail on the CSS wrangling and go with tables. Fie on Micro$quash.
• petebest: "Does the line (presumably at the beginning of the file): <!--[if IE 6]> IE 6.0 make the .css work in IE 6.0? Is that it? Or is there more to it? That's what I'm stuck on there. " No, I just enclose a linked CSS file in between the if and endif parts. Just drop in something like: <style type="text/css" media="screen">@import "link/to/normal.css";</style> <!--[if IE 6]> <style type="text/css" media="screen">@import "link/to/IE.css";</style> <![endif]--> That drops in a link to a CSS file for all browsers (in this case normal.css) and a second sheet (in this case named IE.css) that contains the re-written or alternate style rules for IE. You can embed these rules into a single sheet by using a bunch of weird hacks but this is a cleaner and more backwards- and forwards-compatible way to do it. Only IE will see IE.css; all other browsers will interpret anything contained between if and endif as a comment, and will ignore it.
• I tried this: using both [if IE] and [if IE 6] but I must have done something wrong because when i edited my normal.css file it affected the IE browser anyway. Hmm . . now that i write that I see that I didn't use the @import part . . . I'll try again later. Thanks frogs!
• As a rule of thumb, I personally avoid using CSS to define positioning. I prefer to use tables to get everything laid out, and then use a CSS page to define properties - colors, fonts, font colors, etc. Using WordPress to power my blog has been good for me in this sense, because it's inherently CSS-heavy. Just finished making a new template last week, actually. Here's the stylesheet, if it's any help. Seems to work OK in IE and Firefox, although I'm fretting now, because I'm not really sure when I last checked it in IE. You'll notice I'm not doing anything very revolutionary in that stylesheet. Have you seen CSS Zen Garden? I mean, damn!
• You might have found the answer already, but I'm gonna put my 2 cents in anyway. -css zen garden is the bomb. -floatutorial is the bomb -don't use javascript to catch the browser type if you can help it. That's a major hack and leads to maintenance issues down the road (different brower versions handle css differently, do you want to catch all of them?) What I found to be a major issue that was easily overcome was that IE prefered

  s to be nested. It looked fine on firefox, but looked nasty on IE. 1st layout (by div): page -header -leftnav -body -footer but IE prefers: page -header -body --leftnav --body -footer and then everything worked. Also, do you have a link to the page/css to take a look at?
• 1. Make sure that you have a DOCTYPE (and no XML prolog before it) to force IE into (sort of) standards-compatible mode. 2. If you use “float: XXX;” on an element, also add “display: inline;”; it's nonsensical, but stops IE from doubling margins. 3. Design in Firefox first, and hack for IE afterwards. These points will reduce a lot of the biggest frustrations, in my experience.
• man you folks are comin' out of the woodwork. Glad to see it, thanks all. Guess what, the boss doesn't like it - wants it to look exactly like the competition . . . sooo . . back to the notepad ;) I'll followup when I find the happy medium with these things. *kicks virtual Bill Gates in the nutz*
• petebest - if you put in the usual css file first IE will look at it, then it will look at the IE only file that comes next. That's the "cascading" part of "cascading style sheets". If you define, say, border=5px for an element in css sheet 1, you can redefine it as border=3px for css sheet 2, and it will be re-defined. The order of your rules is important. If you use a rule for an element that IE doesn't like, you either need to redefine it in IE.css or put a note in IE.css that tells IE to ignore it (as in set a numeric element to 0, or to hide an entire item set it to display: none;). For example tell a block element to float: left; in normal.css, and tell it to float: none; in IE.css to fix float problems. Or due to the padding differences, you might do padding: 1em in normal.css and padding: 0.25em in IE.css. So yes, changing the first one will change the way IE displays it (it follows the rules at least that much). You'll just need to include IE-targeted changes in the IE-specific css, and that will make fixing IE problems easier because it won't screw up your other browsers. For an example compare the CSS I used here with the IE-specific changes in this file. It was totally necessary to redefine just those rules to make a multilevel drop-down menu work correctly in IE.
• Example how easy it is to fall into the CSS hack trap Man that is so much more than I have time for. Can I just say how much i hate Micro$haft? Blargh!