CSS float problem
Hi Experts,
Please see my code below for navigation I am trying to implement using CSS. All looks groovy except in IE. The "LOG-IN & SIGN-IN" gets wrapped to the next line instead of floating to the right. Any help is greatly appreciated. Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
body {
text-align: center;
}
body {
font-size: small;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
font-weight: normal;
color: #666;
}
#wrapper {
width: 760px;
margin: 0 auto;
text-align: left;
}
#navWrapper {
margin: 10px 0 0 0;
width: 760px;
height: 25px;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
#navWrapper {
background: #CCCCCC
}
/* Navigation Links*/
#mainNav {
margin: 2px 0 0 0;
padding: 0;
height: 35px;
font-weight: bold;
font-size: 80%;
}
#mainNav ul {
width: 500px;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainNav li {
display: block;
margin: 2px 0 0 3px;
padding: 0;
float: left;
width: auto;
}
#mainNav a {
color: #000;
display: inline;
width: auto;
text-decoration: none;
margin: 0;
padding: 10px 10px;
}
#mainNav a:hover, #mainNav a:active {
color: #b41d8d;
}
#mainNav a.active:link, #mainNav a.active:visited {
position: relative;
z-index: 102;
background: #BBB;
color: #D7D493;
font-weight: bold;
}
-->
</style></head>
<body>
<div id="wrapper">
<!--Main Nav begins-->
<div id="navWrapper">
<div class="floatLeft">
<ul id="mainNav">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US </a></li>
<li><a href="">ARCHIVES</a></li>
<li><a href="">CONTACT </a></li>
</ul>
</div>
<div class="floatRight">
<ul id="mainNav">
<li><a href="">LOG-IN</a></li>
<li><a href="">SIGN-IN</a></li>
</ul>
</div>
</div>
<!--Main Nav ends-->
</div>
</body>
</html>
Please see my code below for navigation I am trying to implement using CSS. All looks groovy except in IE. The "LOG-IN & SIGN-IN" gets wrapped to the next line instead of floating to the right. Any help is greatly appreciated. Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
body {
text-align: center;
}
body {
font-size: small;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
font-weight: normal;
color: #666;
}
#wrapper {
width: 760px;
margin: 0 auto;
text-align: left;
}
#navWrapper {
margin: 10px 0 0 0;
width: 760px;
height: 25px;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
#navWrapper {
background: #CCCCCC
}
/* Navigation Links*/
#mainNav {
margin: 2px 0 0 0;
padding: 0;
height: 35px;
font-weight: bold;
font-size: 80%;
}
#mainNav ul {
width: 500px;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainNav li {
display: block;
margin: 2px 0 0 3px;
padding: 0;
float: left;
width: auto;
}
#mainNav a {
color: #000;
display: inline;
width: auto;
text-decoration: none;
margin: 0;
padding: 10px 10px;
}
#mainNav a:hover, #mainNav a:active {
color: #b41d8d;
}
#mainNav a.active:link, #mainNav a.active:visited {
position: relative;
z-index: 102;
background: #BBB;
color: #D7D493;
font-weight: bold;
}
-->
</style></head>
<body>
<div id="wrapper">
<!--Main Nav begins-->
<div id="navWrapper">
<div class="floatLeft">
<ul id="mainNav">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US </a></li>
<li><a href="">ARCHIVES</a></li>
<li><a href="">CONTACT </a></li>
</ul>
</div>
<div class="floatRight">
<ul id="mainNav">
<li><a href="">LOG-IN</a></li>
<li><a href="">SIGN-IN</a></li>
</ul>
</div>
</div>
<!--Main Nav ends-->
</div>
</body>
</html>
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks all for your advices! Sorry it took a bit to respond. Radnor's ul { display: inline; } seemed to do the trick but I need to throughly test using other suggestions made here as well to make sure it works throught all the popular broswers.
Thanks again and have a great day!
Thanks again and have a great day!
CSS
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
But I did get this to work in BOTH:
<!--Main Nav begins-->
<div id="navWrapper">
<ul id="mainNav" class="floatLeft">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US </a></li>
<li><a href="">ARCHIVES</a></li>
<li><a href="">CONTACT </a></li>
</ul>
<ul id="mainNav" class="floatRight">
<li><a href="">LOG-IN</a></li>
<li><a href="">SIGN-IN</a></li>
</ul>
</div>
<!--Main Nav ends-->