I'm making a horizontal navigation bar which has a background gradient made of 1x25 images.
When hovering over an object in the bar, the background of that object changes to another, darker gradient.
But if I want to make the 'widths' relative and use a margin, the background only changes right under the text,
and the margin retains the color from the original bar.
The buttons on the bar are separated by 1x25 images I used as borders to not get double borders between two buttons.
Problem arises:
Is there any workaround to this? I've been googling for the past few hours while trying to resolve it my self, but no luck.
When hovering over an object in the bar, the background of that object changes to another, darker gradient.
But if I want to make the 'widths' relative and use a margin, the background only changes right under the text,
and the margin retains the color from the original bar.
The buttons on the bar are separated by 1x25 images I used as borders to not get double borders between two buttons.
Code:
.navbar{
width: 900px;
height: 25px;
font-family: verdana;
font-size: 13px;
line-height: 22px;
font-weight: bold;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: url(images/menubar_green.png) repeat-x;
}
.button a{
float: left;
position: relative;
left: 20;
width: 110;
height: 25px;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
text-decoration: none;
text-align: center;
}
.button a:hover{
float: left;
position: relative;
left: 20;
width: 110;
height: 25px;
color: #fff;
text-decoration: none;
text-align: center;
background: url(images/menubar_green_roll.png) repeat-x;
}Code:
.button a:hover{
float: left;
position: relative;
left: 20;
width: relative;
margin-left: 8px;
margin-right 8px;
height: 25px;
color: #fff;
text-decoration: none;
text-align: center;
background: url(images/menubar_green_roll.png) repeat-x;
}