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.
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*/
}
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.
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:
… 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.
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!
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
The border cutting off, moving elements out of containers (even slightly) can result in clipped content in IE, position:relative it
.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
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).
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.
… 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.