...

View Full Version : top and bottom padding links not working



batch
11-26-2005, 07:59 PM
Anyone know why I can't get any vertical padding on my links in container_left and container_right?

[CODE]A:link, A:visited, A:active
{
color: #FFFFFF;
background: transparent;
text-decoration: none;
}

A:hover
{
color: #B2D7CA;
background: transparent;
text-decoration: none;
}

#container_left container_right A:link A:visited, A:active
{
background: transparent;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}

#container_left container_right A:hover
{
color: #B2D7CA;
background: transparent;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}

Span
11-26-2005, 09:50 PM
I never give inline elements a padding so I'm not sure if that's widely supported. But I do know there's something wrong with your selectors.

This line, for example:
#container_left container_right A:link A:visited, A:active

reads like this:
a visited link in a link that is in an undefined element with a name, class or id of container_right in an element with an id of container_left
AND
any active link

There's really no browser that knows what to do. I think you mean something like this:


#container_left a:link, #container_left a:visited, #container_left a:active, #container_right a:link, #container_right a:visited, #container_right a:active {
background: transparent;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}

#container_left a:hover, #container_right a:hover {
color: #B2D7CA;
background: transparent;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}

But you can write that story a little shorter:


#container_left a,#container_right a {
background:transparent;
text-decoration:none;
padding:10px 0;
}
#container_left a:hover,#container_right a:hover {
color:#b2d7ca;
}

;)

ronaldb66
11-26-2005, 10:00 PM
Inline content and elements -like a- don't support top and bottom padding; compliant browsers should ignore this.
You might want to try using the line-height property to increase white space above and below your links, or turn them into block-level using "display: block;".

batch
11-26-2005, 10:01 PM
ok thanks for clearing that up- Span. But the padding is still an issue, and I do suspect that it's the fact that the elements are inline.

So, next question...

How can I spread links out in my left and right menus without using line-height. becuase if I use line height, then the spacing is too great if the link text is long and gets sent to the another line.

I want some space in between each link, not each line of text. Is there anyway around this, so that all I have to be entering in my MENU divs is
<ahref="link">linktext</a><br> and they get spread out nicely?

Thanks again!

_Aerospace_Eng_
11-26-2005, 10:09 PM
Lists? Use an unordered list for your menu. You will be able to set a margin and/or padding to the lis.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unordered list for menu</title>
<style type="text/css">
#menu {
margin:0;
padding:0;
list-style:none;
}
#menu li {
margin:20px 0; /*this sets the space in between links*/
}
</style>
</head>

<body>
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum