Latest Lists

Calling All "Css" programming Experts?

Hello fellow programmers I desperately need your help to solve this really annoying “Html” / Css” problem. I've created a horizontal navigation list using an "unordered list" & am styling it using Css. When the user place the cursor over each link an overstate graphic appears but the links below keep moving (shifting) how do I prevent this from happing and how to I get the whole graphic to appear just not part of it and also line up the text inside the graphic. Thanks for you help I'll paste in the code below div#leftnavcontainer { margin-left: 54px; } #leftnavlist { padding-left: 0; margin-left: 0; margin-top: 70px; border-bottom: 2px solid #9c0e1b; width: 190px; float: left; } #leftnavlist li { font-family: "Myriad Pro", "Myriad Pro Cond", "Myriad Pro Light"; font-size: 14px; list-style: none; margin: 0; padding: 0.40em; border-top: 2px solid #9c0e1b; } #leftnavlist li a { display: block; color:#000000; text-decoration: none; padding: 0; margin: 0; } #leftnavlist li a:hover { height: 26px; background: url(../Images/Index/leftnav_hover_graphic.png) no-repeat; color:#FFFFFF; }

Public Comments

1. It's changing size because you're setting a height on the hover..
2. The first error i see is: div#leftnavcontainer { margin-left: 54px; } It Should Be either: #leftnavcontainer div { margin-left: 54px; } Or #leftnavcontainer { margin-left: 54px; } And Because that deals with the margin, that could be the shift error and/or line-up error. And about the whole graphic being displayed you may have simply messed something up in the HTML. And like the person before me said, the size is an issue because 26px may not be the auto-set default, thus changing the size.