A
-anja-
Mitglied
Thread Starter
- Dabei seit
- 04.07.2007
- Beiträge
- 71
- Reaktionspunkte
- 0
Hallo!
Ich habe ein Problem mit meiner Website.
Und zwar habe ich ein horizontales Menü erstellt, die Schaltflächen sind Bilder (weil es die Schrift zu selten gibt) und alles ist Pixelgenau berechnet.. (1px abstand zwischen den Bildern).
Nun, im Safari und im Camino klappt's wunderbar, nur der Internetexplorer streikt.
Ich weiss, dass es einen Bug bei senkrechten Listen gibt, der einen Abstand macht zwischen den einzelnen li - aber bei waagerechten?
Dadurch passt das Design nicht mehr und das ganze Menü verrutscht an eine unmögliche Stelle! Ich muss diesen Abstand da raus kriegen..
Stelle aus dem HTML-Code:
<div id="menu1">
<ul>
<li><a href="unternehmen.html" class="no"><img src="pics/menu1/unternehmen.gif" width="94px" height="25px" alt="Unternehmen" /></a></li>
<li><a href="service.html"><img src="pics/menu1/service.gif" width="94px" height="25px" alt="Service" /></a></li>
<li><a href="technik.html"><img src="pics/menu1/technik.gif" width="94px" height="25px" alt="Technik" /></a></li>
<li><a href="produkte.html"><img src="pics/menu1/produkte.gif" width="94px" height="25px" alt="Produkte" /></a></li>
<li><a href="veredelung.html" id="ak1"><img src="pics/menu1/veredelung.gif" width="94px" height="25px" alt="Veredelung" /></a></li>
<li><a href="galerie.html"><img src="pics/menu1/galerie.gif" width="94px" height="25px" alt="Galerie" /></a></li>
</ul>
</div>
CSS:
#menu1 {
margin: 0;
width: 570px;
height: 25px;
background: #ccc;
display: block;
}
#menu1 img {
border: 0;
}
#menu1 ul {
}
#menu1 li {
float: left;
list-style-type: none;
display: inline;
}
#menu1 a {
display: block;
background: url(../pics/menu1/bg.gif) no-repeat;
border-left: 1px solid #fff;
}
#menu1 a:hover,
#menu1 a:focus,
#menu1 a:active {
background: url(../pics/menu1/bg_over.gif) no-repeat;
}
#menu1 #ak1 {
background: url(../pics/menu1/bg_over.gif) no-repeat;
}
#menu1 .no {
border: 0;
}
Wär echt super, wenn mir jemand helfen könnte, ich komm nicht weiter...
Achja, so soll's aussehen (Ausschnitt):
http://img152.imageshack.us/img152/2730/richtigbk7.jpg
und so sieht's im IE aus..
http://img254.imageshack.us/my.php?image=falschon7.jpg
Also, wie:
- Krieg ich das Menü richtig hin?
- bekomm ich die Abstände oben links und rechts an den grauen Kästchen weg? (Das sind auch Bilder)
Liebe Grüße!
Ich habe ein Problem mit meiner Website.
Und zwar habe ich ein horizontales Menü erstellt, die Schaltflächen sind Bilder (weil es die Schrift zu selten gibt) und alles ist Pixelgenau berechnet.. (1px abstand zwischen den Bildern).
Nun, im Safari und im Camino klappt's wunderbar, nur der Internetexplorer streikt.
Ich weiss, dass es einen Bug bei senkrechten Listen gibt, der einen Abstand macht zwischen den einzelnen li - aber bei waagerechten?
Dadurch passt das Design nicht mehr und das ganze Menü verrutscht an eine unmögliche Stelle! Ich muss diesen Abstand da raus kriegen..
Stelle aus dem HTML-Code:
<div id="menu1">
<ul>
<li><a href="unternehmen.html" class="no"><img src="pics/menu1/unternehmen.gif" width="94px" height="25px" alt="Unternehmen" /></a></li>
<li><a href="service.html"><img src="pics/menu1/service.gif" width="94px" height="25px" alt="Service" /></a></li>
<li><a href="technik.html"><img src="pics/menu1/technik.gif" width="94px" height="25px" alt="Technik" /></a></li>
<li><a href="produkte.html"><img src="pics/menu1/produkte.gif" width="94px" height="25px" alt="Produkte" /></a></li>
<li><a href="veredelung.html" id="ak1"><img src="pics/menu1/veredelung.gif" width="94px" height="25px" alt="Veredelung" /></a></li>
<li><a href="galerie.html"><img src="pics/menu1/galerie.gif" width="94px" height="25px" alt="Galerie" /></a></li>
</ul>
</div>
CSS:
#menu1 {
margin: 0;
width: 570px;
height: 25px;
background: #ccc;
display: block;
}
#menu1 img {
border: 0;
}
#menu1 ul {
}
#menu1 li {
float: left;
list-style-type: none;
display: inline;
}
#menu1 a {
display: block;
background: url(../pics/menu1/bg.gif) no-repeat;
border-left: 1px solid #fff;
}
#menu1 a:hover,
#menu1 a:focus,
#menu1 a:active {
background: url(../pics/menu1/bg_over.gif) no-repeat;
}
#menu1 #ak1 {
background: url(../pics/menu1/bg_over.gif) no-repeat;
}
#menu1 .no {
border: 0;
}
Wär echt super, wenn mir jemand helfen könnte, ich komm nicht weiter...
Achja, so soll's aussehen (Ausschnitt):
http://img152.imageshack.us/img152/2730/richtigbk7.jpg
und so sieht's im IE aus..
http://img254.imageshack.us/my.php?image=falschon7.jpg
Also, wie:
- Krieg ich das Menü richtig hin?
- bekomm ich die Abstände oben links und rechts an den grauen Kästchen weg? (Das sind auch Bilder)
Liebe Grüße!
Zuletzt bearbeitet: