IE 6 macht probleme bei ausgerichteten verlinkten Grafiken.

[Miles]

Hallo, ich habe ein darstellungsproblem mit dem Internet Explorer 6. Auf meiner Website habe ich ein paar Navigationbuttons verlinkt und mit CSS die Ausrichtung getätigt. Alle Browser stellen es korrekt dar, nur der Internet Explorer 6 stellt die Buttons mit einem 2px unteren innenabstand dar (geschätzt).

Da die Buttons aber nicht richtig platziert waren, habe ich Padding-top benutzt um sie weiter in die Mitte der hintergrundgrafik zu bringen. Der IE6 zerreißt dabei die Hintergrundgrafik und stellt einen außenabstand dar.

Ich habe eigentlich schon so gut wie alles probiert:

vspace, align, valign, cellpadding, padding, margin,......etc.

Egal was ich mache, der IE zerreißt das Hintergrundbild und stellt die Buttons zu weit oben dar. Lasse ich Padding aus dem Spiel, passiert es nicht, aber die Buttons sind nicht mittig, sondern zu weit oben. Hier die Codes:

----------------HTML-------------------------

<table border="0" cellspacing="0" cellpadding="0" width="995" align="center" style="height: 38px"><tbody><tr><td id="topmenu_left">&nbsp;</td><td id="topmenu_out" style="padding: 3px 0px 0px 8px; width: 941px"><a href="http://website.de/index.php"><img src="http://website.de/images/topbutton01.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv01.gif';" onmouseout="this.src='http://website.de/images/topbutton01.gif';" border="0" alt=" " title="Startseite" width="85" height="33" /></a><a href="http://website.de/index.php?option=com_content&amp;task=view&amp;id=12&amp;Itemid="><img src="http://website.de/images/topbutton03.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv03.gif';" onmouseout="this.src='http://website.de/images/topbutton03.gif';" border="0" alt=" " title="Sonic" width="156" height="33" /></a><a href="http://www.website.de/forum/index.php"><img src="http://website.de/images/topbutton04.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv04.gif';" onmouseout="this.src='http://website.de/images/topbutton04.gif';" border="0" alt=" " title="Forum" width="59" height="33" /></a><a href="http://website.de/index.php?option=com_ponygallery&amp;Itemid=841"><img src="http://website.de/images/topbutton07.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv07.gif';" onmouseout="this.src='http://website.de/images/topbutton07.gif';" border="0" alt=" " title="Galerie" width="69" height="33" /></a><a href="http://website.de/index.php?option=com_seyret&amp;Itemid=955"><img src="http://website.de/images/topbutton09.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv09.gif';" onmouseout="this.src='http://website.de/images/topbutton09.gif';" border="0" alt=" " title="SpinTV" width="66" height="33" /></a><a href="http://website.de/index.php?option=com_docman&amp;Itemid=957"><img src="http://website.de/images/topbutton10.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv10.gif';" onmouseout="this.src='http://website.de/images/topbutton10.gif';" border="0" alt=" " title="Downloads" width="93" height="33" /></a><a href="http://website.de/index.php?option=com_weblinks&amp;Itemid=23"><img src="http://website.de/images/topbutton08.gif" onmouseover="this.src='http://website.de/images/topbuttonaktiv08.gif';" onmouseout="this.src='http://website.de/images/topbutton08.gif';" border="0" alt=" " title="Links" width="57" height="33" /></a> </td><td id="topmenu_right">&nbsp;</td></tr></tbody></table>

----------------HTML-------------------------

----------------CSS-------------------------

/* ***** TOP Navigation ***** */
#topmenu_out {
 background-image: url(templates/sunshine/images/topmenu_bg.gif);
        background-position: center;
 background-repeat: repeat-x;
}
#topmenu_left {
 background-image: url(forum/templates/blu_blur/images/misc/topmenu_left3.gif);
 background-repeat: no-repeat;
        background-position: left;
}
#topmenu_right {
 background-image:    url(forum/templates/blu_blur/images/misc/topmenu_right3.gif);
 background-repeat: no-repeat;
 background-position: right;
}

----------------CSS-------------------------

[suit]

dein code ist spaghetticode - den kann kein mensch lesen (das erschwert die fehlersuche)

weiters verwendest du javascript für deine rollovers obwohls mit html/css weitestgehend barrierefrei wunderbar geht:
http://www.wellstyled.com/css-nopreload-rollovers.html

dein menu möchte übrigens eine liste sein, tabellen sind für navigationen (egal welche ausreden und argumente du hast) ungeeignet

[Miles]

Ich habe nun html mousover benutzt und der IE fehler ist beseitigt, leider weiß ich jetzt gar nicht, wie ich die Link-Grafiken nebeneinander bekomme, bei mir sind sie komischerweise immer übereinander.

------------------HTML---------------------

<td id="topmenu_out" style="width: 941px">

<a class="menu" href="http://Website.de/index.php">Startseite</a>
<a class="menu" href="http://Website.de/index.php">Startseite</a>
<a class="menu" href="http://Website.de/index.php">Startseite</a>
<a class="menu" href="http://Website.de/index.php">Startseite</a>
<a class="menu" href="http://Website.de/index.php">Startseite</a>
<a class="menu" href="http://Website.de/index.php">Startseite</a>

</td>

------------------HTML---------------------

[suit]

Ich habe nun html mousover benutzt und der IE fehler ist beseitigt, leider weiß ich jetzt gar nicht, wie ich die Link-Grafiken nebeneinander bekomme, bei mir sind sie komischerweise immer übereinander.

dein html WILL so aussehen:

<ul id="menu">
  <li><a href="http://example.com/">Link</a></li>
  <li><a href="http://example.com/">Link</a></li>
  <li><a href="http://example.com/">Link</a></li>
  <li><a href="http://example.com/">Link</a></li>
</ul>

wenn dieser wunsch erfüllt ist, wird sich dein menu auch dazu überreden lassen mittels z.B. #menu li { display: inline; } nebeneinander darzustellen

im übrigen solltest du für beispiele die domain http://example.com verwenden
http://www.rfc-editor.org/rfc/rfc2606.txt

[Miles]

Ok danke für den Tipp. Leider zerupt er mir aber dann wieder die Hintergrundgrafik und auch beachtet er die restlichen CSS Definitionen nicht mehr und die Links werden wieder ohne Grafik angezeigt.

[suit]

Ok danke für den Tipp. Leider zerupt er mir aber dann wieder die Hintergrundgrafik und auch beachtet er die restlichen CSS Definitionen nicht mehr und die Links werden wieder ohne Grafik angezeigt.

dann musst du diese entsprechend anpassen, aber der html-teil ist so brauchbarer ;) - ich ging davon aus, dass du diese anpassen wirst, da diese ja auf deinen alten code zugeschnitten sind

[Miles]

Ich hab nun die ganzen Tabellen entfernt und alles mit Div gemacht und siehe da: es funzt, auch im IE6.