✔ Positinierungsproblem im IE

Martys · 4. April 2006

Hallo zusammen,

ich versuche gerade ein Layout komplet mit DIVs und CSS umzusetzen. In den "W3C-konformen" Browsern (Firefox, NN7...) funktioniert es auch, nur der IE (v6,v5.5) macht mal wieder Probleme. Momentan stehe ich da auch echt auf dem Schlauch, mir fällt keine Lösung dazu ein.

Das Probblem habe ich als gif-Skizze angehängt.

Hier mal der HTML-Code:

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" xml:lang="de" lang="de">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="headerlinks"><img src="gif/logo.gif" width="185" height="146" alt="" border="0" /></div>
<div id="headerrechts"><img src="gif/header.gif" width="706" height="122" alt="" border="0" />
<div id="navi">
<ul id="navicss"><li><a href="#" title="">Punkt 1</a></li>
<li><a href="#" title="">Punkt 2</a></li>
<li><a href="#" title="">Punkt 3</a></li>
<li><a href="#" title="">Punkt 4</a></li>
<li><a href="#" title="">Punkt 5</a></li>
<li><a href="#" title="">Punkt 6</a></li>
<li><a href="#" title="">Punkt 7</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="left">
<h1>Headline links</h1>
<ul class="navilinks"><li>1</li><li>2</li><li>3</li></ul>
</div>
<div id="right"><img src="gif/teaser.gif" width="220" height="221" alt="" boder="0" /></div>
<div id="inhalt"><h1>Headline</h1></div>
<div class="clear"></div>
</div>
</div>
<div id="footer" style="font-size:10px">Footer</div>
</body>
</html>

und hier der CSS-Auschnitt:

PHP:

body {
background-color:#ededed;
font-family:Arial;
font-size:12px;
margin: 0px auto;
padding: 0px;
}

#container {
width: 896px;
margin: 10px auto;
padding: 4px 0px 4px 4px;
background-color: #ff00ff;
}

#header {
width: 892px;
margin:0px;
padding:0px;
text-align:left;
border-bottom: 1px solid #7B7B7E;
background-color: #ff0000;
}

#headerlinks {
float: left;
width:185px;
}

#headerrechts {
margin: 0px 0px 0px 185px;
background-color:#ff0000;
}

#navi {
width:100%;
margin:0px;
padding:0px;
text-align:left;
border-top: 1px solid #fff;
background-color: #7B7B7E;
}

* html div#navi {
margin-top: -4px;
}

#content {
clear: all;
padding:0px;
margin:0px;
}

#left {
float: left;
width: 185px;
text-align: left;
margin: 0px;
padding: 0px;
background-color: #00ff00;
}

#right {
float:right;
width: 220px;
text-align:left;
margin:0px 4px 0px 0px;
padding: 0px;
background-color: #00dd00;
}

* html div#right {
margin:0px 2px 0px 0px;
}

#inhalt {
margin: 0px 224px 0px 185px;
padding: 0px;
font-family: Verdana, Helvetica, Arial;
font-size: 11px;
text-align: left;
background-color: #fff;
}

* html div#inhalt {
margin: 0px 222px 0px 185px;
}

.clear {
clear: right;
background-color:#fff;
visibility: hidden;
}

#footer {
width : 900px;
margin: 0px auto;
padding: 4px;
text-align:center;
display:block;
}


/* NAVIGATION */

#navicss, #navicss ul {
padding: 0px;
margin: 0px;
list-style: none;
width:100%;
background-color: #7B7B7E;
}

#navicss li {
float: left;
color: #fff;
background-color: #7B7B7E;
height: 23px;
}

#navicss a {
float: left;
height: 19px;
padding: 2px 20px;
margin: 0;
display: block;
background-color: #7B7B7E;
color:#fff;
font-size: 12px;
text-decoration:none;
font-weight: bold;
border-right:1px solid #fff;
}

#navicss a:hover {
float: left;
height: 19px;
padding: 2px 20px;
margin: 0;
display: block;
background-color: #EDEDED;
color: #7B7B7E;
font-size: 12px;
text-decoration:underline;
font-weight: bold;
border-right:1px solid #fff;
}


/* LINKE SPALTE */

#left h1 {
margin:0px;
padding:0px;
text-align:left;
color:#000;
font-weight:bold;
font-size:12px;
}

/* RECHTE SPALTE */

#right img {
margin-top: 0px;
}

/* SCHRIFTFORMATIERUNG */

* {font-family: Verdana,Arial,Helvetica; font-size: 11px; color: #000000; line-height: 13pt;}

#inhalt h1 {
margin: 0px;  
padding: 0px;
font-size: 14px; 
color: #2B3998;
font-weight: bold;
}

Das Problem in Worten:
Die Header-Grafik soll über der Navi stehen. Beides zusammen soll rechts vom Logo stehen. Die Grafik verdeutlicht es.

Vielen Dank schon mal für eure Mühe bzw. Tipps oder Links zur Lösung des Problems.

Martys

Maik · 4. April 2006

Ich habe den HTML- u. CSS-Code etwas umstrukturiert und das Modell erfolgreich getestet:

Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000

Code:

body { 
background-color:#ededed; 
font-family:Arial; 
font-size:12px; 
margin: 0px auto; 
padding: 0px; 
} 

#container { 
width: 896px; 
margin: 10px auto; 
padding: 4px 0px 4px 4px; 
background-color: #ff00ff; 
} 

#header { 
width: 892px; 
margin:0px; 
padding:0px; 
text-align:left; 
border-bottom: 1px solid #7B7B7E; 
background-color: #ff0000; 
} 

