padding on hover

[Thomas Mlynarczyk]

Hello,

I want to style an <a> element to have a special padding on "hover", like

a {padding: 3px 5px 2px 4px;}
a:hover {padding: 2px 4px 3px 5px;}

No problem for Mozilla. Opera 7, however, behaves strangely and does not
apply the background color to the padded area. And IE5 seems to ignore the
hover-padding.

Is there a workaround to achieve more compatibility?

Thomas

[Tim]

On Mon, 1 Dec 2003 22:52:19 +0100,
"Thomas Mlynarczyk" <bl************ *@hotmail.com> wrote:

I want to style an <a> element to have a special padding on "hover", like

a {padding: 3px 5px 2px 4px;}
a:hover {padding: 2px 4px 3px 5px;}

No problem for Mozilla. Opera 7, however, behaves strangely and does not
apply the background color to the padded area. And IE5 seems to ignore the
hover-padding.

Some browsers, of which I recall Opera is one of them, will ignore
styling that would cause the page to be redrawn. Putting padding on a
hover would do that, as the space around the link would increase, and
shuffle everything else around it.

Redrawing a page isn't a trivial task, and a browser author may take the
simple option - and not do it. I think Opera doesn't, because it only
rendered the page once. Although seeing pages reflow once images load
in, seems to refute that notion.

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.

[Lauri Raittila]

In article Tim wrote:

On Mon, 1 Dec 2003 22:52:19 +0100,
"Thomas Mlynarczyk" <bl************ *@hotmail.com> wrote:

I want to style an <a> element to have a special padding on "hover", like

a {padding: 3px 5px 2px 4px;}
a:hover {padding: 2px 4px 3px 5px;}

No problem for Mozilla. Opera 7, however, behaves strangely and does not
apply the background color to the padded area. And IE5 seems to ignore the
hover-padding.

URL?
Some browsers, of which I recall Opera is one of them, will ignore
styling that would cause the page to be redrawn.

Not Opera 7. I find that annoying, jumping links etc.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Thomas Mlynarczyk]

Also sprach Lauri Raittila:

URL?

Not available at the moment, sorry. But here's what I use:

a {
display:block;
width:100px;
background-color:#FFFF00;
border-top:2px solid #FFFFCC;
border-right:2px solid #999900;
border-bottom:2px solid #999900;
border-left:2px solid #FFFFCC;
padding:0px 5px 1px 5px;
}

a:hover {
background-color:#EEEE00;
border-top:2px solid #999900;
border-right:2px solid #FFFFCC;
border-bottom:2px solid #FFFFCC;
border-left:2px solid #999900;
padding:1px 6px 0px 4px;
}

The point is, the padding does not really change the layout. It just causes
the link text to be moved by one or two pixels within the "box". The sum of
top and bottom padding as well as the sum of left and right padding remain
the same. The reason why I would like this hover padding is, that the <a>
element is styled to resemble a 3D button which appears "pressed" on hover
(by inverting the border colors). But to make the effect really "3D", the
text on the button should move by one or two pixels as well.

[Beauregard T. Shagnasty]

Quoth the raven named Thomas Mlynarczyk:

Also sprach Lauri Raittila:

URL?
Not available at the moment, sorry. But here's what I use:

<snipcss> The point is, the padding does not really change the layout. It
just causes the link text to be moved by one or two pixels within
the "box". The sum of top and bottom padding as well as the sum of
left and right padding remain the same. The reason why I would like
this hover padding is, that the <a> element is styled to resemble a
3D button which appears "pressed" on hover (by inverting the border
colors). But to make the effect really "3D", the text on the button
should move by one or two pixels as well.

Here's a sample of CSS buttons that I use. They appear depressed on
hover. I think you're just missing the outset and inset. See the 3D link.
http://home.rochester.rr.com/bshagnasty/

I copied from one of my sites; hope i didn't miss anything.

--
-bts
-This space intentionally left blank.

[Thomas Mlynarczyk]

Also sprach Beauregard T. Shagnasty:

Here's a sample of CSS buttons that I use. They appear depressed on
hover. I think you're just missing the outset and inset. See the 3D
link. http://home.rochester.rr.com/bshagnasty/

Thanks for the link, but the borders are not the problem here. In fact, I
had tried using inset and outset, but it turned out that different browsers
would render this with different border colors. Using solid borders and
applying them to the four sides individually avoids this problem and gives
me more control over the appearance.

Meanwhile I have put a test page online:
http://www.mlynarczyk-webdesign.de/tom/. Without the hover-padding. But
having tried it out on Mozilla I must say that with hover-padding the 3D
impression of the buttons is highly improved.