CSS Horizontal Image Rollover Menu doesn't line up

**elv8** · 05-03-2008, 07:54 AM

Hi,

I have spent a good few days trying to get a CSS Horizontal Menu to work. It has 7 buttons as images. It changes to a different image when hover, link and active. I have also attached an image on the beginning of left hand side and right hand side of the menu as the menu has been sliced from a .psd image.
Buttons are straight forward, the only visual effect that occurs is a small arrow is displayed on the selected image when hover or click action is applied.
I have the menu in main div container and I have also placed 2 additional side images in 2 separate containers. Not sure if I should be placing these 2 additional images in div containers though?
Anyway, the menu displays fine in dreamweaver cs3 but when I preview it in Firefox or IE 7 the 7 buttons shift downwards. Also when I click on a button I can see dashed lines and the buttons aren't in a smooth effect?

Html code:

<body>
<div id="topNavigation">
<div id="left_nav">
<ul>
<li><a href="index.html" class="about"></a></li>
<li><a href="setup.html" class="setup"></a></li>
<li><a href="market.html" class="market"></a></li>
<li><a href="upgrades.html" class="upgrades"></a></li>
<li><a href="manufacturing" class="manufacturing"></a></li>
<li><a href="developer.html" class="developer"></a></li>
<li><a href="demo.html" class="VideoDemo"></a></li>
</ul>
<div id="right_nav"></div>
</div>
</div>
</body>

CSS Code:

<style type="text/css">

#outerWrapper #topNavigation {
background-color: none;
border-bottom: none /* Sets the bottom border properties for an element using shorthand notation */
height: 101px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#topNavigation {
width: 957px;
height: 101px;
}

#topNavigation ul {
padding: 0px;
position:absolute;
}

#left_nav {
background: url(images/menu/left_button_end.png) no-repeat scroll 0pt;
height:101px;
width:18px;
padding: 0px;
border: 0px;
margin: 0px;
left: inherit;
position:absolute;
top: 187px;
tag: div;
}

#topNavigation li {
float:left;
word-spacing:normal;
}

#topNavigation li a.about {
background: url(images/menu/about.jpg) scroll no-repeat;
height: 101px;
width: 115px;
padding: 0px;
border: 0px;
margin: 0px;
position:absolute;
left: 18px;
top: auto;
tag: div;

}

#topNavigation li a.setup {
background: url(images/menu/setup.jpg) scroll no-repeat;
height: 101px;
width: 117px;
padding: 0px;
border: 0px;
margin: 0px;
left: 133px;
position:absolute;
top: auto;
tag: div;
}

#topNavigation li a.market {
background: url(images/menu/market.jpg) scroll no-repeat;
height: 101px;
width: 122px;
padding: 0px;
border: 0px;
margin: 0px;
left: 250px;
position:absolute;
top: auto;
tag: div;
}

#topNavigation li a.upgrades {
background: url(images/menu/upgrades.jpg) scroll no-repeat;
height: 101px;
width: 129px;
padding: 0px;
border: 0px;
margin: 0px;
left: 372px;
position:absolute;
top: auto;
tag: div;
}

#topNavigation li a.manufacturing {
background: url(images/menu/manufacturing.jpg) scroll no-repeat;
height: 101px;
width: 165px;
padding: 0px;
border: 0px;
margin: 0px;
left: 501px;
position:absolute;
top: auto;
tag: div;
}

#topNavigation li a.developer {
background: url(images/menu/developer.jpg) scroll no-repeat;
height: 101px;
width: 136px;
padding: 0px;
border: 0px;
margin: 0px;
left: 666px;
position:absolute;
top: auto;
tag: div;
}

#topNavigation li a.VideoDemo {
background: url(images/menu/video_demo.jpg) scroll no-repeat;
height: 101px;
width: 139px;
padding: 0px;
border: 0px;
margin: 0px;
left: 802px;
position:absolute;
top: auto;
tag: div;
}

