Firefox vs. IE

[tox0tes]

On Firefox, everything looks fine...but then I go to view it on IE and its completely messed up. I can't even begin to explain how messed up it is. Things are broken, there's random spacing, backgrounds are stretching where they arent supposed to.... Can anyone help me figure out how to make my web site display correctly on IE?

http://www.solsurfer.com/alienindex.html

[Lchad]

IE thinks it's very adorable when it adds in it's own base margins. So when you start putting things in, you are already up against the wall because they have added those pretty margins in to make you blow your stack.

In your Body of the css put.

Code: Select all

body{
    padding: 0;
    margin: 0;
}

If that doesn't "help"... may not be perfect, try this as your first bit of css.

Code: Select all

* {
    margin: 0;
    padding: 0;
}

That should take things to zero in IE. Now go ahead and tweak your spacing. If you need more help, I'll be here tomorrow.

[tox0tes]

wow that really helped. All of my relative positioning is now consistent on both firefox and IE...thank you.

Still have to work on the background image coming off the sides and the spacing between div rows. Stupid IE....

[tox0tes]

I'm getting closer and closer.... I am discovering a few interesting things about IE...

When you relative position an object, IE will retain the space that the object originally occupied, so if you have 2 images vertically placed and you relative position them to be next to each other (in my case), IE will force the web page to keep that vertical space, despite the fact that the image isn't there anymore. This brings me to believe that IE generates HTML portion of the page before the CSS portion...just think about it. Firefox doesnt do that.

Anyway, I fixed the background width problem by removing "float:left" from the inner div, which I guess was causing problems in IE but not Firefox. I need to work on finding out why there is spacing between some of the div rows.

[Lchad]

that is interesting...
holler if you need help!

[tox0tes]

I have the site almost identical in both IE and Firefox. In IE7 it looks perfect, but then in IE6 there is a space between the top div row and the second div row. Look at this screenshot: