Divs IM IE7 verschoben

Lisa · 2 März 2011

Hallo Leute,
ich habe eine Seite erstellt die im Firefox, Safari & IE gut aussieht.
im IE 7 sind die DIVs jedoch irgendwie nach unten verschoben.

Weiss jemand warum?
Gibt es da einen allgemeinen "Kniff" um den Fehler zu beheben?
Bin für jeden Tip dankbar! :)

Hier die CSS:

Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  


*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; overflow:hidden;}

a:hover, a:active { outline: none; }

a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }


ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

small { font-size:85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/*- */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }


/* These selection declarations have to be separate.. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; } 


/* always force a scrollbar in non-IE */
html { overflow: hidden; }

/* make buttons play nice in IE:    */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG */
.ie7 img { -ms-interpolation-mode: bicubic; }


#top_strip{
	height:4px;
	background:#9ca34e;
	position:fixed;
	width:100%;
	top:0;
	display:block;
	z-index: 100000;
	}
	
#footer_centered{
	margin:0px auto;
	height:36px;
	width:100%;
	background:#9ca34e;
	position:fixed;
	bottom:0;
	z-index: 99999;
	padding-bottom:16px;
	text-align:center;
	}

#containeralles{
  position: absolute;
  left: 50%;
  width: 1920x;
  height: 11500px;
  margin: 0 0 0 -960px; 
}

	
#container1{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_01.jpg);
	background-repeat:no-repeat;
	}
	
#container2{
	margin:0 auto;
	width:1920px;
	height:1269px;
	background-image:url(../images/bg_02.jpg);
	background-repeat:no-repeat;
	z-index:205;
	}
#container3{
	margin:0 auto;
	width:1920px;
	height:1267px;
	background-image:url(../images/bg_03.jpg);
	background-repeat:no-repeat;
	}
	
#container4{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_04.jpg);
	background-repeat:no-repeat;
	}
#container5{
	margin:0 auto;
	width:1920px;
	height:1271px;
	background-image:url(../images/bg_05.jpg);
	background-repeat:no-repeat;
	}
	
#container6{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_06.jpg);
	background-repeat:no-repeat;
	}
#container7{
	margin:0 auto;
	width:1920px;
	height:1261px;
	background-image:url(../images/bg_07.jpg);
	background-repeat:no-repeat;
	}
	
#container8{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_08.jpg);
	background-repeat:no-repeat;
	}
#container9{
	margin:0 auto;
	width:1920px;
	height:1320px;
	background-image:url(../images/bg_09.jpg);
	background-repeat:no-repeat;
	}
	


#container{
	margin:0 auto;
	width:960px;
	}
	

#section_header{
	float:left;
	width:10%;
	margin: 66px 0 0 33px;
	position:fixed;
	}

#menue_unten {
	height: 19px;
	width: 320px;
	position: inherit;
	float:right;
}


