rollover image problem

[Tamarab]

Hi Guys,

This is my first attempt at a CSS page, so bare with me if this is basic. I have wracked my brain all day, and am sure their is an easy cure.

I want my menu to look like this (the menu with the blue background box and white text over top with white dividers between)
http://tamarabrooks.com/csspositioning/website7.jpg

So far I have gotten it to look like this (as far as the menu goes):
http://tamarabrooks.com/csspositioning/polis2.html

THe problems I can identify are:
-the entire background image does not show - just the heigh of the text
- I need to have those white lines go all the way up the buttons

My html code so far looks like this:
<div id="menuitem1">
<span class="menu"> <a href="#" id="gl1" class="menu"onmouseover="ehandler(event,menuitem1);">globallink</a>
<span class="style1"> | </span> <a href="#" class="menu" onmouseover="ehandler(event,menuitem2);">globallink</a>
<span class="style1"> | </span> <a href="#" id="gl3" class="menu" onmouseover="ehandler(event,menuitem3);">globalink</a>
<span class="style1"> | </span> <a href="#" id="gl4" class="menu" onmouseover="ehandler(event,menuitem4);">globalink</a>
<span class="style1">|</span> <a href="#" id="gl5" class="menu" onmouseover="ehandler(event,menuitem5);">globallink</a>
<span class="style1">|</span> <a href="#" id="gl6" class="menu" onmouseover="ehandler(event,menuitem6);">globallink</a>
<span class="style1">|</span></a><a href="#" id="gl7" class="menu"onmouseover="ehandler(event,menuitem7);">globallink</a></div>

My CSS looks like this:
a.menu {
text-decoration: none;
background-repeat: repeat;
font-family: Verdana,sans-serif;
color: #FFFFFF;
font-size: 14px;
height: 25px;
background-image: url(images/rollover1a.jpg);
}

a.menu:link {
font-family: Verdana,sans-serif;
color: #C6FFFF;
font-size: 12px;
background-image: url(images/rollover1a.jpg);
}
a.menu:visited {
color: #FFFFFF;
background-image: url(rollover1a.jpg);
}
a.menu:hover {
color: #C6FFFF;
background-image: url(images/rollover1b.jpg);
}

a.menu:active {
color: #C6FFFF;
background-image: url(images/rollover1b.jpg);
}

#menuitem1 {
width: 600px;
height: 25;
position: absolute;
left: 355px;
top: 150px;
}

Any help would be appreciated, I know it's confusing - I am sorry, I tried to word it as simple as possible.

Many thanks,
Tamarab

[cjwsb]

Try

marginleft: somenumberpx;


and remove absolute positioning because it seems to be screwing up your link placements.

Is the height set in the CSS the same height as the actual image? It has to be. If it's smaller, then some of the image will get cut off.

HTH,

Chris

[Tamarab]

Hi cjwsb!

Thanks for trying to help me. Your solution didn't actually help, but I learnt from it nonetheless.

Anyhow, while I was waiting for a reply I tried another image rollover technique I found on the net.... anyhow, it works in Safari and IE, but the posiitioning in IE is all wrong and not in safari. So, I think I may have to do another post if I don't figure it out soon. LOL Im becoming a regular here haha!

Thanks for your help!
Tamarab

[Ranger56]

Try

marginleft: somenumberpx;


and remove absolute positioning because it seems to be screwing up your link placements.

Is the height set in the CSS the same height as the actual image? It has to be. If it's smaller, then some of the image will get cut off.

HTH,

Chris

You mean margin-left:npx. Right?