[schristians]

Hey Guy, I'm sure this is a popular topic and I simply can't get it right. The <ul> tags and css is below and the problem I have is the navigation won't work in IE7 (and I'm sure all other miserable Internet Explorer tools). Please take a look:


<tr class="navigation">
<td colspan="2">
<ul class="nav">
<li><a href="http://www.alphagraphics.com/centers/minneapolis-minnesota-us401/index.html"
class="btn_nav">Web</a></li>
<li><a href="http://twitter.com/AlphaStudioMktg" class="btn_nav">Twitter</a></li>
<li><a href="http://www.facebook.com/home.php#/pages/Minneapolis-MN/AlphaStudio-Marketing/79275408030?ref=ts"
class="btn_nav">Facebook</a></li>
<li><a href="http://www.linkedin.com/companies/305524 " class="btn_nav">Linkedin</a></li>
</ul>
</td>
</tr>



.navigation
{
background-image: url(nav_bg.jpg);
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
height: 40px;clear:both;
}
.nav
{
font: 14px Arial,Helvetica,Garuda,sans-serif;
color: #ffffff;
list-style: none;
padding: 0px;
margin: 0px 0px 0px 100px;
}
a.btn_nav:active, a.btn_nav:link, a.btn_nav:visited
{
float: left;
border-right: 1px solid #ffffff;
font: 14px Arial,Helvetica,Garuda,sans-serif;
color: #ffffff;
text-decoration: none;
padding: 0px 20px;
margin: 0px;
}
a.btn_nav:hover
{
text-decoration: underline;
padding: 0px 20px;
margin: 0px;
}

[schristians]

Sorry, the navigation won't work means that the links will not float to the right. They stay to the left and under the last link. In FF and Safari they float fine over to the right.

[schristians]

Nevermind. If you put div's instead of UL and LI it works without any of the added hassle.

[jesusfreak101]

please don't use tables

[fasterthanlight]

Ugh, geez.

you're floating the anchors in the code you posted, not the list items:

<ul class="nav">
<li><a href="http://www.alphagraphics.com/centers/minneapolis-minnesota-us401/index.html"
class="btn_nav">Web</a></li>
<li><a href="http://twitter.com/AlphaStudioMktg" class="btn_nav">Twitter</a></li>
<li><a href="http://www.facebook.com/home.php#/pages/Minneapolis-MN/AlphaStudio-Marketing/79275408030?ref=ts"
class="btn_nav">Facebook</a></li>
<li><a href="http://www.linkedin.com/companies/305524 " class="btn_nav">Linkedin</a></li>
</ul>

.nav
{
font: 14px Arial,Helvetica,Garuda,sans-serif;
color: #ffffff;
list-style: none;
padding: 0px;
margin: 0px 0px 0px 100px;
}
.nav li
{
float: left; /* ADD */
}
a.btn_nav:active, a.btn_nav:link, a.btn_nav:visited
{
float: left; /* DELETE */
border-right: 1px solid #ffffff;
font: 14px Arial,Helvetica,Garuda,sans-serif;
color: #ffffff;
text-decoration: none;
padding: 0px 20px;
margin: 0px;
}
a.btn_nav:hover
{
text-decoration: underline;
padding: 0px 20px;
margin: 0px;
}

stop using tables, and do NOT use divs instead of an unordered list. for the love of god

[fear2670]

Originally Posted by fasterthanlight

stop using tables, and do NOT use divs instead of an unordered list. for the love of god

It's not valid anyways, <div><li></li></div> is an error since it need to be wrapped in either <ul>, <ol>, <dir>, or <menu>

[erik.ritetek]

ul.nav,
ul.nav li,
ul.nav li a {
     display: block;
     position: relative;
     float: left;
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
     color: black;
     font-size: 1em;
}

ul.nav {
     width: 100%;
     height: 4em;
}

ul.nav li a {
     padding: 0 1.5em;
     color: white;
     font: normal 1.4em/4em Helvetica, Arial, sans-serif;
     border-right: 1px solid white;
}

ul.nav li a:hover {
     text-decoration: underline;
}

I doubt you've got a mass reset but try that out. This will also expand should your use decide to zoom text-size only... but of course its in a table to never mind

[siddesigner]

Add this code
.nav li{ float:left;}