IE7 weirdness, etc

HTML & CSS
1

Page in question is HERE.

After the page loads in IE7, if I scroll over the navigation menu, the white space beneath the nav menu suddenly expands, pushing the large rotating image down the page.

Also, when in the “off” position, the “1” and “2” nav buttons on the rotating image are missing the white border that should run along the bottom edge of the square in which the numbers are positioned.

Unrelated, but on the same page: in Firefox for Windows, the “Contact Us” tab—the background for which turns orange when moused over in all other browsers—remains blue when moused over. Wondering if anybody knows why.

Lastly: In Google Chrome for Windows, when the large, rotating image slides to the number “2” image, the image is traveling way too far to the left. Another mystery to me, in case anyone has a clue.

Thanks in advance for any help you might be able to offer.

2

Hi,
You have your nav sandwiched in between a couple of empty clearing divs that do not have “haslayout” on them. I suspect that is going to be the problem with IE7. It would probably be best to get rid of them just the same and contain any floats with a different method.

Your dropdowns are also sticking in IE7, visibility:visible on the li:hover should fix that.


#nav [B]li:hover [/B]{
background-image:url(images/nav-triangle.gif);
background-position: top right;
background-repeat: no-repeat;
[COLOR=Blue]visibility:visible;[/COLOR]/*fix sticking dropdown in IE7*/
}
3

As far as the “Contact Us” tab, you need to get rid of that X declaration on the background position property and just set the x position on the value. No need to declare the BG image twice either.

Here is what you have -


#contact {
width:187px;
height:22px;
float:right;
[COLOR=Red]background-image:[/COLOR] url(images/nav-contact-background.gif);
padding-top:7px;
}

#contact:hover {
[COLOR=Red]background-image:[/COLOR] url(images/nav-contact-background.gif);
[COLOR=Red]background-position-x:[/COLOR] 189px;
}

This is all you need to do -


#contact {
width:187px;
height:22px;
float:right;
[COLOR=Blue]background:[/COLOR] url(images/nav-contact-background.gif) [COLOR=Blue]no-repeat 0 0;[/COLOR]
padding-top:7px;
}

#contact:hover {
[COLOR=Blue]background-position: -189px 0 ;[/COLOR]
}
4

I’d also suggest taking an axe to about a third of the markup you have in there… The wrapping div and clearing div? Completely unnecessary. The classes on ALL of the LI? Except maybe two of them; Waste of code.

I’m not seeing ANYTHING in that markup which warrants much more code than this:

<ul id="mainMenu" class="page_home">
	<li class="home"><a href="index.php">Home</a></li>
	<li class="aboutUs">
		<a href="about.php">About Us</a>
		<ul>
			<li><a href="people.php">People</a></li>
			<li><a href="media.php">Media</a></li>
		</ul>
	</li>
	<li class="products">
		<a href="products.php">Products</a>
		<ul>
			<li><a href="autodetect.php">Auto-Detection Moorings</a></li>
			<li><a href="eomstretch.php">EOM Stretch-Hoses</a></li>
			<li><a href="eommooring.php">EOM Mooring Chains</a></li>
			<li><a href="eomuniversal.php">EOM Universal Joints</a></li>
			<li><a href="eomlinepacks.php">EOM Linepacks for<br />Acoustic Releases</a></li>
			<li><a href="launchrecovery.php">Mooring Launch and<br />Recovery Gear</a></li>
		</ul>
	</li>
	<li class="partners">
		<a href="partners.php">Partners</a>
		<ul>
			<li><a href="whoi.php">WHOI</a></li>
			<li><a href="collectconfidential.php">Cornell University</a></li>
			<li><a href="mcclane.php">McLane Research Laboratories</a></li>
		</ul>
	</li>
	<li class="services"><a href="services.php">Services</a></li>
	<li class="projects"><a href="projects.php">Projects</a>
		<ul>
			<li><a href="excelerate.php">Excelerate Energy</a></li>
			<li><a href="mcclane.php">McLane Research Laboratories</a></li>
		</ul>
	</li>
	<li class="employment last"><a href="services.php">Employment</a></li>
</ul>

… and honestly I’d try to find a way to make it work without manually fixing the width on each item (letting you axe those classes too) - though the dropdowns make that problematic.

5

Rayzur: Thanks. I implemented the changes you suggested. It fixed the “Contact Us” rollover behavior in Windows FF, so thank you for that. Unfortunately, the other problems still remain.

Deathshadow: The classes on the top-level LIs in the nav are necessary in order to specify which nav item should display the orange triangle in the top-right corner, as seen in the “Home” button on the page in question. The page is still a work in progress, so I haven’t trimmed everything from it yet, but it’s still pretty lean, and as far as I can tell, there’s nothing exotic going on that should cause the trouble I’m having.

Meanwhile … all of the problems noted in my original inquiry still exist (except for the “Contact Us”-tab issue in Windows FF). Any help anyone can offer would be greatly appreciated. Thanks!

6

I don’t see the Chrome issue, what version are you using? If the beta vesrion, I wouldn’t worry about it. I vaguely recall an issue like this with a slider…though who knows, I might be going crazy :slight_smile:

The border cutting off, moving elements out of containers (even slightly) can result in clipped content in IE, position:relative it :slight_smile:


.paging a{position:relative;}

The hovering of the dropdown cuasing the gallery to move down (issue). I could go through a long winded explanation on how I deduced this, but I’ll just give the fix :wink:

#content{zoom:1;}
7

Ryan: Thanks very much. I appreciate the help.

FYI: Just before coming here to read your post, I figured out the problem with IE7 pushing the gallery down: it’s a “double padding” problem exclusive to IE7. Here’s more info and the easy fix (add “display:inline-block;” to the element that contains the padding).

Thanks again for the assistance!

8

You don’t need them for that - because you can UNSET values on the nested ones! It’s always cleaner to unset values in the cascade than waste time putting unnecessary classes in the markup.

I have no idea if this is going to be compatible with your existing codebase, but I tossed together an example to show what I mean.

http://www.cutcodedown.com/for_others/jonzal/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/jonzal

… is unlocked so you can grab the ooey-gooeys. Valid XHTML 1.0 Strict. Does away with a dozen or so classes, tested working IE 5.5, 6, 7 & 8, Opera 9.62 and 10.52, Firefox 2 and 3.6, and the latest flavors of safari and chrome. (only bug is in 5.5 due to the use of border the menu buttons come up 5px short on the right - it’s still 100% functional)

Hope this helps - all goes well you should be able to integrate this into your existing code and pitch what you already have.

9

That page confuses me, it says to go to PIE for a betterexplanation and fix, though it links to the double float margin bug.

Also, display:inline-block doesn’t make it inline-block unles it was inline by default (for IE6/7 anyway)

I’m confused but I’m glad you figured it out :).