Layout

[ociugi]

i understand the differences and functions of float, position(relative/absolute) but i have a problem layouting my design because every internet browsers has a little differences in reading css. may be i dont know the proper way of using float and position.

 

after i finish my design i test it and no problem in firefox but IE6 and later version has.

 

how do i layout may design using float/position that both browsers will output the expected layout.

 

[SuperBlue]

i understand the differences and functions of float, position(relative/absolute) but i have a problem layouting my design because every internet browsers has a little differences in reading css. may be i dont know the proper way of using float and position.

 

after i finish my design i test it and no problem in firefox but IE6 and later version has.

 

how do i layout may design using float/position that both browsers will output the expected layout.

 

 

Well thats a very general question, i think most webdesigners had to figure out on their own.

It depends on what type of layout your doing, each layout needs its own fixes. But a good rule is not to resolve to hacks, because usually what you want can be accomplished by using another wrapper div, or doing things different.

 

Usually one of the first problems you encounter, is the problem where IE threats "height" as min-height, theres really no reason why you should spend so much time on this, since to solve that we usually either provide IE with "IEStyles.css" or hack the main css. I've found that http://msdn2.microsoft.com/en-us/library/ms537512.aspx explains a really good way of giving IE its own StyleSheet.

 

Another known problem is the box moddel, there are two box models, and it's usually best to make sure that all browsers use the same one on your pages, otherwhise you can experiance some unforeseen problems later.

 

Collapsing divs within floated divs is also a likely problem to encounter mostly in 3+ column layouts, however easy to solve. Again however, each browser needs its own css, otherwhise we will be using hacks. Or relying on CSS a givin browser dosent understand, to overwrite the broken rules in the browsers that do.

 

 

 

[ToonMariner]

My top tip is to use a strict doc type (I use xhtml 1.1) which forces ie6 into standards complaint mode.  Now don't get excited - it still aint fully compliant then but it does reduce the amount of difference between browsers. In most cases this leaves me with one style sheet and a few redeclarations in an ie 6 style sheet that I include with a conditional somment.

 

Of late I have very rarely used a further style sheet for ie6 (not just because I can't wait for it to disappear but because the look and feel of the ie6 rendering is close enough to what I want).