CSS menü IE gond
Sziasztok!
Adott az alábbi szerkezetű menü:
HTML:CSS: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?
■ Adott az alábbi szerkezetű menü:
HTML:
- <div class="container">
- <div>
- <ul class="navbar">
- <li><a href="#" class="nav">Főoldal</a></li>
- <li><a href="#" class="nav">Cégünkről</a></li>
- <li><a href="#" class="nav">Árlista</a></li>
- <li><a href="#" class="nav">Partnerek</a></li>
- <li><a href="#" class="nav">Kapcsolat</a></li>
- </ul>
- </div>
- </div>
- .container {
- background-color:#FFFFFF;
- margin:0 auto 0 auto;
- padding:0;
- width:650px;
- border:1px solid #7EAA21;}
- ul.navbar {
- list-style-type:none;
- float:left;
- display:block;
- width:100%;
- line-height:10px;
- clear:both;
- margin:0;
- padding:0;
- background:#7EAA21}
- ul.navbar li {
- display:inline;}
- a.nav:link, a.nav:visited {
- display:block;
- float:left;
- width:20%;
- padding:1.1em 0 1.1em 0;
- margin:0;
- text-decoration:none;
- background:#7EAA21;
- color:#FFFFFF;
- border-bottom: 5px solid #FFFFFF;}
- a.nav:hover {
- display:block;
- float:left;
- width:20%;
- padding:1.1em 0 1.1em 0;
- margin:0;
- text-decoration:none;
- background-color:#7EAA21;
- color:#FFFFFF;
- border-bottom: 5px solid #EE3338;}
Mi lehet a gond?
Érdekesség
--------
Poetro
Fölösleges dolgok
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:
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.
Kezdem elorol