nicht angemeldet
IE macht Zicken beim Menü
Servus,
wie im Titel schon beschrieben, habe ich Probleme mit dem IE.
Ich habe eine Webseite, wo auf der linken Seite ein Menü zu sehen ist.
Dieses Menü kann beim Rollover ausgeklappt werden.
Das Menü habe ich im I-Net gefunden, es basiert rein auf CSS, nur für den IE (wofür auch sonst) braucht man eine kleine JS-Datei.
Das Menü besteht aus einzelnen Textlinks (stehen in einer <ul>), die durch ein <hr> grafisch voneinander getrennt werden. Beim Rollover werden die Links farbig hinterlegt.
Natürlich soll dann diese farbige Hinterlegung bei der Linie abschließen.
Der Firefox stellt es perfekt dar, aber beim IE ist zwischen Link und Linie immer ein Abstand, den ich einfach nicht wegbekomme!!
Hab das Padding und das Margin in der CSS-Datei überall auf 0px gesetzt, lediglich beim Link steht das Padding auf 4px, damit die farbige Hinterlegung umfassend genug ist.
Hat jemand eine Idee, wie ich diesem zickigen IE beibringen kann, dass zwischen Link und Linie kein Abstand sein soll?
Vielen Dank schonmal im Voraus!
-
Hi Nadja,
Ich habe eine Webseite, wo auf der linken Seite ein Menü zu sehen ist.
bitte poste doch einen Link zu dieser Seite, damit man sich das mal anschauen kann!
Wie man einen Link postet, steht in den FAQ (Q-19).
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
bitte poste doch einen Link zu dieser Seite, damit man sich das mal anschauen kann!
Die Seite bzw. URL kann ich nicht posten, weil die noch nicht online ist.
Aber ich hänge mal etwas Queltext an.HTML-Seite:
--------------------------------
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>CoiX GmbH</title>
<link rel="stylesheet" type="text/css" href="dropdownmenu.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head><script type="text/javascript" src="css_dropdown.js"></script>
<body onload="enable_menues_for_ie();" bgcolor="#8E8D8D">
<br />
<div align="center"><table border="1" width="750px" height="500px" cellpadding="0px" cellspacing="0px">
<tr>
<td colspan="4" bgcolor="#FFFFFF" height="10px"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" rowspan="3" width="4px"></td>
<td bgcolor="#FFFFFF" align="center" valign="center">
<a href="start.html" target="Fenster">
<img src="test.gif" border="0">
</a>
</td>
<td bgcolor="#C0001F" class="header" style="color:#FFFFFF;" align="center" valign="center">
</td>
<td bgcolor="#FFFFFF" rowspan="3" width="4px"></td>
</tr>
<tr height="50px">
<td bgcolor="#D34C62"></td>
<td align="left" valign="top" bgcolor="#F2F2F2">
<img src="bild1.jpg"><img src="bild2.jpg"><img src="bild3.jpg"><img src="bild4.jpg"><img src="bild1.jpg">
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#D34C62">
<ul id="nav" class="dropdown">
<li><a href="unternehmen.html" target="Fenster" class="has_submenu">Unternehmen</a>
<ul>
<li><a href="unternehmen.html" target="Fenster">Was leisten wir?</a><hr class="unter" /></li>
<li><a href="unternehmen.html" target="Fenster">Wie arbeiten wir?</a><hr class="unter" /></li>
<li><a href="unternehmen.html" target="Fenster">Mitarbeiter / Trainer</a></li>
</ul>
</li>
<li><hr class="haupt" /></li>
<li><a href="referenzen.html" target="Fenster" class="has_submenu">Referenzen</a>
<ul>
<li><a href="referenzen.html" target="Fenster">Referenz 1</a><hr class="unter" /></li>
<li><a href="referenzen.html" target="Fenster">Referenz 2</a><hr class="unter" /></li>
<li><a href="referenzen.html" target="Fenster">...</a></li>
</ul>
</li>
<li><hr class="haupt" /></li>
<li><a href="kontakt.html" target="Fenster" class="has_submenu">Kontakt</a>
<ul>
<li><a href="kontakt.html" target="Fenster">So erreichen Sie uns</a><hr class="unter" /></li>
<li><a href="kontakt.html" target="Fenster">Ansprechpartner</a><hr class="unter" /></li>
<li><a href="kontakt.html" target="Fenster">Anfahrtsskizze</a>
</ul>
</li>
</ul>
</td><td bgcolor="#F2F2F2" align="right" valign="top">
<br />
<iframe src="start.html" name="Fenster" width="450" height="300" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF" height="10px"></td>
</tr>
</table>
</div>
</body>
</html>
---------------------------------Und hier die CSS-Geschichte:
/* -------------------------- BEGIN do not change --------------------------- */
ul.dropdown
{
list-style: none;
margin:0;
padding:0;
width:100%;
}ul.dropdown ul
{
list-style: none;
margin:0;
padding: 0;
width:100%;
}ul.dropdown li
{
position: relative;
padding:1px 0px 1px 0px; /* helps Opera with hover - do not remove! */
}ul.dropdown a
{
display:block;
}ul.dropdown ul, ul.dropdown ul ul, ul.dropdown ul ul ul
{
display:none;
position:absolute;
top:0;
left:99%;
}ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul
{
display:none;
}ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
display:block;
}/* -------------------------- END do not change --------------------------- */
#nav
{
font:10px verdana;
background-color:#D34C62;
width: 100%;
margin:0;
padding:0;
}#nav a
{
color:#FFFFFF;
padding:4px;
text-decoration:none;
width: 94%;
}#nav a:hover
{
background-color:#CD354E;
color:#FFFFFF;
}#nav ul
{
background-color:#D96D7F;
}hr.haupt
{
color:#D96D7F;
background-color:#D96D7F;
height:0.2px;
width:99%;
border:0.2px solid;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}hr.unter
{
color:#DC94A0;
background-color:#D96D7F;
height:0.2px;
width:99%;
border:0.2px solid;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}--------------------------
Sorry für den langen Quelltext *schäm*
-
Hi Nadja,
ich glaube, Du hast die Möglichkeiten von CSS noch nicht ganz begriffen!
_Alles_ optische machst Du mit CSS, alles inhaltliche mit HTML. Das bedeutet, dass wenn Du eine Trennlinie haben willst, dass Du das NICHT mit HTML, sondern rein per CSS gestaltest.
Damit verwendest Du hier kein <hr> in Deiner Liste, sondern Du definierst bei Deinen <li>-Elementen einen weißen Rahmen, der nur unten sein soll (Stichwort: "border-bottom"). Dann kann auch der IE mit solchen Dingen wie
<li><a href="unternehmen.html" target="Fenster">Was leisten wir?</a><hr class="unter" /></li>
kein Schindluder mehr treiben.
Und wenn Du schon CSS einsetzt, warum tust Du das dann nicht gleich konsequent?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
ich glaube, Du hast die Möglichkeiten von CSS noch nicht ganz begriffen!
Das glaube ich auch :(
Damit verwendest Du hier kein <hr> in Deiner Liste, sondern Du definierst bei Deinen <li>-Elementen einen weißen Rahmen, der nur unten sein soll (Stichwort: "border-bottom"). Dann kann auch der IE mit solchen Dingen wie
<li><a href="unternehmen.html" target="Fenster">Was leisten wir?</a><hr class="unter" /></li>
kein Schindluder mehr treiben.Super, vielen Dank! Werd es gleich mal ausprobieren!!
Und wenn Du schon CSS einsetzt, warum tust Du das dann nicht gleich konsequent?
Danke für den Link! Werde mir das in Ruhe durchlesen!
CSS ist für mich noch soooo umfangreich, dass ich nur einen winzig kleinen Teil davon verstanden habe *schäm*Ganz liebe Grüße,
Nadja-
Hab das mit border-bottom mal eingesetzt, klappt wunderbar :)
Aber in meinem Untermenü krieg ich diese Linien einfach nicht hin.
Kannst du evtl. anhand der CSS-Datei sagen, wo das in dem Fall hin müsste?
Hier die aktuelle CSS-Datei:
------------------------
/* -------------------------- BEGIN do not change --------------------------- */ul.dropdown
{
list-style: none;
margin:0;
padding:0;
width:100%;
}ul.dropdown ul
{
list-style: none;
margin:0;
padding: 0;
width:100%;
}ul.dropdown li
{
position: relative;
padding:1px 0px 1px 0px; /* helps Opera with hover - do not remove! */
}ul.dropdown a
{
display:block;
}ul.dropdown ul, ul.dropdown ul ul, ul.dropdown ul ul ul
{
display:none;
position:absolute;
top:0;
left:99%;
}ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul
{
display:none;
}ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
display:block;
}/* -------------------------- END do not change --------------------------- */
#nav
{
font:10px verdana;
background-color:#D34C62;
width: 100%;
margin:0;
padding:0;
}#nav a
{
color:#FFFFFF;
padding:4px;
text-decoration:none;
width: 94%;
border-bottom:1px solid #D96D7F;
padding-bottom:4px;
margin:0px;
}#nav a:hover
{
background-color:#CD354E;
color:#FFFFFF;
border-bottom:1px solid #D96D7F;
padding-bottom:4px;
margin:0px;
}#nav ul
{
background-color:#D96D7F;
}-
Hat sich erledigt, hab's gefunden :)
-
-
-
-
-