Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expanding <a> greater than content without width 2

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
I know the heading is a bit 'you what?'. So i'll try to explain.

I have a CSS Menu, I want each <a> within the <li> to have a padding of 20px; left & right, basicaly widening the width of each menu.

I don't want to add a hardcoded width as I need each menu item to be different widths depending on its content.

giving the <a> padding:0 20px; works great, however! , the padding either side of the 'menu word' does not activate the hover effect, nor work as an onclick anchor should.

I have the <a> defined as 'block' and thought padding was something added to the inner part of an element, i.e. being part of its content, where as margin being on the outside of an element.

How do I make the padding part of the hover/anchor effect, i know I could give each menu item a separate class and hard code each width in the CSS removing the padding, but that seems long winded and excessive, or is that the only way to acheive the effect I want.

hope that makes sense, here is the current test site
regards,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
Hover will work over the padding of an <a> just as you say it should. Try
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
  <title>Some title</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
    a { background: #999; display: block; padding:0 20px; }
    a:hover { background: #ccc; }
  </style>
</head>
<body>
<ul><li><a href="#">Test</a></li></ul>
</html>
It also seems to be working on the page you've linked to. Were you perhaps applying the padding to the <li> instead of the <a>?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
It also seems to be working on the page you've linked to.
Click to expand...
what browser you using? it don't work for me in IE7

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Sadly, you are experiencing another one of IE's unstandard compliance junk. The padding adds on to the width of the anchor and is not included as part of the anchor.

In FF, your page works just fine.

[monkey][snake] <.
 
Upvote 0 Downvote
bummer! , guess it's a bunch of classes with fixed widths then!

thanks for the heads up


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
well i found that if I applied min-width:1%, it fixed it in IE7 but it still don't work in IE6.

That classic saying spings to mind
You can please all the browsers some of the time and you can please some of the browsers all the time, but you can't please all the browsers all the time!
Click to expand...
[hairpull3]

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
actually i used the IE6 holly hack "* html" to apply width:1% and had a normal min-width:1% for FF & IE7 , job done! :)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
709
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
205
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
776
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
717
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top