Mon, 2004-02-02 18:33
I'm working on some site navigation, but having a problem with IE v.5.2 in Mac and, I assume, any IE v5 browser, but a check would be helpful.
Here's the actual html:
http://www.chaptertwomusic.com/css/index.html
This is how it looks in Safari and newer browsers...
But, this is how it comes out in older IE...
Not sure what's up with that. Thanks for the help!
Mon, 2004-02-02 20:34
#1
Browser Check/Question
Earlier versions of IE - before IE6 incorrectly rendered the box model, when borders and padding are used.
Your CSS does not contain any hacks to fix this.
Look here - http://css-discuss.incutio.com/?page=BoxModelHack
Regards
Day
Mon, 2004-02-02 20:45
#2
Browser Check/Question
Thanks for the suggestion. I'm new to hacks so could you suggest how best to implement this in the CSS. The link you gave was helpful for width, but it didn't really take height into account and there aren't really any height attributes in my CSS. They are just relative to the padding provided and the text contained within each li.
Thanks again for your help!!!
Tue, 2004-02-03 23:04
#3
Browser Check/Question
Daybreak_0 wrote:
Look here - http://css-discuss.incutio.com/?page=BoxModelHack
You know, in looking through that, I can see how that would help with fixed height or width but what about heights that aren't fixed?
Fri, 2004-02-06 21:16
#4
Browser Check/Question
Messed with the css a little... well ok maybe a lot. Here's what I came up with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#leftnav {
background-color: #FFF;
margin: 0;
padding: 0;
}
#leftnav li {
margin: 0;
padding: 0;
height: auto;
width: 137px;
border: 1px solid #838383;
border-top: none;
list-style: none;
text-align: left;
}
#leftnav li a {
width: 120px;
margin: 0;
height: 20px;
padding: 8px 0px 3px 7px;
display: block;
background-color: #FFFFFF;
border-width: 0px 0px 0px 10px;
border-style: solid;
border-color: #444444;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #475159;
}
#subnav {
background-color: #F0F0F0;
margin: 0;
padding: 0;
width: 120px;
}
#subnav li {
margin: 0px;
padding: 0;
list-style: none;
border: none;
}
#subnav li a {
margin: 0;
padding; 0;
width: 120px;
display: block;
background-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #475159;
text-decoration: none;
}
#navcontainer {
width: 120px;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="leftnav">
<li><a href="#">Test 1</a></li>
<li>
<ul id="subnav">
<li><a href="#">sub test 1</a></li>
<li><a href="#">sub test 2</a></li>
<li><a href="#">sub test 3</a></li>
</ul>
</li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
<li><a href="#">Test 6 </a></li>
</ul>
</div>
</body>
</html>
It looks better now in IE - at least for me it does.
Fri, 2004-02-06 21:21
#5
Browser Check/Question
Awesome! Thanks for the help!