Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][html] Dziwne przesuniecie w ie7
Forum PHP.pl > Forum > Przedszkole
Wolfie
Witam,

Mam takie menu :

  1. <div id="testmenu">
  2. <div id="sub-link-bar"></div>
  3. <div id="wrap">
  4. <div id="main-handle">
  5. <ul id="main-nav">
  6. <li><a class="main-link" href="aktualnosci.php" title="Aktualnosci">Aktualnosci</a> </li>
  7. <li><a class="main-link" href="#">Projekty</a>
  8. <ul class="sub-links">
  9. <li><a href="architektura.php" title="Architektura">Architektura</a> </li>
  10. <li><a href="wnetrza.php" title="Wnetrza">Wnetrza</a> </li>
  11. <li><a href="design.php" title="Design">Design</a> </li>
  12. <li><a href="inne.php" title="Inne">Inne</a> </li>
  13. </ul>
  14. </li>
  15. <li><a class="main-link" href="publikacje.php" title="Publikacje">Publikacje</a></li>
  16. <li><a class="main-link" href="zespol.php" title="Zespol">Zespół</a></li>
  17. <li><a class="main-link" href="kontakt.php" title="Kontakt">Kontakt</a> </li>
  18. </ul>
  19. <!-- End roundfg -->
  20. </div>
  21. <!-- End main-handle-->
  22. </div>
  23. </div>


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 :

  1. #main-nav {
  2. margin: 0px 0px 0px 0px;
  3. min-height: 0px;
  4. padding-top: 0px;
  5. padding-left: 0px;
  6. text-align: left;
  7. }
  8. #main-handle {
  9. width: 500px;
  10. float: left;
  11. margin-top: -1px;
  12. }
  13. #main-nav li {
  14. display: inline;
  15. list-style: none;
  16. }
  17. #main-nav li a {
  18. margin-right: 5px;
  19. font-size: 13px;
  20. text-decoration: none;
  21. color: gray;
  22. font-family: century gothic, Arial, Helvetica, sans-serif;
  23. text-transform: uppercase;
  24. padding: 0 0px;
  25. outline: 0;
  26. position: relative;
  27. top: 0px;
  28. }
  29. #main-nav li a:hover {
  30. background: white;
  31. color:black;
  32. }
  33.  
  34. #main-nav li a.active {
  35. background: white;
  36. color:black;
  37. }
  38.  
  39. #sub-link-bar {
  40. background: white;
  41. min-height: 10px;
  42. }
  43. .sub-links {
  44. display: none;
  45. position: absolute;
  46. width: 320px;
  47. top: -20px;
  48. text-align: right;
  49. left: 0px;
  50. }
  51. #main-nav li .sub-links li a:hover{
  52. background: white;
  53. }


jak widzimy tutaj :

  1. .sub-links {
  2. display: none;
  3. position: absolute;
  4. width: 320px;
  5. top: -20px;
  6. text-align: right;
  7. left: 0px;
  8. }


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....
wiewiorek
IE6 i IE7 są do siebie bardzo podobne, prawdziwą rewolucją jest dopiero IE8, będziesz musiał pewnie zrobić coś takiego:
  1. <!--[if IE 7]>
  2. <link rel="stylesheet" type="text/css" href="style/style_ie_7_main.css" />
  3. <![endif]-->


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:
  1. .klasa
  2. {
  3. padding-left: -30px;
  4. }
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:
  1. <link rel="stylesheet" href="styl.css" type="text/css" />
  2. <!--[if IE 6]>
  3. <link rel="stylesheet" type="text/css" href="ie6.css" />
  4. <![endif]-->
  5. <!--[if lt IE 6]>
  6. <link rel="stylesheet" type="text/css" href="ie5.css" />
  7. <![endif]-->


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......
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.