✔ div und IE = Problem = Hilfe!
- Themenstarter chirp
- Beginndatum
- Status
M
Maik
Hi,
eine CSS-Eigenschaft namens "align" gibt es überhaupt nicht, und die modernen Browser zentrieren das Element anhand von margin:0 auto.
Dass der IE7 das Element dennoch nicht horizontal zentriert, lässt die Vermutung zu, dass das Dokument im "Quirksmode" übergeben wird, und in diesem Darstellungsmodi der IE das Boxmodell falsch interpretiert bzw. nicht unterstützt, und daher mit margin:0 auto nichts anzufangen weiß.
Aber selbst mit text-align:center würde der IE die Box nicht horizontal zentrieren, da sich diese Eigenschaft auf den Elementinhalt bezieht.
zentriert die Box im IE7, wenn er im "Quirksmode" läuft.
eine CSS-Eigenschaft namens "align" gibt es überhaupt nicht, und die modernen Browser zentrieren das Element anhand von margin:0 auto.
Dass der IE7 das Element dennoch nicht horizontal zentriert, lässt die Vermutung zu, dass das Dokument im "Quirksmode" übergeben wird, und in diesem Darstellungsmodi der IE das Boxmodell falsch interpretiert bzw. nicht unterstützt, und daher mit margin:0 auto nichts anzufangen weiß.
Aber selbst mit text-align:center würde der IE die Box nicht horizontal zentrieren, da sich diese Eigenschaft auf den Elementinhalt bezieht.
Code:
body {
text-align:center;
}Hallo,
vielen Dank Maik. Ich habe schon den Dokumenttyp (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) angegeben. Da der IE nicht reagiert hat bin ich
auf align verfallen. Dein Codebsp. gebe ich ja wohl nicht ein da ich den Dokumenttyp angebe.
Mir ist aber leider nicht klar wie ich nun den IE dazu bewege den Div in die Mitte zurücken.
Der macht noch einen anderen Fehler: Der Container wir breiter angezeigt (border), eher 800 px als 600px. Was kann das sein?
vielen Dank Maik. Ich habe schon den Dokumenttyp (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) angegeben. Da der IE nicht reagiert hat bin ich
auf align verfallen. Dein Codebsp. gebe ich ja wohl nicht ein da ich den Dokumenttyp angebe.
Mir ist aber leider nicht klar wie ich nun den IE dazu bewege den Div in die Mitte zurücken.
Der macht noch einen anderen Fehler: Der Container wir breiter angezeigt (border), eher 800 px als 600px. Was kann das sein?
M
Maik
Wie sich die Box dennoch im IE zentrieren läst, hab ich eben noch nachgereicht.
Für alle weiteren Fragen (unerwartete Boxenverbreiterung) solltest du mal einen Link zur Seite, oder hier den vollständigen Quellcode (HTML + CSS) posten.
Mit dem von dir deklarierten Dokumenttyp wird das Dokument im "Quirksmode" übergeben.
Für alle weiteren Fragen (unerwartete Boxenverbreiterung) solltest du mal einen Link zur Seite, oder hier den vollständigen Quellcode (HTML + CSS) posten.
Mit dem von dir deklarierten Dokumenttyp wird das Dokument im "Quirksmode" übergeben.
...dann habe ich dich falsch verstanden.
hier der gesamte (gebastelte
) Code. Im firefox sieht es gut aus...
Ich hoffe erst ist nicht komplett falsch...
hier der gesamte (gebastelte
) Code. Im firefox sieht es gut aus...
HTML:
<body>
<div class="wr">
<div class="header">
</div>
<div id="nav">
<ul>
<li><a href="../www/pages/1.html" id="a"></a></li>
<li><a href="../www/pages/2.html" id="b"></a></li>
<li><a href="../www/pages/3.html" id="c"></a></li>
<li><a href="../www/pages/4.html" id="d"></a></li>
</ul>
</div>
<div id="nav2">
<a href="../www/pages/1.html" id="m">1</a>
<a href="../www/pages/2.html" id="n">2</a>
<a href="../www/pages/3.html" id="o">3</a>
<a href="../www/pages/4.html" id="p">7</a>
<a href="../www/pages/5.html" id="q">8</a>
</div>
</div>
</body>
Code:
html, body {
margin: 0;
padding: 0;
height: 100%; text-align:center; }
div.wr {
width: 600px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
div.header {
width: 600px;
height: 200px;
background: #00FF3F; }
#nav { margin:0px;
padding:0;
list-style:none; border: 1px solid #000}
#nav ul { margin:0;
padding:0;
list-style:none; }
#nav a
{ display:block;
width:300;
height:200; ;}
a#a:link, a#a:visited { width:300px; height:200px; margin:0px 0px;
background:url(../pictures/1.jpg); }
a#a:hover { background:url(../pictures/2.jpg); }
a#b:link, a#b:visited { width:300px; height:200px; margin:-200px 300px;
background:url(../pictures/3.jpg); }
a#b:hover { background:url(../pictures/4.jpg); }
a#c:link, a#c:visited { width:300px; height:200px; margin:200px 0px;
background:url(../pictures/5.jpg); }
a#c:hover { background:url(../pictures/6.jpg); }
a#d:link, a#d:visited { width:300px; height:200px; margin:-400px 300px;
background:url(../pictures/7.jpg); }
a#d:hover { background:url(../pictures/8.jpg); }
#nav2 { margin:0px;
padding: 15px;
list-style:none; width: 570px;
position:absolute; bottom:10%;
background-color: #C1C1C1; text-align: center;}
#nav2 ul{
text-align: center; }
#nav2 li {
display: inline;
margin: 4em; padding: 0; }
a#m:link, a#m:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#m:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#n:link, a#n:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#n:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#o:link, a#o:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#o:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#p:link, a#p:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#p:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#q:link, a#q:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#q:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}Ich hoffe erst ist nicht komplett falsch...
M
Maik
Mit diesem Code wird die Seite in den genannten Browsern einheitlich dargestellt:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div.wr {
position:relative;
width: 600px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
text-align:left;
}
div.header {
width: 600px;
height: 200px;
background: #00FF3F; }
#nav { margin:0px;
padding:0;
list-style:none; border: 1px solid #000}
#nav ul { margin:0;
padding:0;
list-style:none; }
#nav a
{ display:block; }
a#a:link, a#a:visited { width:300px; height:200px; margin:0px 0px;
background: url(../pictures/1.jpg); }
a#a:hover { background:url(../pictures/2.jpg); }
a#b:link, a#b:visited { width:300px; height:200px; margin:-200px 0 0 300px;
background: url(../pictures/3.jpg); }
a#b:hover { background:url(../pictures/4.jpg); }
a#c:link, a#c:visited { width:300px; height:200px; margin:0 0 0 0px;
background: url(../pictures/5.jpg); }
a#c:hover { background:url(../pictures/6.jpg); }
a#d:link, a#d:visited { width:300px; height:200px; margin:-200px 0 0 300px;
background: url(../pictures/7.jpg); }
a#d:hover { background:url(../pictures/8.jpg); }
#nav2 { margin:0px;
padding: 15px;
list-style:none; width: 570px;
position:absolute; left:0; bottom:10%;
background-color: #C1C1C1; text-align: center; }
#nav2 ul{
text-align: center; }
#nav2 li {
display: inline;
margin: 4em; padding: 0; }
a#m:link, a#m:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#m:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#n:link, a#n:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#n:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#o:link, a#o:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#o:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#p:link, a#p:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#p:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
a#q:link, a#q:visited { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #454545;
text-decoration:none; background:#C1C1C1; }
a#q:hover { margin:7px; padding: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-decoration:none; background:#D7D7D7}
-->
</style>
</head>
<body>
<div class="wr">
<div class="header"></div>
<div id="nav">
<ul>
<li><a href="../www/pages/1.html" id="a">a</a></li>
<li><a href="../www/pages/2.html" id="b">b</a></li>
<li><a href="../www/pages/3.html" id="c">c</a></li>
<li><a href="../www/pages/4.html" id="d">d</a></li>
</ul>
</div>
<div id="nav2">
<a href="../www/pages/1.html" id="m">1</a>
<a href="../www/pages/2.html" id="n">2</a>
<a href="../www/pages/3.html" id="o">3</a>
<a href="../www/pages/4.html" id="p">7</a>
<a href="../www/pages/5.html" id="q">8</a>
</div>
</div>
</body>
</html>
M
Maik
Nein, ansonsten hätte ich nicht den vollständigen Quellcode gepostet.
Desweiteren habe ich das DIV .wr relativ positioniert, damit sich die absoluten Positionsangaben von #nav2 auf seine Grenzen beziehen, und die margin-Angaben der Links "optimiert", die für die "Verbreiterung" des DIVs .wr verantwortlich waren.
Desweiteren habe ich das DIV .wr relativ positioniert, damit sich die absoluten Positionsangaben von #nav2 auf seine Grenzen beziehen, und die margin-Angaben der Links "optimiert", die für die "Verbreiterung" des DIVs .wr verantwortlich waren.
oh ja
das mit dem margin Angaben...war Pfusch. Vielen, vielen Dank.
Der IE zeigt die Breite jetzt richtig an, allerdings immer noch am linken Rand!
Ich habe den IE doch gerade erst aktualisiert.
Aber wenn bei dir alles richtig angezeigt wird, kann ich das vielleicht erstmal vernachlässigen.
das mit dem margin Angaben...war Pfusch. Vielen, vielen Dank.
Der IE zeigt die Breite jetzt richtig an, allerdings immer noch am linken Rand!
Ich habe den IE doch gerade erst aktualisiert.
Aber wenn bei dir alles richtig angezeigt wird, kann ich das vielleicht erstmal vernachlässigen.
M
Maik
Hast du auch den vorgeschlagenen Doctype übernommen?
- Status
