Nataliemac
Posts: 4

Okay, here's my page: http://www.gyrotonicla.com/redesign/index.html

The issue I'm having is with the navigation bar. Each button is an image. Currently, my CSS file sets the border of each button to 1 pixel wide and the same color as the background. On a:hover, the border turns to white, making a nice, bright white box around the button to show which one is selected.

Well, ideally anyway.  >

It works in IE, but in NN, Firefox, Mozilla, Opera, etc. only the left, right and bottom borders show up. I can't figure it out. I've played around with the margin and padding attributes, but nothing has made that top border show up.

Any ideas?

Thanks.

Joe Gillespie
Posts: 528

First of all, when you add a 1 pixel border to a div, it is added to the outside of the box, making it 2 pixels wider and 2 pixels higher.

your code

#navbar            {top: 75px; left: 0px; background-color: #5C1000; border: 0; height: 46px; margin: 0; padding-top: 6px; padding-bottom: 6px; position: absolute; text-align: center; width: 100%; z-index: 60;}

a.navbar      {border-width: 1px; border-style: solid; border-color: #5C1000; line-height: 18px;}

a:hover.navbar      {border-color: white;}

Once you understand that, the box has to stay the same size, the border has to stay contstant in states 'a' and 'hover' and only the colour has to change from transparent to white.


a.navbar  { border-width: 1px; border-style: solid; border-color: transparent; line-height: 18px;}

a:hover.navbar      {border-width: 1px; border-style: solid; border-color: #fff; line-height: 18px;}


That should do the trick.

Joe Gillespie
Posts: 528

Thinking about it, the more elegant solution would be to have a class called .button and then put the common definitions in it...

.button { border-width: 1px; border-style: solid; border-color: transparent; line-height: 18px }

and then

a.button {border-color: transparent}

a:hover.button {border-color: white}

Nataliemac
Posts: 4

Thanks for the suggestions.

See, I was thinking that the a:hover pseudoclass inherited its attributes from the a class which is why I didn't assign all attributes to both. I guess I was wrong.

I tried both of your suggestions, but they both have the same result: nothing at all happening on the a:hover in NN, Opera, etc. It still works beautifully in IE.

This is a stumper. I thought I was so clever coming up with a little interaction that didn't require any Javascripting. That's where cleverness will get you.