5 replies [Last post]
TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 16 years 28 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

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!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 38 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 16 years 28 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

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!!!

TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 16 years 28 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

Browser Check/Question

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?

dougd182
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2004-02-05
Posts: 4
Points: 0

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.

TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 16 years 28 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

Browser Check/Question

Awesome! Thanks for the help!