#right_nav {
background: url(images/menu/right_button_end.png) no-repeat scroll 0pt;
height:101px;
width:16px;
padding: 0px;
border: 0px;
margin: 0px;
left: 941px;
position: absolute;
top: auto;
tag: div;
}

#topNavigation a.about:hover {
background: url(images/menu/about_rol.gif) no-repeat 0;
}

#topNavigation a.setup:hover {
background: url(images/menu/setup_rol.jpg) no-repeat 0;
}

#topNavigation a.market:hover {
background: url(images/menu/market_rol.jpg) no-repeat 0;
}

#topNavigation a.upgrades:hover {
background: url(images/menu/upgrades_rol.jpg) no-repeat 0;
}

#topNavigation a.manufacturing:hover {
background: url(images/menu/manufacturing_rol.jpg) no-repeat 0;
}

#topNavigation a.developer:hover {
background: url(images/menu/developer_rol.jpg) no-repeat 0;
}

#topNavigation a.VideoDemo:hover {
background: url(images/menu/video_demo_rol.jpg) no-repeat 0;
}

#topNavigation a.about:active {
background: url(images/menu/about_c.gif) no-repeat 0;
}

#topNavigation a.setup:active {
background: url(images/menu/setup_c.jpg) no-repeat 0;
}

#topNavigation a.market:active {
background: url(images/menu/market_c.jpg) no-repeat 0;
}

#topNavigation a.upgrades:active {
background: url(images/menu/upgrades_c.jpg) no-repeat 0;
}

#topNavigation a.manufacturing:active {
background: url(images/menu/manufacturing_c.jpg) no-repeat 0;
}

#topNavigation a.developer:active {
background: url(images/menu/developer_c.jpg) no-repeat 0;
}

#topNavigation a.VideoDemo:active {
background: url(images/menu/video_demo_c.jpg) no-repeat 0;
}
</style>

--------------------

Can anyone please let me know what I am doing wrong as I have tried so many ways to get this working and can't find the right tutorial for this type of hover image effect.

Thankyou

**nickohrn** · 05-03-2008, 09:55 AM

OP - While the screenshots are nice, I'd like to see the problem live. Do you have a link that you can throw us?

**elv8** · 05-03-2008, 11:41 AM

An example of my menu can be found here: http://www.bodyboarding.net.au/menu/index.html

Im trying to get the menu to work and behave and I have made no links to other pages yet from the menu. I am not sure if the coding is on the right track.

Please not that all the buttons are different widths, and have slightly different images as this menu was sliced from a .pdf layout.

Any help would be much appreciated

**wayfarer07** · 05-03-2008, 12:01 PM

I'm not seeing the shifting problem you described, but the smoothness of the rollover transition is easily fixed. The reason you get a 'flicker' the first time you rollover a nav item is that the replacement image is not being cached by your browser. Instead of changing the background on hover like this:

Code:

#topNavigation a.about:hover {
    background: url(images/menu/about_rol.gif) no-repeat 0;
}

It is better to combine the two images for the rollover as one image as the background for the element (a.about for example), and stack them on top of each other so that on hover, with background position changing from 'top left' to 'bottom left' (or visa versa, depending on how it is arranged). This way the image is already available and is immediately available. This rule is extremely helpful and applies not only to background images, as any content that is hidden using negative margins or positioning is loaded along with all the other content when the page loads. This allows us to do some very cool things with page content dynamically. If you get in the habit of doing this now, with simple CSS hover states, you will save yourself a world of hurt later on when things get a bit more advanced.

**wayfarer07** · 05-03-2008, 12:09 PM

Ok, I am seeing what you mean by the shift to the bottom. I wouldn't rely on Dreamweaver as a display tool. It is totally non-standard. Although I think you are overusing absolute positioning here, you can change the 'top' value from 'auto' to '-16px' on all of the 'a' elements within '#topNavigation'.

**elv8** · 05-03-2008, 01:52 PM

I did what you said, and got it all to work but the left_nav is down the bottom for some reason and there is no way I can change it back towards the whole menu that is together in one piece.

Any suggestions, please?