CSS newbie struggles - layout

arctic

10-02-2006, 10:25 AM

Hello.

I am having difficulties getting some list text that is floated right to display inline with some other listed text that is not floated. Not displaying right in Firefox.
http://www.upperhouse.us/springst/index.html

html:
<body>
<div id="content">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">personalize it</a></li>
<li><a href="#">special orders</a></li>
<li><span class="strapline"><a href="#">checkout</a></span></li>
<li><span class="strapline"><a href="#">shopping Cart</a></span></li>
</ul>
</div>
<div id="inner">
<br>
</div>
</body>

CSS:
body, div, img, form, table, tbody, tfoot, thead, tr, td, h1, h2, h3, h4, h5, h6, p{
margin: 0px;
padding: 0px;
border:0px none;
background-color: #f48026;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
}
#content {
width: 907px;
margin-left: auto;
margin-right: auto;
color: #FFFFFF;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0px;
border:0px none;
background-color: #f48026;
}
#content .strapline {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
float: right;
}
#content .strapline ul{
list-style: none;
margin: 0;
padding: 0;
}
#content .strapline li{
display: inline;
}
#content ul {
list-style: none;
margin: 0;
padding: 0;
}
#content li {
display: inline;
}
#content a:link, #content a:visited {
padding: 3px 10px 2px 10px;
color: #FFFFFF;
background-color: #f48026;
text-decoration: none;
}
#content a:hover {
color: #981b1e;
background-color: #FFFFFF;
}
#content {
width: 907px;
margin-left: auto;
margin-right: auto;
color: #FFFFFF;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#inner {
width: 907px;
margin-left: auto;
margin-right: auto;
color: #636466;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #efeacd;
margin-top: 2px;
}

Any nudge in the right direction is very much appreciated!

Thanks!

mylegoh

10-02-2006, 12:33 PM

You will find the code below works, although you will have to fiddle with the sizes.

I have floated all related texts and removed the span putting the class on the <li> tag instead.

body, div, img, form, table, tbody, tfoot, thead, tr, td, h1, h2, h3, h4, h5, h6, p{
margin: 0px;
padding: 0px;
border:0px none;
background-color: #f48026;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
}
#content {
width: 907px;
margin-left: auto;
margin-right: auto;
color: #FFFFFF;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0px;
border:0px none;
background-color: #f48026;
}
#content ul {
list-style: none;
margin: 0;
padding: 0;
}
#content li {
display: inline;
float: left;
}
#content .strapline {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
float: right;
}
#content .strapline ul{
list-style: none;
margin: 0;
padding: 0;
}
#content .strapline li{
display: inline;
float: inherit;
}

#content a:link, #content a:visited {
padding: 3px 10px 2px 10px;
color: #FFFFFF;
background-color: #f48026;
text-decoration: none;
}
#content a:hover {
color: #981b1e;
background-color: #FFFFFF;
}
#content {
width: 907px;
margin-left: auto;
margin-right: auto;
color: #FFFFFF;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#inner {
clear: left;
width: 907px;
margin-left: auto;
margin-right: auto;
color: #636466;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #efeacd;
margin-top: 2px;
}

<html>
<head>
<title></title>
</head>

<body>
<div id="content">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">personalize it</a></li>
<li><a href="#">special orders</a></li>
<li class="strapline"><a href="#">checkout</a></li>
<li class="strapline"><a href="#">shopping Cart</a></li>
</ul>
</div>
<div id="inner">
<br>
</div></body>
</html>

Hope this helps.

arctic

10-02-2006, 04:25 PM

Hope this helps.

Yes that does. Thank you very much!