PDA

View Full Version : Problems with borders/padding on anchors in <div>/<td>

spk
12-26-2002, 08:15 PM
New to advanced css, but not HTML. Thanks in advance for your replies.

I've read about the "box" (content, padding, border, margin). I don't understand two things in my examples below.

1. Why do the border and padding for my .menuButton extend outside the <div>? I would think the <div> would fully contain the content inside it. I've set the <div> background to gray and the menuButtons extend outside the gray.

2. Why does the <td> seem to clip the top/bottom border and padding from the anchor? Shouldn't the <td> expand to fully contain the anchor, its padding and borders?

Thanks for your replies.


<html>
<head></head>
<body bgcolor="ffffff">
<p></p>
<style type="text/css">
.menuBar {
background-color: gray;
border: 3px solid;
border-color: #ff0000;
padding: 0px;
text-align: left;
}

.menuButton {
color: #000000;
background-color: #68699f;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
border: 1px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: default;
padding: 12px 16px 12px 16px;
text-decoration: none;
}

.menuButton:hover {
background-color: #0000ff;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
color: #000000;
}
</style>
<div class="menuBar">
<a class="menuButton" href="">Button 1</a>
<a class="menuButton" href="">Button 2</a>
<a class="menuButton" href="">Button 3</a>
<a class="menuButton" href="">Button 4</a>
</div>
<p></p>
<table>
<tr>
<td class="menuBar">
<a class="menuButton" href="" ...>Button 1</a>
<a class="menuButton" href="" ...>Button 2</a>
<a class="menuButton" href="" ...>Button 3</a>
<a class="menuButton" href="" ...>Button 4</a>
</td>
</tr>
</table>
</body>
</html>
ronaldb66
12-27-2002, 08:38 AM
I don't have an answer here, but i played with your code a bit (by the way, you style sheet should be defined inside the head element, not in the body); try setting whatever height to your .menubar class, then things really get strange...
Catman
12-27-2002, 08:10 PM
As I understand it, neither tds nor divs recognize the style dimensions of enclosed elements -- if you remove the styles complete, you'll see that the links fit quite nicely.

Two solutions come to mind:

Specify the height of menuBar and add a float to menuButton (e.g., float : left; ) -- floating corrects the problems Ronald mentions.
Leave the style sheet as is but add one <br /> element before the links and two after -- this gives the div and td "real" content to determine the height.


In either case, as Ronald says, move the style declarations into the head element.
spk
12-27-2002, 09:55 PM
Thanks for your replies. I'll give them a shot.

Catman. Do you have a reference explaining that td nor divs recognize the style dimensions of enclosed elements? I've been searching all over for that information.

BTW. I read where the <style> must be in the head. Seems very limiting. We're using componentized JSPs with a MainTemplate.jsp. Our MainTemplate.jsp, which creates the <html><head><body> tags doesn't know what css and Javascript are required by the components. Each component JSP is responsible for including their required css and Javascript. We'll have to figure a way to signal the required css files to MainTemplate.jsp so they can be placed in the <head>. Seems like IE and NN 7.0 don't require them in the <head>. At least we haven't had problems, yet.

In addition, we dynamically create the css based on the user's chosen color scheme and font size.

Thanks again.