Floated list troubles with IE7

HTML & CSS
1

Hello,
I’m new to this forum and I’m trying to improve my CSS skills, therefore please be kind if I’m a bit slow in getting your answers…
:wink:

Here’s the problem:
My navigation is set up in a list, but in IE7 instead of being in a straight row the navigation looks like a set of steps, each item is slightly lower than the previous.

It is the same problem posted here: http://www.sitepoint.com/forums/showthread.php?734045-IE7-Floated-List-problem

but the thread was closed and the given solutions didn’t work out for me…where am I wrong?

You can find the original code and CSS (I mean before I tried to apply post solutions) at www.faqtotum.eu/prova/bio.html

Thank you very much

Matteo

2

ok…sorry to bother you, but there’s another problem…same page, you can find it here:

www.faqtotum.eu/prova/index_2.html

I followed SgtLegend suggestion for all the three navigation bars (one in the header and two in the footer).
If you open the page with Firefox everything works just perfectly!
But know…some cross-browser disaster:

  • in Chrome the navigation bars work perfect…only point, the absolute top positioning of the div nav_container in the header turns out to be “not absolute” going far more down than expected. Same situation in Safari.
  • in IE7 is the left nav_bar of the footer that drives me crazy:
    1 - the absolute positioning of the div container using “left” does not work. the two images are shown below the right nav_bar.
    2 - I tried to use the command “right” to set the positioning (just to try, I want to use the left to have a footer width of 100% and have the two navbars at the two ends with no concerns about browser’s width) and it worked…but in any case the rollover effect does not.
    The code is exactly the same, but the rollover works just on the other two navbars…

…any idea???

Thank you

Matteo
If you open it with IE7…it’s a mess…

3

Hello everybody,
I figured out a workaround using a div container with absolute position to place the navigation bar and a separate div with absolute position for every button.
Now the HTML code looks like:
<div id=“nav”>
<div id=“nav_home”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_servizi”><a href=“http://www.faqtotum.eu” class=“selected” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_portfolio”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_bio”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_contatti”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
</div>

with its CSS:
#nav {
position:absolute;
width:600px;
right:20px;
top:176px;
height:25px;
margin:0;
padding:0;
}

#nav_home {
position:absolute;
top:176;
right:480px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_home a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/home.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_home a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_home a.selected {
background-position: bottom right;
border:0px;
}

#nav_servizi {
position:absolute;
top:176;
right:360px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_servizi a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/servizi.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_servizi a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_servizi a.selected {
background-position: bottom right;
border:0px;
}

#nav_portfolio {
position:absolute;
top:176;
right:240px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_portfolio a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/portfolio.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_portfolio a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_portfolio a.selected {
background-position: bottom right;
border:0px;
}

#nav_bio {
position:absolute;
top:176;
right:120px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_bio a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/bio.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_bio a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_bio a.selected {
background-position: bottom right;
border:0px;
}

#nav_contatti {
position:absolute;
top:176;
right:0px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_contatti a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/contatti.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_contatti a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}

#nav_contatti a.selected {
background-position: bottom right;
border:0px;
}

I found it a bit redundant, but I’ve not been able to find out a different solution.

Thnx

Matteo

4

You may need to adjust the #nav positioning using a relative position instead of an absolute position so it sits properly.

HTML

<ul id="nav">
    <li id="nav_home"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
    <li id="nav_servizi"><a href="http://www.faqtotum.eu" class="selected" title="Pagina principale per creare un sito internet artigianale"></a></li>
    <li id="nav_portfolio"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
    <li id="nav_bio"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
    <li id="nav_contatti"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
</ul>

CSS

#nav {
    float: right;
    height: 25px;
    margin: 0;
    padding: 0;
}

#nav li { float: left; }

#nav li a {
    display: block;
    height: 25px;
    width: 120px;
}

#nav_home a      { background-image: url('immagini/home.gif'); }
#nav_servizi a   { background-image: url('immagini/servizi.gif'); }
#nav_portfolio a { background-image: url('immagini/portfolio.gif'); }
#nav_bio a       { background-image: url('immagini/bio.gif'); }
#nav_contatti a  { background-image: url('immagini/contatti.gif'); }

#nav li a:hover,
#nav li a.selected {
    background-position: left bottom;
}
5

Thank you SgtLegend, very nice solution!
Unfortunately, as you can see on the webpage, I have to put the navigation list inside the header <div> and below the logo <div>…so I think relative position is not the right way…or at least I don’t see how to let it work…if I leave the command float:right; I’m only able to have the list on the upper right corner of the page, that is not my will…

6

ok, I didn’t pay too much attention…I’ve used the same solution, putting SgtLegend suggestion inside a absolute-positioned div nav_container…it works!

Thnx