div.leftCol {
float: left;
width: 185px;
height: 146px;
margin: 0;
padding: 0;
}

div.rightCol {
float: right;
width: 707px;
height: 146px;
margin: 0;
padding: 0;
}

#navi { 
width:100%;
margin:0px; 
padding:0px; 
text-align:left; 
border-top: 1px solid #fff; 
background-color: #7B7B7E; 
} 

#content { 
padding:0px; 
margin:0px; 
} 

#left { 
float: left; 
width: 185px; 
text-align: left; 
margin: 0px; 
padding: 0px; 
background-color: #00ff00; 
} 

#right { 
float:right; 
width: 220px; 
text-align:left; 
margin:0px 4px 0px 0px; 
padding: 0px; 
background-color: #00dd00; 
} 

* html div#right { 
margin:0px 2px 0px 0px; 
} 

#inhalt { 
margin: 0px 224px 0px 185px; 
padding: 0px; 
font-family: Verdana, Helvetica, Arial; 
font-size: 11px; 
text-align: left; 
background-color: #fff; 
} 

* html div#inhalt { 
margin: 0px 222px 0px 185px; 
} 

.clear { 
clear: both; 
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0; 
} 

#footer { 
width : 896px; 
margin: 0px auto; 
padding: 4px; 
text-align:center; 
display:block; 
} 


/* NAVIGATION */ 

#navicss, #navicss ul { 
padding: 0px; 
margin: 0px; 
list-style: none; 
width:100%; 
background-color: #7B7B7E; 
} 

#navicss li { 
float: left; 
color: #fff; 
background-color: #7B7B7E; 
height: 23px; 
} 

#navicss a { 
float: left; 
height: 19px; 
padding: 2px 20px; 
margin: 0; 
display: block; 
background-color: #7B7B7E; 
color:#fff; 
font-size: 12px; 
text-decoration:none; 
font-weight: bold; 
border-right:1px solid #fff; 
} 

#navicss a:hover { 
float: left; 
height: 19px; 
padding: 2px 20px; 
margin: 0; 
display: block; 
background-color: #EDEDED; 
color: #7B7B7E; 
font-size: 12px; 
text-decoration:underline; 
font-weight: bold; 
border-right:1px solid #fff; 
} 


/* LINKE SPALTE */ 

#left h1 { 
margin:0px; 
padding:0px; 
text-align:left; 
color:#000; 
font-weight:bold; 
font-size:12px; 
} 

/* RECHTE SPALTE */ 

#right img { 
margin-top: 0px; 
} 

/* SCHRIFTFORMATIERUNG */ 

* {font-family: Verdana,Arial,Helvetica; font-size: 11px; color: #000000; 

line-height: 13pt;} 

#inhalt h1 { 
margin: 0px;   
padding: 0px; 
font-size: 14px;  
color: #2B3998; 
font-weight: bold; 
}  

/* GRAFIKFORMATIERUNG */

img {
display: block;
}

HTML:

<div id="container">

<div id="header">
     <div class="leftCol">
          <img src="gif/logo.gif" width="185" height="146" alt="" border="0" />
     </div>
     <div class="rightCol">
          <img src="gif/header.gif" width="706" height="122" alt="" border="0" />
          <div id="navi">
               <ul id="navicss">
                   <li><a href="#" title="">Punkt 1</a></li>
                   <li><a href="#" title="">Punkt 2</a></li>
                   <li><a href="#" title="">Punkt 3</a></li>
                   <li><a href="#" title="">Punkt 4</a></li>
                   <li><a href="#" title="">Punkt 5</a></li>
                   <li><a href="#" title="">Punkt 6</a></li>
                   <li><a href="#" title="">Punkt 7</a></li>
               </ul>
          </div>
     </div>
</div>

<div class="clear">&nbsp;</div>

<div id="content">
     <div id="left">
          <h1>Headline links</h1>
          <ul class="navilinks">
              <li>1</li>
              <li>2</li>
              <li>3</li>
          </ul>
     </div>
     <div id="right">
          <img src="gif/teaser.gif" width="220" height="221" alt="" boder="0" />
     </div>
     <div id="inhalt">
          <h1>Headline</h1>
     </div>
</div>

<div class="clear">&nbsp;</div>

</div>

<div id="footer" style="font-size:10px">Footer</div>

Martys · 4. April 2006

Vielen Dank für deine Hilfe, es funktioniert so wie es soll.
Eine Frage noch, warum definierst du die Bilder (img) als Blockelement (display:block)?
Was steckt dahinter?

Martys

Maik · 4. April 2006

Ohne diese CSS-Formatierung erzeugen die Browser gerne unterhalb der Grafik einen Abstand, der das Layout verschiebt und Lücken aufreisst.

Martys · 4. April 2006

Das war mir neu, wieder etwas dazu gelernt.

Maik · 4. April 2006

Hier mal ein Beispiel für das beschriebene Browserverhalten:

HTML:

<!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">
<!--
div {
border: 1px solid #000;
margin: 10px;
}

img.block {
display: block;
}
-->
</style>

</head>
<body>

<div>
     <img src="[Grafik-URI]" alt="">
</div>

<div>
     <img class="block" src="[Grafik-URI]" alt="">
</div>

</body>
</html>

✔ Positinierungsproblem im IE

Martys

Erfahrenes Mitglied

Anhänge

Maik

Martys

Erfahrenes Mitglied

Maik

Martys

Erfahrenes Mitglied

Maik

Neue Beiträge