#topmenue {
	margin:0 auto;
	width:960px;

}
#container1inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:160px;
	z-index:1;
}
#container2inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:210px;
	z-index:200;
}
#container3inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:270px;
	z-index:2;
}
#container4inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:380px;
	z-index:2;
}
#container5inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:300px;
	z-index:2;
}
#container6inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:270px;
	z-index:2;
}
#container7inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:400px;
	z-index:2;
}
#container8inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 840px;
	position:relative;
	margin:0 auto;
	top:430px;
	z-index:2;
}
#container9inhalt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	height: 450px;
	width: 870px;
	position:relative;
	margin:0 auto;
	top:550px;
	z-index:2;
}
#c1_head {
	height: 90px;
	width: 660px;
	margin-top: 0px;
	padding-left:50px;
}
#c1_content {
	height: 255px;
	width: 660px;
	margin-top: 5px;
	z-index:4;
	padding-left:235px;
}
#c1_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c2_head {
	height: 90px;
	width: 660px;
	margin-top: 0px;
	padding-left:50px;
}
#c2_content {
	height: 260px;
	width: 660px;
	margin-top: 0px;
	padding-left:235px;
	padding-top:0px;
}
#c2_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c3_head {
	height: 85px;
	width: 660px;
	margin-top: 0px;
	z-index:3;
	padding-left:120px;
}
#c3_content {
	height: 265px;
	width: 660px;
	margin-top: 0px;
	padding-left:235px;
	padding-top:0px;
}
#c3_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c4_head {
	height: 90px;
	width: 660px;
	margin-top: 0px;
	padding-left:120px;
}
#c4_content {
	height: 230px;
	width: 660px;
	margin-top: 0px;
	padding-left:280px;
	padding-top:30px;
}
#c4_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c5_head {
	height: 90px;
	width: 660px;
	margin-top: 0px;
	padding-left:120px;
}
#c5_content {
	height: 260px;
	width: 660px;
	margin-top: 0px;
	padding-left:240px;
	padding-top:0px;
}
#c5_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c6_head {
	height: 60px;
	width: 660px;
	margin-top: 0px;
	padding-left:130px;
}
#c6_content {
	height: 315px;
	width: 660px;
	margin-top: 0px;
	padding-left:260px;
}
#c6_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c7_head {
	height: 66px;
	width: 660px;
	margin-top: 0px;
	padding-left:120px;
}
#c7_content {
	height: 270px;
	width: 660px;
	margin-top: 0px;
	padding-left:260px;
	padding-top:15px;
}
#c7_footer {
	height: 25px;
	width: 840px;
}
#c8_head {
	height: 90px;
	width: 660px;
	margin-top: 0px;
	padding-left:120px;
}
#c8_content {
	height: 250px;
	width: 660px;
	margin-top: 0px;
	padding-left:260px;
	padding-top:10px;
}
#c8_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#c9_head {
	height: 38px;
	width: 660px;
	margin-top: 0px;
	padding-left:120px;
}
#c9_content {
	height: 390px;
	width: 700px;
	margin-top: 10px;
	z-index:4;
	padding-left:285px;
}
#c9_footer {
	height: 25px;
	width: 840px;
	z-index:5;
}
#pfeile {
	height: 450px;
	width: 48px;
	float:right;
}
#pfeiloben {
	height: 68px;
	width: 48px;
	margin-top: 0px;
}
#pfeilunten {
	height: 68px;
	width: 48px;
	padding-top:187px;
}
#anker0 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:0px;
}
#anker1 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:0px;
}
#anker2 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:45px;
}
#anker3 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:105px;
}
#anker4 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:215px;
}
#anker5 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:135px;
}
#anker6 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:130px;
}
#anker7 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:235px;
}
#anker8 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:265px;
}
#anker9 {
	height: 50px;
	width: 50px;
	z-index: 300;
	position:absolute;
	margin-top:475px;
}

Lisa · 2 März 2011

Jetzt der HTML Code:

Code:

<!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 charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>test</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- CSS : implied media="all" -->
    <link rel="stylesheet" href="css/main.css">
    <link href="css/content.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/tooltip.css" />

</head>

<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div id="top_strip"></div>
<div id="containeralles"><div id="anker0"></div>

  <div id="topmenue" class="clearfix">  <div id="greenboxbutton"><a id="greenbox" href="javascript:void(0);" onclick="openWindow( 'box.html', 850, 600 ); return false;"></a></div>
          <span class="reference">
                        <a onclick="neueFarbe('#9ca34e');" href="#anker0">Home</a>
                        <a onclick="neueFarbe('#d44d8f');" href="#anker2">Menue1</a>
                        <a onclick="neueFarbe('#e9d418');" href="#anker3">Menue2</a>
                        <a onclick="neueFarbe('#c82c31');" href="#anker4">Menue3</a>
                        <a onclick="neueFarbe('#2c0059');" href="#anker5">Menue4</a>
          </span>
</div>
   
    <div id="container1"> <div id="anker1"></div>
      <div id="container1inhalt">
                          <div id="pfeile" >
                                <div id="pfeiloben"><a onclick="neueFarbe('#9ca34e');" href="#anker0"><img src="http://www.html.de/images/pfeil_o_l.png" width="1" height="68" /></a></div>
                                    <div id="pfeilunten"><a id="pfeilu" onclick="neueFarbe('#d44d8f');" href="#anker2"></a></div>
        </div>
            <div id="c1_head"><img src="http://www.html.de/images/head_1.png" width="447" height="79" /></div>
            <div id="c1_content">
