CSS Layouts & Browser Compatibility

[apresmoimelle]

Does anyone know how to make a CSS layout compatible with all browsers?

For some stupid reason/mistake/fault I cannot get the div layers I made to work with Internet Explorer. I worked so hard to code my CSS for Firefox and the layout I made for a customer was fantastic. But I find out that she looks at in IE and it looks a complete mess with everything in disarray. Does anyone know what I need to add to my CSS to make it compatible cross browser?

Uhm, I hope people know what I am talking about. If anyone has any idea how to fix this, I owe you so much!

P.S. If anyone wants to see what I am talking about, I can send you the link.

[Jezebel]

Can you paste the code here? What is the link?

[HackerX]

Look up the box layout model, and why it's fucked up in the different browsers (especially IE :) )

[Theodoric]

IE6, IE7, or some horrendous earlier version of IE?

For IE7, if you coded the CSS properly for FF the layout should be the same, or at the very least close, to what you are seeing in FF.

IE6 on the other hand does not conform to the standards set forth by the W3C (World Wide Web Consortium), especially the box layout model. Where things generally go awry is when declaring the size of an element and adding some kind of padding to it. This happens mostly when dealing with width.

There are three ways to go about dealing with this issue.

First, there is what has been dubbed the 'Holly Hack' or 'Star HTML Hack'. To view links or images in this forum your post count must be 2 or greater. You currently have 0 posts.

In this you basically make a declaration by doing

* html div{
width: foo;
padding: bar;
}

Here is an example.

/* this will be seen by anything BUT ie6 */
#content{
width: 500px;
padding: 15px 40px 15px 48px;
}
/* this is the star HTML hack to correct ie6 */
* HTML #content{
width: 588px;
padding: 15px 40px 15px 48px;
}

Since IE6 does not add padding to the width of an element, but includes it into the element's declared width, you need to set the width higher for IE6.

You can also get the same effect by using the voice-family property.

#content {
width: 588px; /* includes padding/border for IE5 Win */
padding: 15px 40px 15px 48px;
float: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 500px; /* real width */
}

Lastly, you can say 'Fuck those backwards losers that still use IE6. Evolve and use a REAL browser, dammit!' However, this really doesn't go over well with clients / employers, so I would not recommend this tactic. :p

As for a horrendous earlier version of IE (IE 5.5 and below) you have no hope. Give up on this project. Granted, less than 1% of the population still uses something below IE6, so you can effectively ignore this browser. Same goes with the Mac version of IE.

Hope this helps.

[apresmoimelle]

THANK YOU SO MUCH! I have to change the layout anyway, the woman this layout was for wants me to "upgrade" everything and use Flash. I needed this so much though, a lot of people were looking at me like I was crazy when I asked for help with this. =/
"Fuck those backwards losers that still use IE6. Evolve and use a REAL browser, dammit!" Haha!!! I loved that quote. XD

[Theodoric]

THANK YOU SO MUCH! I have to change the layout anyway, the woman this layout was for wants me to "upgrade" everything and use Flash. I needed this so much though, a lot of people were looking at me like I was crazy when I asked for help with this. =/
"Fuck those backwards losers that still use IE6. Evolve and use a REAL browser, dammit!" Haha!!! I loved that quote. XD

You're very very welcome! I'm an HTML developer / Web Designer by trade, so this is something I've had to deal with a lot.