CSS in FF & IE
- Started
- Last post
- 12 Responses
- mg33
No question really, just curious about some of the things any of you have run into in trying to get CSS layout to look the same in Firefox and IE.
I am working on a site and through much trial and error I'm finding many things that change the layout in FF.
Such as:
Adding a 1px border to a solid container div totally throws off the positioning of divs within the containing div.
- instantok0
you can use conditional comments to apply css only to ie...you can also use a small php script to load browser specific style sheets
- Hello-Sexy0
no, no, no. dont use hacks unless it is a dead browser.
rarely is there a need to make unique files per browser.
- mg330
This is the css that was included in a template I started learning from:
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}
- instantok0
what hacks?...sure there are drawbacks to importing browser specific style sheets...the benefit is you can write clean css rather that using hacks that exploit parsing errors and crap up the legibility of a css doc...
- heavyt0
just to clarify, the difference appears when you use borders or padding. IE follows a different box model than the other browsers. So, a 100px wide div with 1px borders and 2px padding, will actually be 106px wide in IE. FF takes that space from the inside.
TR1
- mg330
I wish I could post an example of the 1px border I was talking about. I was trying for two hours to rearrange things to find out why the top margin (or padding) went all crazy in FF. It was only the border messing it up.
- Hello-Sexy0
really, if you code good css you shouldnt need to do that much for different browsers.
- Hello-Sexy0
that ie problem (for IE 6 - not 5 ) can be fixed if you use xhtml transitional doc type, WITHOUT the xml declaration.
ie will render in strict mode, just (well, mostly) like FF. the box model will be fixed.
- instantok0
really, if you code good css you shouldnt need to do that much for different browsers.
Hello-Sexy
(Jun 29 05, 10:05)agreed
- mg330
This?
- heavyt0
if you want to be pixel-perfect, you need to use hacks for certain browsers. There is no way around that.
If you don tmind 2px here and there, you can leave them out.TR1
- foreign0
code css for ff first, then fix for ie.
the biggest issues with ie is the handling of whitespace in xhtml code, and the diffirence in the box model.
google "css box model" or look here: http://www.alistapart.com