Hi All,
Why doesn't this work in Firefox but is perfect in IE6?
In IE6, the text is on the same line but in Firefox, the left aligned text
is on the line above the right aligned text.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitl ed Document</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;
margin: 0;
padding: 0;
}
a, a:visited {
color: #00f;
text-decoration: none;
}
a:hover {
color: #f60;
text-decoration: underline;
}
#basicnav {
padding: 4px 0;
margin: 0;
width: 100%;
background-color: #999;
border-top: 1px solid #ccc;
border-bottom: 1px solid #000;
}
#basicnav a, #basicnav a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#basicnav a:hover {
color: #000;
text-decoration: underline;
font-weight: bold;
}
#topleftnavlist li {
display: inline;
list-style-type: none;
float: left;
padding-left: 20px;
}
#toprightnavlis t li {
display: inline;
list-style-type: none;
float: right;
padding-right: 20px;
}
-->
</style>
</head>
<body>
<div id="basicnav">
<ul id="topleftnavl ist">
<li><a href="#">Home</a></li>
</ul>
<ul id="toprightnav list">
<li><a href="#">Site map</a></li>
<li><a href="#">Sell our products</a></li>
<li><a href="#">Contac t us</a></li>
</ul>
</div>
</body>
</html>
Thanks,
JB
Why doesn't this work in Firefox but is perfect in IE6?
In IE6, the text is on the same line but in Firefox, the left aligned text
is on the line above the right aligned text.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitl ed Document</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;
margin: 0;
padding: 0;
}
a, a:visited {
color: #00f;
text-decoration: none;
}
a:hover {
color: #f60;
text-decoration: underline;
}
#basicnav {
padding: 4px 0;
margin: 0;
width: 100%;
background-color: #999;
border-top: 1px solid #ccc;
border-bottom: 1px solid #000;
}
#basicnav a, #basicnav a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#basicnav a:hover {
color: #000;
text-decoration: underline;
font-weight: bold;
}
#topleftnavlist li {
display: inline;
list-style-type: none;
float: left;
padding-left: 20px;
}
#toprightnavlis t li {
display: inline;
list-style-type: none;
float: right;
padding-right: 20px;
}
-->
</style>
</head>
<body>
<div id="basicnav">
<ul id="topleftnavl ist">
<li><a href="#">Home</a></li>
</ul>
<ul id="toprightnav list">
<li><a href="#">Site map</a></li>
<li><a href="#">Sell our products</a></li>
<li><a href="#">Contac t us</a></li>
</ul>
</div>
</body>
</html>
Thanks,
JB
Comment