<p>bla! <br />
<br />
bla <br />
bla<br />
bla <br />
Sbla <br />
<br />
bla</p><br />	<br />     		
            </div>
            <div id="c1_footer">
            	 	<div id="menue_unten">
                 		<span class="menueunten"><a onclick="neueFarbe('#0c5535');" href="#anker6">KONTAKT</a> <a onclick="neueFarbe('#4e59ac');" href="#anker7">PHILOSOPHIE</a>
                 		<a onclick="neueFarbe('#8f5044');" href="#anker8">KUNDEN</a> <a onclick="neueFarbe('#006185');" href="#anker9">IMPRESSUM</a></span>
             		</div>
            </div>
      </div><!--! end of #container1inhalt -->		
</div><!--! end of #container1 -->
    
    <div id="container2"> <div id="anker2"></div>
            <div id="container2inhalt">
             
                              <div id="pfeile" >
                                <div id="pfeiloben"><a id="pfeilo" onclick="neueFarbe('#9ca34e');" href="#anker0"></a></div>
                                        <div id="pfeilunten"><a id="pfeilu" onclick="neueFarbe('#e9d418');" href="#anker3"></a></div>
          </div>
                <div id="c2_head"><img src="http://www.html.de/images/head_2.png" width="457" height="70" /></div>
                <div id="c2_content">
<p>&nbsp;&nbsp;bla<br />
&nbsp;&nbsp;Npbla<br />
&nbsp;&nbsp;Sbla</p><br /><br />
                        
                        <div id="rollover">
                            <a href="#"><img src="http://www.html.de/images/gn1.png" width="143" height="97" alt="" /><span><img src="http://www.html.de/images/tt/gn.png" alt=" " /></span></a>                  
                            <a href="#"><img src="http://www.html.de/images/gn2.png" width="143" height="97" alt="" /><span><img src="http://www.html.de/images/tt/ng.png" alt=" " /></span></a>
                            <a href="#"><img src="http://www.html.de/images/gn3.png" width="143" height="97" alt="" /><span><img src="http://www.html.de/images/tt/sen.png" alt=" " /></span></a>
                        </div>
                </div>
                <div id="c2_footer">
            	 	<div id="menue_unten">
                 		<span class="menueunten"><a onclick="neueFarbe('#0c5535');" href="#anker6">KONTAKT</a> <a onclick="neueFarbe('#4e59ac');" href="#anker7">PHILOSOPHIE</a>
                 		<a onclick="neueFarbe('#8f5044');" href="#anker8">KUNDEN</a> <a onclick="neueFarbe('#006185');" href="#anker9">IMPRESSUM</a></span>
             		</div>
                </div>
            </div><!--! end of #container2inhalt -->	
            
    </div> <!--! end of #container2 -->
    
    <div id="container3"> <div id="anker3"></div>
            <div id="container3inhalt">
                              <div id="pfeile" >
                                        <div id="pfeiloben"><a id="pfeilo" onclick="neueFarbe('#d44d8f');" href="#anker2"></a></div>
                                        <div id="pfeilunten"><a id="pfeilu" onclick="neueFarbe('#c82c31');" href="#anker4"></a></div>
                          </div>
                <div id="c3_head"><img src="http://www.html.de/images/head_3.png" width="415" height="73" /></div>
                <div id="c3_content">
                        <p>&nbsp;&nbsp;&nbsp;bla <br />
                        &nbsp&nbsp;&nbsp;bla!</p>
                        <p>&nbsp;&nbsp;&nbsp;bla.</p><br /><br />
                        
                        <div id="rollover">
                            <a href="#"><img src="http://www.html.de/images/imagefilm1.png" width="143" height="97" alt="" /><span><img src="http://www.html.de/images/tt/imagefilm.png" alt=" " /></span></a>                    
                            <a href="#"><img src="http://www.html.de/images/imagefilm2.png" width="143" height="97" alt="" /><span><img src="http://www.html.de/images/tt/beitrag.png" alt=" " /></span></a>
                            <a href="#"><img src="http://www.html.de/images/imagefilm3.png" width="143" height="97" alt="" /><span><img src="http://www.html.de/images/tt/event.png" alt=" " /></span></a>
                        </div>
                </div>
                <div id="c3_footer">
            	 	<div id="menue_unten">
                 		<span class="menueunten"><a onclick="neueFarbe('#0c5535');" href="#anker6">KONTAKT</a> <a onclick="neueFarbe('#4e59ac');" href="#anker7">PHILOSOPHIE</a>
                 		<a onclick="neueFarbe('#8f5044');" href="#anker8">KUNDEN</a> <a onclick="neueFarbe('#006185');" href="#anker9">IMPRESSUM</a></span>
             		</div>
                </div>
            </div><!--! end of #container3inhalt -->	
    </div> <!--! end of #container3 -->
        
    <div id="container4"> <div id="anker4"></div>
            <div id="container4inhalt">
                              <div id="pfeile" >
                                        <div id="pfeiloben"><a id="pfeilo" onclick="neueFarbe('#e9d418');" href="#anker3"></a></div>
                                        <div id="pfeilunten"><a id="pfeilu" onclick="neueFarbe('#2c0059');" href="#anker5"></a></div>
                          </div>
                <div id="c4_head"><img src="http://www.html.de/images/head_4.png" width="377" height="99" /></div>
                <div id="c4_content">
