I'm working on a tutorial that Eric Meyer did for lynda.com titled "CSS Site
Design". IE6 doesn't seem to like the negative top margin for #today. Most
of the navbar disappears, though it works fine in Firefox. What's happening
and what do I need to change to make it work in IE6? Below, I have patched
together a document that isolates the problem area.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title> About Tea: History </title>
<style type="text/css">
/* ------------- "generic" styles */
body {
margin: 0;
padding: 0;
background: #E3EDC2;
color: #333;
font: small "Lucida Grande", Arial, sans-serif;
}
a {
text-decoration: none;
}
a img {
border: 0;
}
p {
margin: 0 0 1em;
}
/* ------------- masthead styles */
#masthead {
margin-bottom: 1.75em;
padding-top: 1px;
background: #ABD240;
}
#homelink {
display: block;
margin: 1em 2em 1em;
padding: 2em 0 0.5em 1em;
background: url(../images/curl.gif) 100% 100% no-repeat;
}
#navlinks {
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #FFF;
}
#navlinks li {
display: inline;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #99C;
font-weight: bold;
}
#navlinks li.last {
border-right: 0;
}
#navlinks a {
color: #D4EC84;
}
#today {
margin-top: -1.66em;
padding: 0 2em 0 0;
color: #FFF;
font-weight: bold;
text-align: right;
line-height: 1;
}
</style>
</head>
<body>
<div id="masthead">
<a href="#" id="homelink"><img src="images/javacotea.gif"
alt="JavaCo Teaa home" /></a>
<ol id="navlinks">
<li class="first"><a href="aboutus-ourgoal.html">about
us</a></li>
<li>about tea</li>
<li><a href="#">brewing</a></li>
<li><a href="#">drinking</a></li>
<li><a href="#">products</a></li>
<li class="last"><a href="#">contact us</a></li>
</ol>
<p id="today">
July 16, 2006
</p>
</div>
</body>
</html>
______________________________________________________________________
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/
