ugrás a tartalomhoz

CSS menü IE gond

Anonymous · 2005. Aug. 4. (Cs), 16.12
Sziasztok!

Adott az alábbi szerkezetű menü:
HTML:
  1. <div class="container">  
  2. <div>  
  3. <ul class="navbar">  
  4.          <li><a href="#" class="nav">Főoldal</a></li>  
  5.          <li><a href="#" class="nav">Cégünkről</a></li>  
  6.          <li><a href="#" class="nav">Árlista</a></li>  
  7.          <li><a href="#" class="nav">Partnerek</a></li>  
  8.          <li><a href="#" class="nav">Kapcsolat</a></li>  
  9. </ul>  
  10. </div>  
  11. </div>  
CSS:
  1. .container {  
  2. background-color:#FFFFFF;  
  3. margin:0 auto 0 auto;  
  4. padding:0;  
  5. width:650px;  
  6. border:1px solid #7EAA21;}  
  7.   
  8. ul.navbar {  
  9. list-style-type:none;  
  10. float:left;  
  11. display:block;  
  12. width:100%;  
  13. line-height:10px;  
  14. clear:both;  
  15. margin:0;  
  16. padding:0;  
  17. background:#7EAA21}  
  18.   
  19. ul.navbar li {  
  20. display:inline;}  
  21.   
  22. a.nav:link, a.nav:visited {  
  23. display:block;  
  24. float:left;  
  25. width:20%;  
  26. padding:1.1em 0 1.1em 0;  
  27. margin:0;  
  28. text-decoration:none;  
  29. background:#7EAA21;  
  30. color:#FFFFFF;  
  31. border-bottom5px solid #FFFFFF;}  
  32.   
  33. a.nav:hover {  
  34. display:block;  
  35. float:left;  
  36. width:20%;  
  37. padding:1.1em 0 1.1em 0;  
  38. margin:0;  
  39. text-decoration:none;  
  40. background-color:#7EAA21;  
  41. color:#FFFFFF;  
  42. border-bottom5px solid #EE3338;}  
WinXP alatt FF-ben, Opera-ban jól jelenik meg, azonban IE6 alatt az utolsó menüpont (Kapcsolat) már egy új sorban jelenik meg. Más böngészővel még nem teszteltem.

Mi lehet a gond?
 
1

Érdekesség

Poetro · 2005. Aug. 4. (Cs), 17.06
Reprodukáltam a dolgot, de egy ujabb probléma vetődik fel. Ahogy a linken látható IE-ben a "pcsolat" szöveg (legalábbis nálam) látható a menü alatt is. Ok ismeretlen, vszínű vmi bug. Ha kisebbre veszed a menupontok szelesseget (19.9%) akkor maris jol jelennek meg.
--------
Poetro
2

Fölösleges dolgok

Jano · 2005. Aug. 4. (Cs), 17.30
A CSS-ben van egy-két felesleges dolog. Pontosabban rossz kombináció. Egy inline elemben elvileg nem lehet block elem, és felesleges is az LI-ket inline-ná tenni ha közben a linkekeket floatolod.
Inkább floatold az LI elemeket!

Felesleges minden linknek saját class-t adni hiszen tudsz ezekre a linkekre a CSS-ben úgyis hivatkozni, hogy:
  1. .navbar a {}  
Emelett feleslegesnek tűnik az UL körüli DIV is! Hagyd el ha nincs szerepe!

Egyébként elnevezésnél ha valamiből csak 1 darab van az oldalon azt érdemes azonosítóval ellátni és inkább azzal hivatkozni rá CSS-ből és az osztály (CLASS) maradjon arra amiből több lehet.
3

Kezdem elorol

Anonymous · 2005. Aug. 5. (P), 08.50
Köszi a hozzászólásokat, azt hiszem kezdem elöről a menüt. Ha megvan a megoldás, akkor postolni fogom ide.