Layout: Having problem with CSS borders

started by Nataliemac on May 22, 2004 — RSS Feed

Nataliemac 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 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 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 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.

Joe Gillespie Joe Gillespie
Posts: 528

Sorry, that should be .button a:hover. (too early in the morning when I wrote that!)

(but you do have to put the classes round the buttons in the HTML)

I have all the gen on this at


http://www.wpdfd.com/editorial/wpd1102.htm#feature


and it works in every browser except NN4.x

You must login to reply