Hi,
I am not able to get a consistent cross-browser behavior for the bullets of the horizontal list given below. In IE6, the height of the bullets are shown to be properly aligned with the list text. But in Mozill Firefox, the height is not properly aligned. If I align the height for FireFox by changing the background position of the bullet, then it is not aligned for IE6. Any help/explanation in this regard will be very helpful.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>"float: left" element with clear: left applied to block level element below</title> <style type="text/css" media="screen"> ul#navlist { list-style-type: none; width: 450px; background-color: #ffffff; font-weight: bold; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 100px; position: relative; left: 70px; }
newbie
Posts: 3
Joined: 2008-04-05
Posted: Fri, 2008-05-16 09:37
Hi,
I am not able to get a consistent cross-browser behavior for the bullets of the horizontal list given below. In IE6, the height of the bullets are shown to be properly aligned with the list text. But in Mozill Firefox, the height is not properly aligned. If I align the height for FireFox by changing the background position of the bullet, then it is not aligned for IE6. Any help/explanation in this regard will be very helpful.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"float: left" element with clear: left applied to block level element below</title>
<style type="text/css" media="screen">
ul#navlist
{
list-style-type: none;
width: 450px;
background-color: #ffffff;
font-weight: bold;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 100px;
position: relative;
left: 70px;
}
ul#navlist li {
display: inline;
font-weight: bold;
background-position: 1px 9px;
background-repeat: no-repeat;
}
ul#navlist li a
{
font-family: "Comic Sans MS";
width: 5em;
color: #18000D;
text-decoration: none;
padding-top: 0.2em;
padding-right: 0.8em;
padding-bottom: 0.2em;
padding-left: 1em;
font-size:13px;
background-repeat: no-repeat;
text-indent: 25px;
font-weight: bold;
}
ul#navlist li a:hover
{
color: #DA521E;
}
li {
line-height: 22px;
background-image: url(bullet.jpg);
text-indent: 22px;
background-position: 8px 7px;
list-style-type: none;
background-repeat: no-repeat;
font-family: "Comic Sans MS";
color: #0f0000;
font-size:17px;
font-weight: 400;
}
</style>
</head>
<body>
<div>
<ul id="navlist">
<li><a href="#">OBJECTIVES</a></li>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">VACATION ACTIVITIES</a></li>
</ul>
</div>
</body>
</html>
thanks,
Rajkhowa
//mod edit: <code></code> tags added to source. Please read the sticky threads at the top of each forum.
--gary.turner