✔ Und noch ein IE6 Problem (min-width)

M

Markus_Hain

Grünschnabel
Hallo zusammen,

hoffe mir kann hier jemand helfen, suche schon den ganzen Morgen verzweifelt nach einer Lösung die mich zufrieden stellt.

Es geht um dieses Layout: Link

Würde gerne eine minimale Breite festlegen.
Das stellt auch kein Problem da, zumindest in allen Browsern bis auf den IE6.
Nach einiger Suche im Inet habe ich festgestellt, dass "min-width" vom IE6 wohl einfach nicht unterstützt wird.
Komme aber leider auch mit keinem der dort genannten Workarrounds weiter.


Gruß Markus
 
Ja, hab ich beide schon getestet, funktioniert aber irgendwie nicht so richtig, bzw .es verschiebt sich trotzdem noch ein Teil der DIVs.
 
Für welchen DIV-Block soll denn welches Mindestbreitenmaß gelten?

mfg Maik
 
Glaube ich steh heute echt aufm Schlauch ...

hab das erste Modell vom 2. Link nun nochmal eingebaut, das mit der min. width klappt ja ganz gut nur hab ich dann keine height (Footer sitzt nicht mehr am unteren Rand) mehr von 100% und im Opera fallen die Navigationsleisten weg.

vielleicht kannst du ja nochmal drüber schaun und mir sagen wo mein Fehler liegt. :-(

Link: http://www.familie-hain.de/familie-hain/index2.html

HTML File:
HTML: 
<!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">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Test</title>

	<link href="style2.css" rel="stylesheet" type="text/css">

	<!--[if lt IE 7]>
		<style>
			.minwidthb, .minwidthm, .minwidthp {
				height: 0;
			}
			.minwidthm {
				margin-left: -800px;
				position: relative;
			}
			.minwidthb {
				border-left: 800px solid #fdd;
			}
		</style>
	<![endif]-->
	
</head>

<body><div id="box" class="clearfix">
<div class="minwidth0"><div class="minwidthb"><div class="minwidthm">
	<div id="box" class="clearfix">
        <div id="banner_top"></div>
        <div id="banner_bottom_left"></div>
        <div id="banner_bottom_right"></div>
        <div id="banner_bottom_middle"><img src="img/banner_bottom_middle.jpg" width="379" height="90"></div>
        <div id="navigation_left" align="left">
		</div>
	    <div id="navigation_right" align="right">
		</div>
	    <div id="main" align="center">
			<table width="95%">
				<tr>
					<td align="center"><br><br>
					</td>
				</tr>
			</table>
		</div>
        <div id="footer" align="center">test</div>
    </div>
</div></div></div>
</body>
</html>

CSS:
HTML: 
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0px;
	line-height: 0em;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
* {
	margin:0;
	padding:0;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	margin-top: 0;
	min-width: 800px;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size:12px;
	background: #228b22;
}

.minwidth0 {
	width: 100%;
	min-width: 800px;
	margin-bottom: 1em;
}
.minwidthm {
	border: 0px solid #000;
}
.minwidth1 {
	width: 100%;
	min-width: 800px;
	margin-bottom: 1em;
}

#box {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: #4b0082;
	position: relative;
}
#banner_top {
	background: #f0e68c;
	height: 145px;
	text-align: center;
}
#banner_bottom_left {
	background: #b0c4de;
	height: 90px;
	float:left;
	width: 160px;
	margin-right:0 !important;
	margin-right:-3px;
}
#banner_bottom_right {
	background: #ff4500;
	height: 90px;
	float:right;
	width: 160px;
	margin-left:0 !important;
	margin-left:-3px;
}
#banner_bottom_middle {
	background: #ff0000;
	height: 90px;
	margin: 0 160px !important;
	margin:0 157px;
	text-align:center;
}
#navigation_left {
	background: #00ff7f;
	float:left;
	width: 160px;
}
#navigation_right {
	background: #7fff00;
	float:right;
	width: 160px;
}
#main {
	background: #d2691e;
	margin: 0 160px;
}
#footer {
	background: #0000ff;
	position: absolute;
	bottom: 0;
	left: 160px;
	right: 160px;
}
 
Zuletzt bearbeitet:
Schau mal hier:
Code: 
<body><div id="box" class="clearfix">
<div class="minwidth0"><div class="minwidthb"><div class="minwidthm">
	<div id="box" class="clearfix">
            ...
</div></div></div></div>

Und zum Vergleich das funktionstüchtige Original-Markup:
Code: 
<div class="minwidth0"><div class="minwidthb"><div class="minwidthm">
 ...
</div></div></div>


mfg Maik
 
Das einzige was ich sehe ist das in meinem Code ein

<div id="box" class="clearfix">

zu viel ist. Sonst komm ich immernoch zu keiner Lösung.
 
Tatsächlich? Dabei steht da eigentlich schon die Lösung.

Du mußt lediglich #box und .minwidth0 in einer Box zusammenführen:
Code: 
<body>
<div class="minwidth0 clearfix"><div class="minwidthb"><div class="minwidthm">
    ...
</div></div></div>
</body>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück