overflow: hidden; IE, FF und Opera stellen es jeweils unterschiedlich dar

  • Themenstarter Themenstarter kollmann84
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
K

kollmann84

Kaum zu glauben, aber irgendwie stehe ich mit dem Firefox auf Kriegsfuß.
Ich glaube, dass ich ihn in der Vergangenheit wohl zu oft verflucht habe und Opera ihm immer vorgezogen habe. Anders kann ich mir meine eigentlich simplen Probleme nicht erklären :rolleyes:

Folgendes ich bin gerade ein bisschen am herumexperimentieren mit der Eigenschaft
Code:
overflow: hidden;
und es wird in 3 verschiedenen Browsern jeweils unterschiedlich dargestellt. (siehe Anhang)

1 Bild: IE
2. Bild: FF
3. Bild: Opera

index.html:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="css/layout.css" />
<title>Test</title>
</head>
<body>
<div id="wrapper">
	<div id="header"></div>
	<div id="l_sidebar">links</div>
	<div id="r_sidebar">rechts</div>
	<div id="content">Inhaltssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
	<div id=""></div>
	<div id=""></div>
	<div id=""></div>
</div>
</body>
</html>

layout.css

Code:
@charset "ISO-8859-1";
body {
text-align: center;
}
#wrapper {
border: 1px solid #000;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 10pt auto;      /* standardkonforme horizontale Zentrierung */
width: 80%;
}
#header {
height: 130px;
}
#l_sidebar {
border: 1px solid #000;
float: left;
width: 20%;
}
#r_sidebar {
border: 1px solid #000;
float:right;
width: 30%;
}
#content {
border: 1px solid #000;
margin: 0 30% 0 20%;
overflow: hidden;
}
 

Anhänge

  • ie.jpg
    ie.jpg
    24,1 KB · Aufrufe: 47
  • ff.jpg
    ff.jpg
    7,3 KB · Aufrufe: 41
  • opera.jpg
    opera.jpg
    9,5 KB · Aufrufe: 39
Zuletzt bearbeitet von einem Moderator:
Hi,

bei umfliessenden Elementen berechnen die modernen Browser die margin-Werte anders, wenn die overflow-Eigenschaft zum Einsatz kommt:

Code:
#content {
border: 1px solid #000;
margin:0 !important; /* Für Firefox, Opera & Co. */
margin: 0 30% 0 20%; /* Für IE */
overflow: hidden;
}
 
Status
Nicht offen für weitere Antworten.
Zurück