CSS in FF and IE

[tonynoriega]

why... why... why does FF and IE have to render CSS so freaking differently?... ahhhhh its killing me and makes my development time so much longer...

NO.. im a a CSS pro whiz like some of you , but i have custom built several sites that work just fine in both... so i know my way around...

but really? do they both have to display elements in such wacky ways apart from each other...?

i have a CSS menu with drop down, that looks sweet in IE.. no problems... in FF it pushes the content of one of the columns down below the menu...

then in FF my <form> elements are aligned right? ....

i can figure it out myself, i just needed to vent my frustration, because no one here at my work cares of even knows what im talking about.

[edited by: swa66 at 1:15 pm (utc) on Dec. 16, 2008]
[edit reason] language [/edit]

[swa66]

Aside of venting frustration, in my experience the trick is to attack the problem differently:

Dump IE during CSS creation. Yes: fully dump it, don't even take a peek at it. Really: it's far faster if you don't look at it at all till the very end.
It might feel counter-intuitive to dump the browser of choice of 70% of your visitors, but it will be more productive for you and most importantly, you'll keep your sanity.

Build it in either one of FF/opera/safari/chrome. I like to use add-ons like the web developer toolbar of firebug in firefox (they help a lot in understanding things).

Make sure to remove any statement you see not working for what you intended, don't leave stray stuff in there.

Once it works in your browser of choice (and at select landmarks sometimes) try it in the other standards compliant browsers, just to be sure you are not using a bug in one of them as "standard". In most cases you'll only very few find minor issues.

At a point it'll be done for the standards compliant browsers.

Next take those IE versions you care about and fix them one by one using conditional comments.

Make sure not to let the future IE8 see any of the comments (so only target version 7 and earlier).

The neat bit is that means you can freeze it for the other browsers as all changes needed from now on are:

• comments to the standards compliant browsers (nothing you do will trigger any problem in them anymore). If you e.g. need to do something that a standard compliant browser would dislike, it doesn't matter as the standards compliant browser will happily ignore the conditional comments.
  
• if you make the conditional comments version specific you can even deal with IE6 and IE7 needing different fixes
  
• workarounds to problems in IE are just aesthetics: so you don't need to care why IE renders something wacky, why it's not working etc. All you need to do is find a way to get it back so it looks ok (even using non-standard css that will never validate is no problem: no sane browser will ever look at it).
  
• you can give e.g. IE6 a nicely degraded version of the website so the users of that poor excuse for a browser still can access the site but for the nice "looks" they'll have to upgrade eventually.
  
• Any browser you can't test (do you have all phones in use around the world, all game consoles, all music players, all fridges and whatnot that will eventually get a browser ?) becomes less of a problem as there is no superfluous markup in your CSS any longer. In all likelihood all those devices will be a standards compliant browser and you'll notice that they mostly all are happy with exactly the same code. Similarly your code will be far more future proof
  

You can reduce a lot of the IE problems if you do not trigger it into quirks mode: have a full doctype, but *nothing* in front of it (unfortunately this includes the xml preamble being impossible to sustain). But even outside of quirks mode IE6 still has major trouble all over.

[Xapti]

Yeah man. Don't develop in IE. IE stuff are fixes you should put up afterwards, it's not FF and other browser's fault that they don't render right, it's IEs and/or your own.

[tonynoriega]

Ok, well here is my issue now...

absolute positioning.

it seems like FF uses absolute positioning from the entire viewable area... and IE positions from the parent element.

so when i try to set left:600px; FF positions 600px from the left of the browser screen... and IE is setting it 600px from the parent element which is set:

width:800px;
margin: 0 auto;

so how do i combat this...

i cant get it to look fine in FF, but then its too far to the right in IE

thanks...

[tonynoriega]

figured it out...

i had to set positioning to the parent element, which id did not...

so the parent element is now set to: position:relative;

thanks

[edited by: swa66 at 1:15 pm (utc) on Dec. 16, 2008]
[edit reason] language [/edit]