Div in Internetexplorrer zu groß
1 
Olaf Schneider
0 
Gunnar Bittersmann
0 0
Div in Internetexplorrer zu groß
Hi folgendes Problem:
Ich habe ein Menü gemacht, was zur Dekoration über jedem und unter jedem Menüpunkt ein Div hat, was einen Pixel groß ist und eine andere Hintergrundfarbe hat. Hab nun sehr lang nichtsmehr Webdesignmäßiges gemacht und Internetexplorrer kann man wieder nicht akzeptieren, dass ein Div nur 1px groß ist. Firefox sowie Opera machen keine Probleme.
Quelltext:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=<yabb charset>" />
<style type="text/css">
body { margin:0px; padding:0px; background-color:#F8F8E5; }
td { padding:0px; }
table { border-collapse:collapse; }
.menu_head_1 { width:120px; height:1px; background-color:#ADAAAD; }
.menu_head_2 { height:20px; width:120px; background-color:#212021; color:#DEDFDE; font-family:verdana; font-size:12px }
.menu_head_3 { width:120px; height:1px; background-color:black; }
.menu_main_1 { width:120px; height:1px; background-color:#636563; }
.menu_main_2 { height:15px; width:120px; background-color:#424542; color:#DEDFDE; font-family:verdana; font-size:12px }
.menu_main_3 { width:120px; height:1px; background-color:black; }
</style>
</head>
<body>
<table style="width:800px;">
<tr>
<td colspan="2" style="height:100px;">banner
</td>
</tr>
<tr>
<td colspan="2">untermenu
</td>
</tr>
<tr>
<td style="height:1000px; width:120px; vertical-align:top; background-color:#424542; border-right-width:1px;">
<div class="menu_head_1" style="">asdfasdf</div>
<div class="menu_head_2">Aktuelles</div>
<div class="menu_head_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» News</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Erfolge</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Downloads</div>
<div class="menu_main_3"></div>
<div class="menu_head_1"></div>
<div class="menu_head_2">Training/Info</div>
<div class="menu_head_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Trainingsorte</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Trainingszeiten</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Wir über uns</div>
<div class="menu_main_3"></div>
<div class="menu_head_1"></div>
<div class="menu_head_2">Sonstiges</div>
<div class="menu_head_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Links</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» Kontakt</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2">» FAQ</div>
<div class="menu_main_3"></div>
<div class="menu_main_1"></div>
<div class="menu_main_2"></div>
</td>
<td>
main
</td>
</tr>
</table>
</body>
</html>
Ich bekomms nicht hin, wäre toll wenn mir einer oder eine von euch helfen kann,
MfG
Alex
-
Hallo Alex,
warum arbeitest Du nicht mit border? Dann kannst Du Dir die ganzen Div-Container sparen.
Gruß
Olaf -
Hello out there!
Ich habe ein Menü gemacht, was zur Dekoration über jedem und unter jedem Menüpunkt ein Div hat, was einen Pixel groß ist und eine andere Hintergrundfarbe hat.
Du möchtest also den Menüpunkten obere bzw. untere http://de.selfhtml.org/css/eigenschaften/rahmen.htm@title=Rahmen verpassen. Die 'div'-Elemente der Klassen 'menu_head_1' und 'menu_head_3' sind völlig überflüssig.
Das Menü möchte furchtbar gerne eine Liste sein. Bitte bitte lass es 'ul' bzw. 'ol' mit 'li' sein (frei nach [wahsaga]).
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe) -
Hi Alex,
Du musst noch ein "font-size:0px;" mit angeben, sonst ist das div im IE immer mind. so hoch wie eine Text Zeile.
Viel Glück!
-
Hello out there!
Du musst noch ein "font-size:0px;" mit angeben, sonst ist das div im IE immer mind. so hoch wie eine Text Zeile.
Nein, Alex sollte die überflüssigen divs rausschmeißen und den Menüpunkten Rahmen geben; nicht an der gegenwärtigen schlechten Lösung herumdoktorn.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Nein, Alex sollte die überflüssigen divs rausschmeißen und den Menüpunkten Rahmen geben; nicht an der gegenwärtigen schlechten Lösung herumdoktorn.
ich denke dass ist seine Entscheidung...
aber stimme Dir natürlich zu: bessere Lösungen sind in gewissen Fällen besser als schlechtere Lösungen..
-
Hello out there!
aber stimme Dir natürlich zu: bessere Lösungen sind in gewissen Fällen besser als schlechtere Lösungen..
Wie könnte ich dir darin widersprechen? Und ab in die Sammlung damit. ;-)
Äh, könntest du kurz umreißen, welche Fälle nicht zu diesen gewissen zählen?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
-
#menu ol, #menu ol li {
list-style: none;
margin: 0; padding: 0;
}<h2>Untermenü</h2>
<ol id="menu">
<li>
<a href="#1">Link 1</a>
</li>
<li>
<a href="#2">Link 2</a>
</li>
</ol>so könnte man es effektiver machen, dass es auch mobile Geräte, Textbrowser und Suchmaschinen mögen.