[css][html] Dziwne przesuniecie w ie7 Opcje

[Wolfie]

Witam,

Mam takie menu :

[HTML] pobierz, plaintext 
<div id="testmenu">    
        <div id="sub-link-bar"></div>
        <div id="wrap">
            <div id="main-handle">
                <ul id="main-nav">
                    <li><a class="main-link" href="aktualnosci.php" title="Aktualnosci">Aktualnosci</a>    </li>
                    <li><a class="main-link" href="#">Projekty</a>
                        <ul class="sub-links">
                            <li><a href="architektura.php" title="Architektura">Architektura</a> </li>
                            <li><a href="wnetrza.php" title="Wnetrza">Wnetrza</a> </li>
                            <li><a href="design.php" title="Design">Design</a> </li>
                            <li><a href="inne.php" title="Inne">Inne</a> </li>
                        </ul>
                    </li>
                    <li><a class="main-link" href="publikacje.php" title="Publikacje">Publikacje</a></li>
                    <li><a class="main-link" href="zespol.php" title="Zespol">Zespół</a></li>
                    <li><a class="main-link" href="kontakt.php" title="Kontakt">Kontakt</a>    </li>
                </ul>
            <!-- End roundfg --> 
            </div>
          <!-- End main-handle-->
        </div>
</div>
[HTML] pobierz, plaintext 

Na poczatku ul z klasa 'sub-links' nie sa widoczne, dopiero po kliknieciu na 'projekty' pojawiaja sie ladujac sie do diva o id="sub-link-bar"

Problem polega na tym, ze w ie7 div o id="sub-links-bar" jest przesuniety w prawo o jakies 30px, zas w ff i operze wszystko ladnie sie uklada,
oto css do tego menu :

[CSS] pobierz, plaintext 
#main-nav {
    margin: 0px 0px 0px 0px;
    min-height: 0px;
    padding-top: 0px;
    padding-left: 0px;
    text-align: left;
}
#main-handle {
    width: 500px;
    float: left;
    margin-top: -1px;
}
#main-nav li {
    display: inline;
    list-style: none;
}
#main-nav li a {
    margin-right: 5px;
    font-size: 13px;
    text-decoration: none;
    color: gray;
    font-family: century gothic, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 0 0px;
    outline: 0;
    position: relative;
    top: 0px;
}
#main-nav li a:hover {
    background: white;
    color:black;
}
 
#main-nav li a.active {
    background: white;
    color:black;
}
 
#sub-link-bar {
    background: white;
    min-height: 10px;
}
.sub-links {
    display: none;
    position: absolute;
    width: 320px;
    top: -20px;
    text-align: right;
    left: 0px;
}
#main-nav li .sub-links li a:hover{
    background: white;
}
[CSS] pobierz, plaintext 

jak widzimy tutaj :

[CSS] pobierz, plaintext 
.sub-links {
     display: none;
     position: absolute;
     width: 320px;
     top: -20px;
     text-align: right;
     left: 0px;
 }
[CSS] pobierz, plaintext 

mam ustawiony left:0px, jak to usune to wogole w ie7 caly div o id='sub-link-bar' jest przesuniety w prawo o jakies 200-300px w stosunku to tego co dzieje sie w ff i operze....

Ten post edytował Wolfie 21.09.2009, 11:24:13

[wiewiorek]

IE6 i IE7 są do siebie bardzo podobne, prawdziwą rewolucją jest dopiero IE8, będziesz musiał pewnie zrobić coś takiego:

[HTML] pobierz, plaintext 
<!--[if IE 7]>
      <link rel="stylesheet" type="text/css" href="style/style_ie_7_main.css" />
<![endif]--> 
[HTML] pobierz, plaintext 

czyli specjalnie dla IE7 zrobić plik ze stylami, a w nim nadpisać którąś z klas odpowiadającą za umiejscowienie tego elementu i dać te -30px, np. tak:

[HTML] pobierz, plaintext 
.klasa
{
	padding-left: -30px;
}
[HTML] pobierz, plaintext