Workaround für IE 6 zerstört Layout im Firefox

Status
Nicht offen für weitere Antworten.
W

WIK-Lars

Erfahrenes Mitglied
Hallo Zusammen,

ich habe in meinen Quellcode diesen Workaround eingearbeitet.
Es geht darum, dass ich verhindern möchte, dass bei der Verkleinerung des Browserfensters die einzelnen Elemente meines Headers und meines waagerechten Menüs zeilenweise umbrechen.
Im FF kann man ja solche Einstellungen über min-width vornehmen.

Tja, also habe ich den Workaround eingebaut. Nun t es im IE 6 auch prima, dafür wird mein waagerechtes Menü auf eine Stelle zusammengeschoben. Ich poste mal hier meinen Quellcode, den eingebauten Workaround markiere ich fett.

Anschließend gibt's im Anhang in einem Word-Dokument zwei Bildchen, wie's ausschaut in beiden Browsern.

(Poste den Code jetzt so rein, da ich wegen HTML nicht weiß, wie ich die Zeilen für den Workaround fett bekomme:rolleyes:)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
* { margin: 0;
padding: 0; }

html,body { height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
font-family: Arial, Verdana, sans-serif;
/* border-collapse:collapse; */ }


/* the bodge for IE6 browsers */
* html .minwidth {border-left:850px solid #fff; position:relative; float:left; z-index:1; }
* html .container {margin-left:-850px; position:relative; float:left; z-index:2; }

#header { height: 15%;
width: 100%;
min-width: 850px;
border: 1px solid black;
white-space: nowrap;
position:relative; }

#header img { float: left; }

#header #header-left { float: left;
width: 366px;
margin-right: 0px; /* !important */
margin-right: -3px; /* Fixt 3px-Gap-Bug im IE 6 */}

#header #header-center {margin: 0 232px 0 366px; /* !important */
margin: 0 229px 0 363px; /* Fixt 3px-Gap-Bug im IE6 */
height: 67px;
background-image: url(topm_2.gif); }

#header #header-right { float: right;
width: 232px;
margin-left: 0px; /* !important */
margin-left: -3px; /* Fixt 3px-Gap-Bug im IE 6 */ }

#header .logo { float: right;
right: 0px;}

#header .headerstyle { float: left; }

#header .topm_3 { right:202px; }

#menuleiste { height: 5%;
border-width: 1px;
border-style: solid;
border-color: black;
width: 100%;
min-width: 875px;
white-space: nowrap; }

#right { width: 25%;
height: 75%;
border-width: 1px;
border-style: solid;
border-color: black;
float: right;
margin-left: 0;
margin-left:-3px; }

#content { height: 75%;
border-width: 1px;
border-style: solid;
border-color: black;
overflow:auto; }

#footer { height: 5%;
border-width: 1px;
border-style: solid;
border-color: black; }


#menu { height: 100%;
list-style-type:none;
list-style-position:inside; }

#menu li { height: 100%;
float:left;
position:relative;
width:170px;
z-index:100; }

#menu li dl { height: 100%;
position:absolute;
top:0;
left:0; }

#menu li a, #menu li a:visited {height: 100%;
text-decoration:none; }

#menu li dd { display:none;}

#menu li:hover, #menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}

#menu table { height: 100%;
border-collapse:collapse; }

#menu tr { height: 100%;}

#menu dl { height: 100%;
width: 170px; }

#menu dt { height: 100%;
font-size: 1.2em;
color: #444444; }

#menu dt a, #menu dt a:visited { color:#444444; }

#menu .first { height: 100%;
background: #9AC0CD top left;
text-align:center;}

#menu dd { color: #444444;
font-size: 1.0em;
background-color: #CCCCFF;
padding:1px;
padding-left:5px; }


#menu .zwischenueberschrift { font-size: 1.1em;
color: #444444;
background-color: #99CCCC;
padding-left:5px; }


.gallery dd a, .gallery dd a:visited {color:#444444;
text-decoration:none;
display:block;
background: #CCCCFF; }

.gallery dd a:hover { background: #9AC0CD; color:#444444;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu dd a, #menu dd a:visited { height:1%; }
</style>
<![endif]-->
</head>

<body>

<div id="header">

<div class="minwidth">
<div class="container">

<div id="header-left">
<embed class="headerstyle" src="flash.swf" bgcolor="#FFFFFF" width="137" height="67" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" border="0"></embed>
<img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="0" />
</div>

<div id="header-right">
<img class ="topm_3" src="topm_3.gif" alt="" height="67" width="32" border="0" />
<img class="logo" src="logo_HintergrWeiss.gif" alt="" height="60" width="200" border="0" />
</div>

<div id="header-center">&nbsp;</div>

</div>
</div>


</div>

<div id="menuleiste">

<div class="minwidth">
<div class="container">

<ul id="menu">

<li>
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Aktuell/index.html">Aktuell</a></dt>
<dd><a href="Aktuell/nachrichten.html">Nachrichten</a></dd>
<dd><a href="Aktuell/newsletter.html">Newsletter</a></dd>
<dd><a href="Aktuell/stellenangebote.html">Stellenangebote</a></dd>
<dd><a href="Aktuell/ausblicke.html">Ausblicke</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Unternehmen/index.html">Unternehmen</a></dt>
<dd class="zwischenueberschrift">Unternehmen</dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">Presse</a></dd>
<dd><a href="Aktuell/nachrichten.html">Referenzen</a></dd>
<dd><a href="Aktuell/nachrichten.html">Stellenangebote</a></dd>
<dd class="zwischenueberschrift">Service</dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd class="zwischenueberschrift">Support</dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Loesungen/index.html">L&ouml;sungen</a></dt>
<dd class="zwischenueberschrift">L&ouml;sungen</dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd class="zwischenueberschrift">Erweiterungen</dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd class="zwischenueberschrift">Anwendungen</dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Spezialthemen/index.html">Spezialthemen</a></dt>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">Reach</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">Validierung</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Partner/index.html">Partner</a></dt>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXX</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>

</div>
</div>

</div>

<div id="right">&nbsp;</div>

<div id="content">&nbsp;</div>

<div id="footer">&nbsp;</div>

</body>
</html>
 
Zuletzt bearbeitet:
Hi,

wieviele Themen willst du denn noch zu dem Problem starten?

Bitte lies den Punkt 12 unserer Netiquette und unterlasse hier zukünftig das doppelte oder mehrfache Starten eines Themas, das sich immer wieder mit demselben Problem beschäftigt.

Vielen Dank!


[closed]
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück