oh welcome to our hell, heheh
just like the above guys, the best advice is to base your development on a standards-compliant browser. It’ll make things much easier when it comes to using standard CSS+(x)html.
From my experience (I develop on Firefox and then tweak the sites to look the same on IE, which is easier than doing it the other way round) IE is quite a pain in the first place.
CSS layouts are very efficient, but it’s more a craft than a science. Assuring cross-browser compatibility means a lot of work (maybe even 50% of the overall design hours) and requires using a lot of “hacks” to make elements look good on most browsers. Even if it looks overwhelming, in the end it’s worth the extra effort and your visitors will thank you.
For the overlappings you’re experiencing, take into consideration that IE adds some extra paddings and margins to what the CSS says which you have to take care of. The best way to address this is to reset all styles before giving them any new formatting. this minimizes the issue afterwards.
There’s a couple of very good pre-made style resetting CSS roaming the internet. My advice is to use one of these (links below) before linking to your stylesheet. What I do is something like this:
‹link rel=“stylesheet” type=“text/css” href="/css/style_reset.css"›
‹link rel=“stylesheet” type=“text/css” href="/css/my_styles.css"›
just like that, the clean-up style first, and immediately after goes your own.
Now, where are the links I promised?
Faruk Ateş’s “Initial CSS” can be found here:
On the other hand, Eric Meyer’s “Reset Styles” CSS can be found here:
what’s the difference between them? fair enough that you ask
Both share the fact that they aim to minimize the impact of browser-specific CSS interpretations, and both do a pretty good job. But that’s pretty much it for the similarities.
While Eric Meyer’s CSS attempts to clear every bit of formatting for each style (so that you can start from scratch on a 100% clean stylesheet), Faruk Ateş’s Styles aim at eliminating and neutralizing the different interpretations of several tags done by different browsers.
The idea behind Ateş’s CSS is that browsers already treat certain elements (such as sub and sup tags to name a few) in the same way so he doesn’t mess with those, only with the ones that are interpreted very differently cross-browser.
Of course, this is a bit subjective, your mileage may vary with one or the other.
Personally, I use Eric Meyer’s style resetting on every project I start. I like the idea of starting from scratch on a formatless stylesheet… but that’s me.
Whichever you choose, I suggest you give those a try. They will probably not fix the whole problemm but it will be a step in the right direction