473,324 Members | 2,254 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

padding on hover

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
5 14419
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: delerious | last post by:
Could someone please take a look at this page: http://home.comcast.net/~delerious1/index11.html The set of links on the left should not have any whitespace between them, and the set of links...
14
by: slim | last post by:
hi all, whilst creating a mock-up site, i am trying to follow the rules and guidelines i have been digesting over the last few months with regards to css positioning and accessibility. well,...
6
by: Thresh | last post by:
Hi all, two problems that I've been wrestling with: 1) I've got some images on a site that are links. I've got them set for 2px of padding, and a 1px border. The color changes upon hover. This...
12
by: Sander Tekelenburg | last post by:
Trying to make some images disappear on hover (works), and others appear on hover (works not). In tested browsers, this gives the expected result: IMG.disappear {visibility: visible}...
6
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to...
5
by: Hello | last post by:
Here problem is that in Mozilla the logo "The Website" will not pad from the edge. http://www.clickatus.com/test/ Also, when I put in loose DOCTYPE it blows the whole thing... Help......
1
by: bissatch | last post by:
Hi, I am having a problem when setting the padding of <a> tags within a link. A stripped down version of the page can be viewed at: http://www.martynbissett.co.uk/_sfa/index_test.php Its...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
2
by: dazhall | last post by:
hi guys, hopefully you can help me out with this one! I have a menu: <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Online Shop</a></li> <li><a href="#">Potted...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.