[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 

[Wolfie]

Ale to sie robi tak jak Ty napisales ?

mam na mysli te komentarze html w ktorych znajduje sie instrukcja if....

[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

[Wolfie]

Zrobilem tak jak mowiliscie i.... z pozoru dziala, ale jednak nie do konca


Wejdzie sobie tutaj oczywiscie przy uzyciu ie, gdy odpali sie menu kliknijcie na projektu, nastepnie 'kontakt' i znowu projekty.....

po drugim kliknieciu na 'projekty' zauwazycie ze sub-menu zachowuje sie tak jak by korzystalo ze styli dla ff i opery a nie ze styli dla ie....

Czyli tak jakby raz korzystalo ze styli dla ie a raz ze styli dla ff i opery.....czyli raz jest ustawione poprawnie a raz przesuniete......

Ten post edytował Wolfie 27.09.2009, 18:28:44