*gelöst* Horizontale Navigationsleiste macht Probleme im IE

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Codas, 24. Februar 2006 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 24. Februar 2006
    Hallo
    Habe mich in letzter Zeit mal wieder ans Designen von Websites gemacht und mittlerweile bekomme ich auch immer weniger Probleme.
    Ich scheiter jetzt jedoch an einem Problem, was für viele hier wohl eher banal sein sollte.
    Folgendes: Ich habe eine Navigationsleiste (eine Tabelle mit der Breite von 500px und der höhe von 40px).
    Jetzt will ich dort die einzelnen Links (in der Form von Grafiken, 100px breit, 40px hoch und 5 Stück an der Zahl) einbauen.
    Das erste Problem konnte ich gerade noch selber läsen. So haben diese Bilder immer wieder die Tabelle gesprengt, wenn man nicht alles in eine Zeile geschrieben hat. (klar, da dann ja ein leerzeichen zwischen den einzelnen Bildern angezeigt wird).
    Das Problem jetzt ist jedoch, dass diese Bilder im Firefox und Opera richtig dargestellt werden, der IE jedoch umbedingt wieder die Tabelle sprengen will. (die tabelle wird in vertikaler richtung vergrößert.)

    Habe schon alles mögliche probiert, bin echt mit meinem Latein am ende.

    Und hier nochmal der Quellcode:

    Code:
    <?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
<head>
<title>contest2</title>
<style type="text/css">
<!--
 body
 {
 background-color:#FFFFFF;
 font-family:Arial, Verdana, sans-serif, serif;
 font-size:10pt;
 color:#404040;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 vertical-align:top;
 }
 
 img { border:0px; padding:0px; margin:0px }
 h1 { font-size:180%; text-decoration:underline; font-weight:bold; }
 h2 { font-size:170%; text-decoration:underline; font-weight:bold; }
 h3 { font-size:150%; text-decoration:underline; font-weight:bold; }
 h4 { font-size:120%; text-decoration:underline; font-weight:bold; }
 h5 { font-size:120%; text-decoration:underline; font-weight:normal; }

 .maintable { padding:0px; min-height:700px; table-layout:auto; overflow:hidden; }
 
 .navlinks { background-image:url(images/bghack.gif); height:40px; width:500px; padding:0px; margin:0px; border:0px; vertical-align:bottom;}
 .contentL { background-image:url(images/Slice_14.gif); width:200px; height:100%; }
 .contentM { padding-left:25px; padding-right:25px; height:100%; vertical-align:top; }
 .contentR { background-image:url(images/Slice_16.gif); width:200px; height:100%; }
 
 .link1 { background-image:url(images/Slice_5.gif); height:40px; width:100px; }
 .link2 { background-image:url(images/Slice_6.gif); height:40px; width:100px; }
 .link3 { background-image:url(images/Slice_7.gif); height:40px; width:100px; }
 .link4 { background-image:url(images/Slice_8.gif); height:40px; width:100px; }
 .link5 { background-image:url(images/Slice_9.gif); height:40px; width:100px; }
 
-->
</style>
</head>
<body>

<table class="maintable" cellpadding="0" cellspacing="0" align="center" border="0">
 <tr>
 <td><img src="images/Slice_1.gif" alt="header01" height="147" width="200" /></td>
 <td><img src="images/Slice_2.gif" alt="header02" height="147" width="500" /></td>
 <td><img src="images/Slice_3.gif" alt="header03" height="147" width="200" /></td>
 </tr>
 <tr>
 <td><img src="images/Slice_4.gif" alt="Navleiste links" height="40" width="200" /></td>
 
 <td class="navlinks">
<a href=""><img src="images/Slice_5.gif" alt="sitelink1" border="0" /></a><a href=""><img src="images/Slice_6.gif" alt="sitelink2" border="0" /></a><a href=""><img src="images/Slice_7.gif" alt="sitelink3" border="0" /></a><a href=""><img src="images/Slice_8.gif" alt="sitelink4" border="0" /></a><a href=""><img src="images/Slice_9.gif" alt="sitelink5" border="0" /></a>
 </td>
 
 <td><img src="images/Slice_10.gif" alt="Navleiste links" height="40" width="200" /></td>
 </tr>
 <tr>
 <td><img src="images/Slice_11.gif" alt="Sitelink 2" height="75" width="200" /></td>
 <td><img src="images/Slice_12.gif" alt="Sitelink 2" height="75" width="500" /></td>
 <td><img src="images/Slice_13.gif" alt="Sitelink 2" height="75" width="200" /></td>
 </tr>
 <tr>
 <td class="contentL"></td>
 <td class="contentM">
 <!-- Anfang des Inhaltes -->
 Test<br />
 Test<br />
 Test<br />
 Test<br />
 Test<br />
 Test<br />
 Test<br />
 <!-- Ende des Inhaltes -->
 </td>
 <td class="contentR"></td>
 </tr>
 <tr>
 <td><img src="images/Slice_17.gif" alt="Sitelink 2" height="49" width="200" /></td>
 <td><img src="images/Slice_18.gif" alt="Sitelink 2" height="49" width="500" /></td>
 <td><img src="images/Slice_19.gif" alt="Sitelink 2" height="49" width="200" /></td>
 </tr>
 <tr>
 <td><img src="images/Slice_20.gif" alt="Sitelink 2" height="146" width="200" /></td>
 <td><img src="images/Slice_21.gif" alt="Sitelink 2" height="146" width="500" /></td>
 <td><img src="images/Slice_22.gif" alt="Sitelink 2" height="146" width="200" /></td>
 </tr>
 
</table>

</body>
</html>
    Ich denke mal, dass der relevante Teil der hier sein wird:

    Code:
    <td class="navlinks">
<a href=""><img src="images/Slice_5.gif" alt="sitelink1" border="0" /></a><a href=""><img src="images/Slice_6.gif" alt="sitelink2" border="0" /></a><a href=""><img src="images/Slice_7.gif" alt="sitelink3" border="0" /></a><a href=""><img src="images/Slice_8.gif" alt="sitelink4" border="0" /></a><a href=""><img src="images/Slice_9.gif" alt="sitelink5" border="0" /></a>
</td>
    Vielen Dank schonmal für eure Hilfe.

    PS: Ja, ich weiß, das die Links bis jetzt noch nicht ihren eigentlichen Zweck erfüllen, aber bin ja auch noch in der Aufbauphase ^^

    Edit: Ok, habs nun doch hinbekommen. *close*
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.