Hover Border

[Spunky]

Ok so here's the thing. I need to be able to hover over a text link and have a border appear without the text slightly moving. What I tried doing is using CSS for the a:hover attribute. I tell what border style and color to be as well as add a padding so that the border is hugging the text too much. Thing is though when I hover over it the border goes on like it should but the text shifts position. How do I stop this?

[ShadowMage]

Far as I know you can't. Border and padding are part of an element's width and height.

[jeffman]

The link in a non-hover state can have border-color:transparentThat way, the border is always there, so the size never changes.

[Spunky]

The link in a non-hover state can have border-color:transparentThat way, the border is always there, so the size never changes.

Ok so when I read this I thought to myself omg why didn't I think of that? But then I went and tried it and it did not work. So, I added a colored border to see what the problem is. The borders in themselves don't even line up. I have the text inside a <span> tag if that helps. So, why is it doing this? The CSS applied to both the <span> tag for the text and the a:hover attribute is:

border-style: solid;border-color: #color

So, not sure why even if they did both have a border it doesn't match up..

[roundcorners]

remove the css border properties for the span element.try a {border-bottom:1px solid transparent;}a:hover {{border-bottom:1px solid #ff0000;}

[Spunky]

remove the css border properties for the span element.try a {border-bottom:1px solid transparent;}a:hover {{border-bottom:1px solid #ff0000;}

Thanks so much! That worked!

[Spunky]

Alright I actually have another question about this thing. Is it possible to get it so the borders are all the same size instead of fitting around the word? For example, "Home" is a shorter word than "Products" and so the border placed around them are 2 different sizes. I tried adding a width to the "a" attribute and the "a:hover" attribute but it didn't effect anything.

[Ingolme]

Width would work if you were working with block elements, but <a> elements are displayed as inline by defaut. Try adding display: block; to the <a> element. You might have to change a few other things after that, though, since block elements behave differently than inline elements.

[Spunky]

Width would work if you were working with block elements, but <a> elements are displayed as inline by defaut. Try adding display: block; to the <a> element. You might have to change a few other things after that, though, since block elements behave differently than inline elements.

Thank you. That actually worked. I did not even think about the fact that the element was inline vs block. The only problem is is that the text is no longer centered within the div tag. For my instance that's fine because I have the border almost the same width as the div so it looks how I want it to anyways, but, for learning purposes is there something else that could be changed to center the text? Like, the text is centered inside the border, but as a whole, being inside the div tag it is no longer centered.Thank you for your help though.

[Ingolme]

To center a block element within its parent, use margin: auto;. To center text within a block element, use text-align: center;

[Spunky]

To center a block element within its parent, use margin: auto;. To center text within a block element, use text-align: center;

OH I get it! Yea, like to center a div you do margin: 0 auto 0 auto; yea yea I didnt even think of that since now it is a block element, haha! Thank you!