I've designed a fairly complex layout and it looks fantastic in Firefox. However, in Internet Explorer one of my div's is bumped over 5 or so pixels. You'll be able to see the top left corner pushed in from the left.

You can see the demo page here.

The CSS can be reached here.

The page is coded in XHTML 1.0 Strict, and is 100% valid code. The CSS was also validated as W3C compliant (although there were some warnings).

I've tried everything I can think of to no avail, I'd really appreciate some help.

Thanks!

I'm not sure, but your non-breaking space may be causing issues. Try taking that out and seeing what would happen.

collyer I'm not seeing the extra space from the left edge in IE. Did you fix it? I am seeing that IE and Firefox are displaying the nvigation differently. In IE the top of the navigation aligns with the top of the main content area while in Firefox the navigation is pushed down some.

Originally Posted by vangogh

collyer I'm not seeing the extra space from the left edge in IE. Did you fix it? I am seeing that IE and Firefox are displaying the nvigation differently. In IE the top of the navigation aligns with the top of the main content area while in Firefox the navigation is pushed down some.

That's identical to what I'm seeing as well.

Thanks very much, but I havn't changed the coding there at all (so the error has not been fixed on my machine).

I've also noticed that the menu disjoints between firefox and IE. I don't know why because both of their top margins are the same, but it is not a great concern.

I'll try testing it on a few other computers to see what I get, thanks for your feedback.

Edit:

I just tested it on another XP machine and the space is there (in IE only).

Here's a link to a gif of the error in action.

try floating both divs to the left. that way, with no margin, they should butt right up against one another.

Beholdereye you were so close. I floated it left, and it solved the space issue in IE. However, if wrecked the layout. For some reason, floating it left pushed the "body" div (the div that originally had the error) below the nav div in Firefox.

I'm trying some absolute position things as I write this, but what do you all think would be the best approach?

Edit:

Problem Solved!!

I positioned the body div absolutely and it positions iteself properly in both browsers. The little gap has been repaired by floating all the internal div's to the left.

I'm going to run my code by the W3C validator, then I'm off to the races.

Thanks very much for everyones help.

Vangogh and BeholderEye: I'd give you talkupation but it's telling me I need to "spread it around" I apparently really like your posts

oh sorry about that, I forgot you were using definate pixels. I use percentages, that way they will expand and shrink given the different resolutions. This may be a viable option for you. I find that the best way to do this is to design it for 800x600 and then tweak it for 1024x768 (the most used). Generally the percentages rather than pixel definitions will help a great deal.

I usually use scalability, but I defined the width of the menu for the purposes of making the layout work first. I'm going to change it now actually.

Also: The floating and positioning inadvertantly repaired the menu disjointing itself from the body div.


In conclusion:

All errors are fixed, everything has just been modified for scalability. The original link has been modified so that it now contains the fully repaired and scalable page.

You can continue to check the link over time because I'll be modifying the layout to include new and exciting things.

Thanks Again!

A lot of times when I am having this exact issue it can be fixed with a simple

img {
display: block;
}

in the css