IE7 CSS Menu Layout Issues

HTML & CSS
1

Having some issues with my site in IE7. If you check out the link below in IE7 you will notice there are some funky things going on with the main global navigation. I need to get this corrected as quickly as possible. Anyone have any suggestions on how I can fix this but not wreck it for all the other browsers that it already works fine in.

Seacoast Laboratory Data Systems Supplying Customized LIS Software Solutions for Laboratories Everywhere

Any help would be greatly appreciated.

Thanks.

2

Hi,

It looks like IE7 is having trouble with the double widthless floats.
You are nesting your floated UL in a floated div …

<div id="navigation">
    <ul id="main-nav" class="nav [COLOR=Blue]fl[/COLOR]">
    -
    -
    -
    </ul>
</div>

#navigation {
clear:both;
float:left;
font:14px/14px Helvetica,Arial,sans-serif;
padding:5px 0 0;
}

[COLOR=Blue].fl [/COLOR]{
float:left;
}

I would say remove that wrapping div but this is a WP site so I’m not sure what the consequences would be.

To fix IE7, either remove the float from #navigation or add width:100%; to keep the float from shrinkwrapping.


#navigation {
clear:both;
[COLOR=Blue]width:100%;
float:left;[/COLOR]
font:14px/14px Helvetica,Arial,sans-serif;
padding:5px 0 0;
}
3

That did the trick! Thanks. Now one more question…but this time regarding FireFox 3.0 and 3.6…

If you look at the homepage of my site: Seacoast Laboratory Data Systems Supplying Customized LIS Software Solutions for Laboratories Everywhere in either FireFox 3.0 or 3.6 you will notice that the large main home slider does not appear at all whereas in ALL other browsers it appears just fine…

Any ideas on what might be going on here?

Thanks.

4

^
It looks like the parent container’s height is collapsing in between each slide delay.

You can fix it by setting a height or min-height on the parent, you already had the selector set up on line 220 in your css so just add a height.


.slides_container {
min-height:436px;
}
5

Hmmm. I think it fixed it can you please just check real quick and confirm? My browser testing program is showing the space but no content, but that could be the software…just want to be sure it’s working the way it should.

Thanks.

6

Sorry, that min-height was really not a good suggestion. The slides are stacking up as blocks while the page loads in FF3.

Let’s change that to -

.slides_container {
height:430px;
overflow:hidden;
}

It looks like FF3.6 is just being slow with that script and the page load. The page loads fast for me in Chrome.

7

Ok. Made the adjustment. Looking good now?

Thanks

8

Yes, it is looking better in FF3 but it is still acting very sluggish for me in FF3.

You might want to get someone else to look at it in FF3 and if they give the same results I would head over to the JS forum and see what they can make of it.