Gawwad
My way or Haddaway!
+212|6656|Espoo, Finland
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.

https://img830.imageshack.us/img830/1631/prblmoffcer.jpg

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;
}
Problem arises:

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;
}
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.
B-Scimitar
Defeating your warriors.
+116|6380|Espoo, Finland
Try replacing the margin with padding.

Code:

  padding-left: 8px;
  padding-right: 8px;
Gawwad
My way or Haddaway!
+212|6656|Espoo, Finland
That works! Thank you.
First time using CSS hehe

Board footer

Privacy Policy - © 2024 Jeff Minard