Forum Moderators: not2easy
First, some background. I'm in the process of updating our product (J2EE, JSP based) to use CSS for layout instead of tables. Won't be able to do the whole product at once. One of our components are HTML/CSS based text buttons. They look like buttons, but are really <a href>. Borders are specified using CSS and used for 3D effect.
Single buttons will simply be <a href="">. Groups of buttons will use <ul><li><a href=""...>. Modified examples from ALA.
The Problem. Works fine until I put the <div> in a table cell. Then the top and bottom borders disappear. Can't figure out why the div doesn't expand the full height in the td.
Caveats. We don't like to specify height and widths. All pages are dynamically generated and support 7 languages. German's the longest.
Here's some test code. Passed XHTML 1.0 Strict validation.
Thanks for any help.
<!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" xml:lang="en">
<head>
<title>Buttons</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<style type="text/css">
.BtnSpan {
display: inline;
text-align: center;
padding: 0;
margin: 0;
}
.BtnSpan a {
white-space: nowrap;
border-style: solid;
border-width: 5px;
padding: 2px 8px;
margin: 0;
text-decoration: none;
font-weight: bold;
color: #ffffff;
background-color: #399a39;
border-color: #0000ff #ff0000 #ff0000 #0000ff;
voice-family: "\"}\""; voice-family:inherit;
}
.BtnSpan a:hover {
color: #000000;
background-color: #bce7bc;
border-color: #ff0000 #0000ff #0000ff #ff0000;
}
.Buttons {
}
</style>
</head>
<body>
<p>Compatability Mode: <span id="CompatMode"></span></p>
<p>Three buttons in a div</p>
<div class="Buttons">
<span class="BtnSpan"><a id="btnId" href="">Test Button</a></span>
<span class="BtnSpan"><a id="btnId2" href="">Test Button</a></span>
<span class="BtnSpan"><a id="btnId3" href="">Test Button</a></span>
</div>
<p>Same three buttons repeated in a table cell. Why are the top and bottom borders gone? IE 5.5, IE 6, NS 7, Opera 7</p>
<table><tr><td>
<div class="Buttons">
<span class="BtnSpan"><a id="btnId7" href="">Test Button</a></span>
<span class="BtnSpan"><a id="btnId8" href="">Test Button</a></span>
<span class="BtnSpan"><a id="btnId9" href="">Test Button</a></span>
</div>
</td></tr></table>
<p />
<script type="text/javascript">
var elem = document.getElementById("CompatMode");
elem.innerHTML = document.compatMode;
</script>
</body>
</html>
Also if you give the .buttons class a margin of 5px they display with the top and bottom borders.
Thanks for your help.
BTW try adding a border to your table so you can see whats happening.
If I then add float: left to .BtnSpan a, it seems to work, but I have to add clear: both; to the <p> in order to get it not to float around the buttons and go to the next line.
Oh well. Thanks for your help. Greatly appreciated.
And this lead me on to an interesting hour of research...
results follow:
the answer is line-height [w3.org]the span, in your case, (but it would happen with the <a> element too), is a non-replaced inline element and the height of this span, is governed by the (default) line-height of it.
The default value for line-height is "normal"
A value of 'normal' sets the 'line-height' to a reasonable value for the element's font.
The line height is the height required to display text only within the line, even if there is no text to display.. it does not include borders, padding or margins applied.
The Height of Lines [w3.org]
Note that any padding, border or margin above and below non-replaced inline elements does not influence the height of the line. In other words: if the 'line-height' is too small for the chosen padding or border, it will overlap with text on other lines.
so what you are seeing is that your lines are too small for their chosen borders and it is overlapping the other lines..and actually the same is happening with the "buttons in the div" too... only it's not obvious until you add some color.
So in conclusion, if you want to display borders on inline elements then you will need to specify a larger than normal line height.
<!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" xml:lang="en">
<head>
<title>Buttons</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<style type="text/css">
.mybuttons a {
white-space: nowrap;
border-style: solid;
border-width: 5px;
padding: 2px 8px;
margin: 0;
text-decoration: none;
font-weight: bold;
color: #ffffff;
background-color: #399a39;
border-color: #0000ff #ff0000 #ff0000 #0000ff;
}
.mybuttons a:hover {
color: #000000;
background-color: #bce7bc;
border-color: #ff0000 #0000ff #0000ff #ff0000;
}
.mybuttons { background: yellow;}
.lhadd {line-height: 40px;}
.testlinebox {background: violet; text-align: right;}
</style>
</head>
<body>
<p>Three buttons in a div width other divs to show line boxes</p>
<div class="testlinebox">test line box</div>
<div class="mybuttons">
<a id="btnId" href="">Test Button</a>
<a id="btnId2" href="">Test Button</a>
<a id="btnId3" href="">Test Button</a>
</div>
<div class="testlinebox">test line box</div><p>Same three buttons repeated in a table cell. the Borders are gone because the line height of the table cell is not affected by borders margin or padding</p>
<table border="1">
<tr><td class="mybuttons">
<a id="btnId" href="">Test Button</a>
<a id="btnId2" href="">Test Button</a>
<a id="btnId3" href="">Test Button</a>
</td></tr></table>
<hr>
<p>Follows the same code with line-height adjustment added in...</p>
<p>in a div....</p>
<div class="testlinebox">test line box</div>
<div class="mybuttons lhadd">
<a id="btnId" href="">Test Button</a>
<a id="btnId2" href="">Test Button</a>
<a id="btnId3" href="">Test Button</a>
</div>
<div class="testlinebox">test line box</div>
<p>in a table....</p>
<table border="1">
<tr><td class="mybuttons lhadd">
<a id="btnId" href="">Test Button</a>
<a id="btnId2" href="">Test Button</a>
<a id="btnId3" href="">Test Button</a>
</td></tr></table>
</body>
</html>
Have fun and thanks for the learning curve ;)
Suzy
