S
squareboy
The simple HTML & CSS below uses float:left and float:right to display
the three <li>'s on the same line. This works on IE, and it also works
on Firefox if there is no <a href> tag inside the <li>. But Firefox
puts the "should be on the same line" link on the following line. Any
advice on how to get it to stay on the same line?
TIA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css" media="screen">@import "style.css";</style>
</head>
<body>
<ul class="header">
<li>first</li>
<li>second</li>
<li class="sitelink"><a href="http://www.abc.com/">should be on same
line</a></li>
</ul>
</body>
</html>
style.css:
..header li {
float:left;
}
..header a {
float:left;
display:block;
}
..header .sitelink {
float:right;
}
..header .sitelink a {
float:right;
}
the three <li>'s on the same line. This works on IE, and it also works
on Firefox if there is no <a href> tag inside the <li>. But Firefox
puts the "should be on the same line" link on the following line. Any
advice on how to get it to stay on the same line?
TIA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css" media="screen">@import "style.css";</style>
</head>
<body>
<ul class="header">
<li>first</li>
<li>second</li>
<li class="sitelink"><a href="http://www.abc.com/">should be on same
line</a></li>
</ul>
</body>
</html>
style.css:
..header li {
float:left;
}
..header a {
float:left;
display:block;
}
..header .sitelink {
float:right;
}
..header .sitelink a {
float:right;
}