<p>bla<br />
bla</p><br />
<br />
<p>bla<br />
bla.<br />
<br />
bla<br />
bla.</p>
                </div>
                <div id="c4_footer">
            	 	<div id="menue_unten">
                 		<span class="menueunten"><a onclick="neueFarbe('#0c5535');" href="#anker6">KONTAKT</a> <a onclick="neueFarbe('#4e59ac');" href="#anker7">PHILOSOPHIE</a>
                 		<a onclick="neueFarbe('#8f5044');" href="#anker8">KUNDEN</a> <a onclick="neueFarbe('#006185');" href="#anker9">IMPRESSUM</a></span>
             		</div>
                </div>
            </div><!--! end of #container4inhalt -->	
    </div> <!--! end of #container4 -->
        
    <div id="container5"><div id="anker5"></div>
            <div id="container5inhalt">
                              <div id="pfeile" >
                                        <div id="pfeiloben"><a id="pfeilo" onclick="neueFarbe('#c82c31');" href="#anker4"></a></div>
                                        <div id="pfeilunten"><a id="pfeilu" onclick="neueFarbe('#0c5535');" href="#anker6"></a></div>
                          </div>
                <div id="c5_head"><img src="http://www.html.de/images/head_5.png" width="520" height="65" /></div>
                <div id="c5_content">
                        <p>bla<br />
                        lbla<br />
                        <br />
                        </p>bla: <br /> <br />
                        <p>
                        • bla <br />
                        • bla <br />
                        • bla <br />
                        • bla <br />
                        • bla <br />
                        • bla <br />
                        • bla</p>
                </div>
                <div id="c5_footer">
            	 	<div id="menue_unten">
                 		<span class="menueunten"><a onclick="neueFarbe('#0c5535');" href="#anker6">KONTAKT</a> <a onclick="neueFarbe('#4e59ac');" href="#anker7">PHILOSOPHIE</a>
                 		<a onclick="neueFarbe('#8f5044');" href="#anker8">KUNDEN</a> <a onclick="neueFarbe('#006185');" href="#anker9">IMPRESSUM</a></span>
             		</div>
                </div>
            </div><!--! end of #container5inhalt -->	
    </div> <!--! end of #container5 -->
         
</div> <!--! end of #containeralles -->
	
<footer>
    <div id="footer_centered">
    <img src="http://www.html.de/images/footer.png" width="900" height="43" />
    </div>
</footer>

</body>
</html>

threadi · 2 März 2011

Ersetze das

Code:

<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

durch

Code:

<body>

Entferne

Code:

<footer>
    <div id="footer_centered">
    <img src="http://www.html.de/images/footer.png" width="900" height="43" />
    </div>

</footer>[/code]

weil Du kein HTML5 sondern XHTML schreibst.

Und entferne im CSS das erste "*/" - macht dort keinen Sinn.

Das hier

Code:

/* always force a scrollbar in non-IE */
html { overflow: hidden; }

