[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

[Robert1985]

Tak robi się to właśnie tak jak kolega napisał przy czym ważna jest kolejność najpierw musi być domyślny arkusz ,a dopiero po nim te ,które przeznaczone są dla IE na przykład:

[HTML] pobierz, plaintext 
  <link rel="stylesheet" href="styl.css" type="text/css" />
<!--[if  IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]--> 
[HTML] pobierz, plaintext 

Tu masz link ze wszystkimi komentarzami jakich można używać powodzenia!. http://virtuelvis.com/archives/2004/02/css-ie-only