Problema strano di allineamento su IE7

[sharx]

Problema strano di allineamento su IE7

Salve sto sviluppando un sito ed ho notato uno strano allineamento in IE7
in particolare il menu che si sviluppa orizzontalmente effettua il float correttament in Firefox...mentre in IE effettua si il float ma la voce si sposta in basso rispetto a quella precedente
per avere u n idea si guardi il link seguente con IE7

sharkcreations.it/carmine/index.php

di seguito il codice HTML

<div id="navigation-block">
 
 
            <ul id="sliding-navigation">
             
 
                <li class='sliding-element'><a href='fashion/'>FASHION</a></li>
                <li class='sliding-element'><a href='weddings/'>WEDDING</a></li>
                <li class='sliding-element'><a href='advertising/'>ADVERTISING</a></li>
                <li class='sliding-element'><a href='video/'>VIDEO</a></li>
                <li class='sliding-element'><a href='contacts/'>CONTACTS</a></li>
                <li class='sliding-element'><a href='blog/'>BLOG</a></li>
            </ul>
        </div>    
 
</div>
</code>

```ed il CSS

body
{
margin: 0;
padding: 0;
background: #ffffff;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}

h2
{
color: #999;
margin-bottom: 0;
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}

h2 span
{
display: none;
}

p
{
color: #C0C0C0;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}

#logo{
position:absolute;
bottom:0px;
left:0px;
z-index:11;
background:url("../images/bg.png") repeat-x;
height:63px;
width:380px;
float:left;
}

#contacts{
position:absolute;
bottom:300px;
left:20px;
z-index:11;
background-color:#000;
height:300px;
width:300px;
float:left;
opacity:0.9;
color:#FFF;
}

#social {
    width:100%;
    color:#FFF;
    margin-top:10px;
    height:40px;

    }    

    ul{
        display:inline;
        width:100%;
        height:40px
        }

        ul li{
            float:left;
            margin:5px 10px;
            }

#navigation-block {
position:absolute;
bottom:0px;
left:381px;
z-index:12;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:url("../images/bg.png") repeat-x scroll 0 0;
height:56px;
width:100%;
padding:7px 0 0 7px;

}

.infiniteCarousel {
position:absolute;
bottom:64px;
left:0px;
z-index:12;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:url("../images/bg.png") repeat-x scroll 0 0;
height:56px;
width:100%;
padding:7px 0 0 7px;

}

#hide {
position:absolute;
top:30px;
left:-190px;
}

ul#sliding-navigation
{
list-style: none;
font-size: .85em;
margin: 30px 0;
padding: 0;
display:inline;
}

ul.wrapper
{
list-style: none;
font-size: .85em;
margin: 30px 0;
padding: 0;
display:inline;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a,
ul#sliding-navigation li.sliding-element img
{
padding: 5px 18px;
margin:10px 30px 5px 0px;
float:left;
}

ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333 url(heading_bg.jpg) repeat-y;
font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
color:;

text-decoration: none;

}

ul#sliding-navigation li.sliding-element a:hover { color:; }

ul.wrapper li.sliding-element h3,
ul.wrapper li.sliding-element a,
ul.wrapper li.sliding-element img
{
padding: 5px 18px;
margin:10px 30px 5px 0px;
float:left;
}

ul.wrapper li.sliding-element h3
{
color:;
background:#333 url(heading_bg.jpg) repeat-y;
font-weight: normal;
}

ul.wrapper li.sliding-element a
{
color:;

text-decoration: none;

}

ul.wrapper li.sliding-element a:hover { color:; }

Vi ringrazio anticipatamente

gg

[karedas]

Ciao sharx e benvenuto nel forum gt,

Allora prova a dare questi parametri aggiuntivi nel css:

ul#sliding-navigation {
display:inline;
float:left;
font-size:0.85em;
list-style:none;
padding:0;
width:100%;



ul#slidigin-navigation li{
float:left;
}

Importante sono i due float nei due elementi. Elimina anche il "margin-top:30px" da sliding-navigation e aggiungi un width:100%;

Facci sapere se è cambiato qualcosa ciao!

[sharx]

Grazie millle,
funziona perfettamente ora proprio come volevo

Ciao