By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

padding on hover

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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.
Jul 20 '05 #2

P: n/a
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.

Jul 20 '05 #3

P: n/a
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.

Jul 20 '05 #4

P: n/a
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.

Jul 20 '05 #5

P: n/a
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.
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.