I'm studying "Eric Meyer on CSS". Below is an excerpt from the code as it is
listed on page 102 of the book before the margin for the "td#sidelinks a" is
changed. The below HTML and CSS create a menu of navigation links on the
left side of the web page. My question surrounds the padding rules. When the
"td#sidelinks a" padding is changed to "padding: 1px 10px 1px 5px;" the
right hand borders on both the <a> and <h4> elements move to the right,
causing a space between the text and the right hand border of the menu. I
don't understand how the <h4> border moves along with the <a> border when
the change is only made to the <a> padding.
<style>
/* menu styles */
td#sidelinks a {
display: block;
text-decoration: none;
margin: 0;
padding: 1px;
font: bold 100% Arial, Verdana, sans-serif;
border-right: 1px solid rgb(60%,50%,40%);
}
td#sidelinks h4 {
background-color: transparent;
color: rgb(30%,20%,10%);
margin: 0;
padding: 1em 0 0;
font: bold 100% Arial, Verdana, sans-serif;
border-right: 1px solid rgb(60%,50%,40%);
border-bottom: 2px solid rgb(50%,40%,30%);
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td colspan="2" id="banner"><h1>Styling With EM</h1></td>
</tr>
<tr>
<td id="sidelinks">
<h4>Standards</h4>
<a href="html.html" id="html">HTML</a>
<a href="xhtml.html" id="xhtml">XHTML</a>
<a href="css.html" id="css">CSS</a>
<a href="dom.html" id="dom">DOM</a>
<h4>Extras</h4>
<a href="tools.html" id="tools">Tools</a>
<a href="review.html" id="reviews">Reviews</a>
<a href="comment.html" id="comment">Commentary</a>
<a href="weblog.html" id="weblog">Weblog</a>
<h4>Basic</h4>
<a href="contact.html" id="contact">Contact</a>
<a href="index.html" id="home">Home</a>
</td>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
