...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum