CSS Layout, Unterschied Firefox IE -> Breite

**jahlives** · 08.11.2007, 12:37

Schonmal mit einer Breite in Pixeln probiert?

**Benny-one** · 08.11.2007, 12:52

Bei mir sieht es bis auf einen Positionierungsunterschied gleich aus. Meinst du vll. IE 6? Beide sind bei mir gleich breit.

**matz0r** · 08.11.2007, 13:03

Original geschrieben von jahlives
Schonmal mit einer Breite in Pixeln probiert?

Klar, funktioniert! Aber ich will die Breite ja nicht fest vergeben...

Original geschrieben von Benny-one
Bei mir sieht es bis auf einen Positionierungsunterschied gleich aus. Meinst du vll. IE 6? Beide sind bei mir gleich breit.

Ja, IE6! Da ist das rot-umrahmte Feld "minimal breit".

**jahlives** · 08.11.2007, 13:22

Schonmal bei selfhtml gelesen? Scheint ein Prob mit IE 6 zu sein...

Der Internet Explorer 6 berücksichtigt ferner nur einen Eckpunkt, sodass es diesem Browser nicht möglich ist, einem Element bei Angabe mehrerer Eckpunkte unter Verzicht auf width/height eine zu berechnende Breite und/oder Höhe zuzuweisen, wie dies im Beispiel auf das Element a7 zutrifft

Und width:auto interpretiert der IE6 vermutlich so, dass er es so breit macht wie es der Inhalt verlangt

Gruss

tobi

**matz0r** · 08.11.2007, 13:24

Danke, genau das "Beispiel" aus selfhtml habe ich auch gerade gefunden und wollte darauf hinweisen...

Muss ich mir wohl was anderes überlegen ....

Edit:

Code:

#content{
position:static;
margin-left: 185px;
}

Damit scheint es zu funktionieren.. Ich teste mal weiter!

**arkos** · 08.11.2007, 14:09

bau n wrapper drum rum - auf was (außer dem inhalt selbst) soll sich sonst width: auto beziehen? und gib dem content nicht postion: absolute; damit kommst du deinem ziel schon näher...

**matz0r** · 08.11.2007, 17:06

Original geschrieben von arkos
auf was soll sich sonst width: auto beziehen?

Auf das Elternelement? body? html? Aber wie schon gesagt: Ein <div> Element ist in meinen Augen ein Block-Element. Also immer so breit wie der Bildschirm (wenn nicht anders angegeben).

Original geschrieben von arkos
und gib dem content nicht postion: absolute; damit kommst du deinem ziel schon näher...

Naja, "absolut" war für mich die beste Lösung gewesen (würde der IE6 das nicht anders interpretieren.

Aber die position wurde doch schon (siehe Post über dir) geändert

-> Problem gelöst.

**arkos** · 08.11.2007, 17:15

hatte vorhin dein ergebnis so hinbekommen...
kannst es dir ja zumindest anschauen, ob du dir da noch was rausziehen willst...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>matze &raquo; Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* BASIC */
html, body, div, p, h1, h2, h3, ul, ol, 
span, a, table, td, form, img, li {
margin:0;
padding:0;
color:black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

html {
height:100%;
}

body {
height:100%;
}

#wrapper
{
width: 100%;
display: block;
border: 1px dotted black;
}


/* banner container */
#head{
color:black;
border-bottom:5px solid #b1e101;
padding-top:20px;
padding-bottom:10px;
margin:0 0 20px 0;
background:url(/xxxx.gif) repeat-x;

}

/* Hauptmenu */

#menu{
font-size:13px;
float:left;
width:165px;
display: block;
border: 1px solid black;
}




/* Main Container */
#content{
font-size:12px;
display: block;
margin:15px 10px 10px 180px;
width:auto;
}





-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="head">
	y
	</div>

	<div id="menu">
	Menu
	</div>

	<div id="content" style="border:1px solid red">
		<h1>Base</h1>
		<br />
		<br />
		Home
		<br />
		<br />
		<br />
		<br />
	</div>
</div>
</body>
</html>

CSS Layout, Unterschied Firefox IE -> Breite