CSS consistency on browsers

@drhowarddrfineAug 27.2008 — #All of the above. Consistency is maintained by following web standards and testing in standards compliant browsers. Currently, those are everything but Internet Explorer. Therefore, initially design and test using Firefox/Opera/Safari, etc., then see if IE managed to follow along. If not, the hacks to fix IE are well known.

@WebJoelAug 27.2008 — #...Do people tend to use absolute positioning or relative, padding and margins, or setting the size of elements to avoid the auto option etc.[/QUOTE] "Position:absolute;" should be used sparingly, for objects that will be expected to move about the page, or for 'exactly' positioning something that will 'overlap' something else. "absolute" lifts the element (IMG, DIV, TABLE, etc) out of the document flow and base it's position upon position 0,0 (left-top, top-left) of the user's monitor... and since IE adds proprietary margins & padding to elements, this gets [I]all messed up[/I] when viewed in IE... Other browsers do not add this 'padding'/'margin' to everything...

Make your first CSS rule always be:

* {margin:0; padding:0;}

and 90% of the X-browser issues are solved right there. "universal selector" removes ALL margin/padding, from ALL elements, using just this one line.

However, if you add this line to an *[U]existing[/U] webpage* that otherwise looks okay in IE, it WILL most likely mess-up the page BECAUSE you previously positioned every element based upon IE inept proprietary settings (-still with me?)

*I* like, prefer & use the "auto" option for widths/height and use (internal) padding on same, to make the content 'fit' into the container against multiple-size viewscreens/resolutions. This is also called "fluid design".

The 'default position' of elements is "static", by the way. It is only when explicitly stating "position:relative;" does any element become "relative" to the element preceding it... Mostly, the only time you would need to state "position:relative;" on an element is if that element will contain a "position:ABSOLUTE;" in it, so that [I]it[/I] (the 'child element') can be positioned based off of position "0,0" of the "relative-positioned" parent...

-I know it's all probably very confusing, -but once you stretch your head around these terms and concepts and see IRL what they can do, -creating web pages that -from a content viewability- are 99.9% identical on multiple browser platforms, becomes easier. ? I have built probably 200+ websites and I think only have ever had to use 'IE-conditionals' on maybe two sites because I couldn't figure any other way quickly enough for client demands, so, I opted for [I]the big-easy[/I] quick fix.

@Tom3CauthorAug 28.2008 — #That was a seriously useful reply thanks for that. My issue was initally designing the sign in IE. They have to be difficult don't they!!!

As you say once understanding all the you can acheive what you what quickly, the problem is trying to learn whats going on, and unless you have someone to tell you it's hard to work out.

Thanks, that's really helped.

Tom

CSS consistency on browsers

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS consistency on browsers

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