macht auf keinen Sinn, da es jegliche Scrollbars abschaltet.

Wenn Du das hast, entferne auch die absolute Positionierung von zentralen HTML-Elementen in deiner Seite. Z.B. bei #containeralles. Das musst Du nicht machen um etwas zu zentrieren. Außerdem sind die Breitenangaben irgendwie nicht nachvollziehbar. Hast Du 2 Monitore nebeneinander stehen um dir die Seite anzuschauen?

Lisa · 8 März 2011

Hi Threadi,
ich hab deine Tips befolgt und du hast Recht - es macht aufjedenfall Sinn :)

Leider funktioniert das immer noch nicht...

Ich glaube ehrlichgesagt das es am "Padding" von den Div Containern liegt... oder was meinst du ?

Die Breite der Seite habe ich auf eine Auflösung von 1920 x 1200 Pixeln angelegt.
Allerdings liegen die "wichtigen" Bildinhalte horizontal zentriert.
So das die Seite bei einer Auflösung von 1024 x 768 Pixeln immer noch gut aussieht.

Ich habe es in der CSS Datei mal mit folgendem Code probiert:
(was allerdings auch nicht funktioniert)

Code:

#c1_content {
	height: 255px;
	width: 660px;
	z-index:4;
	padding-left:255px;
	!padding-left: 255px; //IE7
	_padding-left: 255px; //IE6
	padding-top: 0px;
	!padding-top: 5px; //IE7
	_padding-top: 5px; //IE6
	display:inline; // FF
	*display:inline-block; // IE
	*width:100%; // IE
	float:left;
}

threadi · 8 März 2011

Ja, die paddings ergeben so gar keinen Sinn. Erst recht die Ausnahmen für die IEs. Du solltest dir mal das Box-Modell im IE anschauen.

Lisa · 10 März 2011

Hi Threadi,
die Werte fürs Padding habe ich aus dem Internet gezogen.

Das mit dem "!" soll ein Hack sein, der die richtige Darstellung für den IE ermöglichen sollte....

Leider funktioniert das alles nicht.
Habe den Tantek Hack, Star Hack usw. ausprobiert, es sieht aber nach wie vor doof aus...
Der IE nimmt den Wert "Padding Top" einfach nicht an... :(

Hast du/jemand anders noch einen Tip? :)

threadi · 10 März 2011

Hast Du dir denn meinen Tipp schon angeschaut?
Und bastel nicht an so vielen "Hacks" herum. Den IE kann man auch ohne so viel Spielerei einigermaßen zufrieden stellen, wenn man sauberen Code schreibt - ohne "!" und Konsorten.

Lisa · 13 März 2011

Hi Threadi,
ja ich habe mir das angeschaut.. aber so richtig schlau werde ich daraus nicht.

Kann ich im Boxmodell nur eine mittige positionierung erreichen durch den wert "padding" ?
brauche ich jetzt eine browserweiche?

:( komme einfach nicht weiter.. hilfeeee :)

threadi · 13 März 2011

Eine Zentrierung von Blockelementen erreicht man mit "margin: 0 auto;". Das klappt auch in jedem IE seit Version 6 solange man einen gültigen Doctype hat.

Hab leider keinen IE hier um das selbst zu testen.

Lisa · 14 März 2011

Hi Threadi,
dein Tip mit "margin: 0 auto;" hat geklappt.
Zusätzlich musste ich noch in den verschachtelten DIVs den Wert "width" rausnehmen.

Habe hier eine gute Erklärung gefunden:

Das Boxmodell-Chaos, Demonstration und Lösungsansatz

Wenn man den Internet Explorer nicht auf seinem Rechner hat,
kann man auch wunderbar den NETrenderer benutzen.
Hier der Link:

IE NetRenderer - Browser Compatibility Check -

Nochmal vielen Dank für die hilfreichen Tips!
Daumen hoch :)! :*

Divs IM IE7 verschoben

Lisa

Neues Mitglied

Lisa

Neues Mitglied

threadi

Moderator

Lisa

Neues Mitglied

threadi

Moderator

Lisa

Neues Mitglied

threadi

Moderator

Lisa

Neues Mitglied

threadi

Moderator

Lisa

Neues Mitglied

Neueste Beiträge