IE7 pushing nav menu down the page

HTML & CSS
1

Hello - I’m new to the forum and am hoping I can get some help with a CSS positioning problem.

I’ve been asked to created a new website for my company. Things were going pretty good until I ran into this issue: I am trying to position a sub-navigation menu on a page - it looks fine in every browser except IE7 (probably not IE6 either, but I’m not too worried about that).

Anyway, I have a test page online that can viewed here:
http://www.aareninc.com/test/aspheric/

The submenu (the one that says “Aspheric”), is being forced much farther down on the page than it ought to be by IE7, which in turn is causing other elements to be incorrectly positioned. This doesn’t happen in IE8, Firefox, Safari, etc…

I would be most grateful if someone could take a look and maybe offer some advice on how to make IE7 behave.

2

can you grab a screenshot?

3

Hi, if you count the width/padding/margins of the subnav and the image it comes to 10px greater then the total width of #wrap. So you need to shave off ten pixels somewhere. You can just lower the subnavs width to 179 instead of 189 :slight_smile:


#subnav{width:179px;}
4

Thanks Ryan - You just made my life a lot easier!

But now that this is fixed, I am seeing another issue (again, only in IE7). The caption (#blurb) beneath the main image is also being pushed down too far, almost as if IE7 is adding some extra margin.

Do you happen to know how I might correct this as well?

5

Hi,

As you have floats scattered here and there you will need to insert a hard clearing element here:


        </ul>
        <!-- end of subnav -->
    </div>
    [B]<div style="clear:both"></div>[/B]
    <div id="lower-left"

and then reduce the top margin here:


#blurb {
color: #000000;
font-size: 1.2em;
line-height: 1.6em;
[B]margin-top:40px;
[/B]margin-left: auto;
margin-right: auto;
}

It’s always best contain your floats in a parent and ensure they are cleared before the next set of floats otherwise it gets quite awkward :slight_smile:

6

Thanks Paul! That worked perfectly. And thank you for the advice about a parent element to contain the floats - makes sense.

Just have to say - this forum is an amazing resource. Thanks again to you and Ryan for your timely lessons in CSS!

7

Sorry to bother again, but I just encountered another puzzling issue along these same lines. As I mentioned, making this particular site work in IE6 is not my top priority (though that would be great!). I would just really like to increase my understanding of how CSS is interpreted by different browsers.

Here’s the issue. This page looks pretty good in IE6 (except for the lack of transparent PNG, but I realize IE6 doesn’t support this, so no confusion there):
http://www.aareninc.com/test/aspheric/

However, on this page:
http://www.aareninc.com/test/aspheric/image-quality.html
I am encountering the same issue where the submenu (the one that says “Aspheric”), is being forced much farther down on the page than it ought to be - only by IE6 this time.

What I find puzzling is that the markup for both pages is very similar. The only relevant difference is that in the first page, an image (img#right) is being floated next to the submenu (#subnav). On the other page, it is a div (#pagewidth) containing images and text.

If anyone has some time to take to a look and let me know how this could be made to work in IE6 as well, I would really appreciate it.

8

Hi,

There are a couple of main IE6 issues.

The first is the double margin bug on the side edge of a float when the side of the float has nothing between it and its containing block. The fix is easy (but nonsense) because display:inline fixes it even though it should have no effect for floats. So just add display:inline to floats that have side margins as other browers ignore it so it is 100% safe.

The second problem is that you have made everything add up exactly to 988px and therefore if there is a 1px discrepancy the elemetn will drop down. In your code this discrepancy is caused by the three pixel jog and therefore the element is 3px too big and drops sown. (See the faq on floats for both of these bugs.)

When you have 2 elements next to each other then just float them and avoid the three pixel bug. This will also allow you to have some breathing space as you do not need to make everything add up to 988px exactly. Just float one left and one right and then the gap in the middle is breathing space and should an element push the float 1px wider it will not immediately drop unlike where you have left and right margins on everything.

The list items in the left subnav are spread out in UE6 dues to whitespace bugs and you should float the lists to kill the whitespace bug but you will need to give them a width.


#pagewidth { 
float: right;
width: 739px;  
height: 404px;
margin-top: -83px;
margin-right: 27px;
[B]display:inline;/* ie double margin fix*/[/B]
}

#subnav {
margin-left: 23px;
margin-top: 20px;
background-image: url(http://www.oii-iol.com/test/images/glass-bg.png);
background-repeat: no-repeat;
height: 196px;
width: 179px;
padding-top: 12px;
padding-left: 20px;
[B]display: inline;
float:left;[/B]
}
[B]#subnav li{float:left;clear:left;width:100%}[/B]

Of course now that both elements are floated you may need to ensure that whatever follows this 2 elements is cleared so that it starts underneath and doesn’t wrap.:slight_smile:

9

Thanks Paul!

Very impressed that you were able to diagnose the issue so quickly. I had heard of the three pixel bug in IE6, but I didn’t think that it applied to my layout.

I am truly grateful to have the answer to the mystery - Thanks again!