✔ Alter IE zerschiesst Design

A

AZUBI09

Mitglied
Hi,

ich habe nen design gemacht in ff und dem neuen IE funktioniert alles.

aber im alten IE ist alles zerschossen.



Hier mal das CSS:

Code: 
@charset "utf-8";
/* CSS Document */

body{
	margin: 0 auto;
	padding: 0;
	color: #CCCCCC;
	background-color: #2d2d2d;

	
}
.bgg{
 	width: 100%;
	height: 50%;
	position: absolute;
	top: 50%;
	background-image: url(../img/verlauf_bg.png);
	background-repeat: repeat-x;
}

.design{
 	width: 100%;
	height: 100%;
}

.leiste-scanline  {
	height: 38px;
	width: 100%;
	margin-top: 11px;
	background:url(../img/leiste_scanline.jpg);
	position: absolute;
	z-index: 1;
}	


.head{
	width: 100%;
	height: 77px;
	margin-top: 10px;
	background:url(../img/head.jpg);
	background-position:center;
	background-repeat: no-repeat;
	position:absolute;
	z-index: 2;
}

.navi {
	width: 100%;
	height: 64px;
	position: absolute;
	padding-top: 120px;
 }

.navibg   {
	width: 967px;
	height: 64px;
	background:url(../img/navi_07.jpg);
}

.navileft   {
	padding-left:0px;
	width: 115px;
	height: 64px;
	background:url(../img/navi_links.jpg);
	background-repeat:no-repeat;
	position: absolute;
	}
	
.naviright   {
	margin-left:851px;
	width: 116px;
	height: 64px;
	background:url(../img/navi_rechts.jpg);
	}
.buttons{
	width: 736px;
	height: 64px;
	background:url(../img/navi_07.jpg);
	margin-left: 115px;
	position:absolute;
	z-index: 11;
}

.content{
	width: 100%;
	height: 488px;
	padding-top: 200px;
	z-index: 3;
	position: absolute;
}

.contentbg{
	width: 967px;
	height: 488px;
	background:url(../img/content_bg.jpg);
	background-repeat: repeat-x;
}

.contentlinks{
	width: 967px;
	height: 488px;
	background:url(../img/content_link.jpg);
	background-repeat: no-repeat;
	position:absolute;
	padding-left: 0px;
}

.contentrechts{
	width: 15px;
	height: 488px;
	background:url(../img/content_rechts.jpg);
	background-repeat: no-repeat;
	position:absolute;
	margin-left: 953px;
}

.contentbox{
	width: 900px;
	height: 435px;
	margin-top: 25px;
	margin-left: 30px;
	z-index:5;
	position: absolute;
	}
	
.contentboxlinks{
	width: 239px;
	height: 435px;
	background:url(../img/content_box_links.jpg);
	position:absolute;
	z-index: 6;
}

.contentboxrechts{
	width: 612px;
	height: 435px;
	background:url(../img/content_box_rechts.jpg);
	position:absolute;
	margin-left: 270px;
	z-index: 6;
}

.inhalt{
	width: 610px;
	height: 370px;
	position: absolute;
	margin-top: 30px;
	margin-left: 20px;
	overflow:auto;
	left: 0px;
	top: 3px;
	z-index: 11;
}

.box_new{
	width: 100%;
	height: 50%;
	position: absolute;
}

.box_new_bottom{
	width: 100%;
	height: 50%;
	position: absolute;
	padding-top: 217px;
}
 
Hi,

dein CSS-Code ist ohne den dazugehörigen HTML-Code nicht aussagekräftig.

Derweil verschiebe ich den Thread ins CSS-Forum, da hier wohl ein CSS-, und kein HTML-Problem vorliegt.

mfg Maik
 
hier noch das html

HTML: 
<body>
<div class="bgg"></div>
<div class="design">
	<div class="leiste-scanline"></div>
  <div class="head"></div>
<div class="navi" align="center">
    	<div class="navibg">
        	<div class="navileft"></div>
            <div class="buttons">
              <a href="index.php"><img src="img/home.jpg" alt="home" width="60" height="64" border="0" style="padding-left: 30px;"/></a>
              <a href="aktuell/index.php"><img src="img/aktuell.jpg" alt="aktuell" width="60" height="64" border="0" style="padding-left: 30px;"/></a>
              <a href="info/index.php"><img src="img/info.jpg" alt="info" width="60" height="64" border="0" style="padding-left: 30px;"/></a>
              <a href="galerie/index.php"><img src="img/galerie.jpg" alt="galerie" width="60" height="64" border="0" style="padding-left: 30px;"/></a>
              <a href="kontakt/index.php"><img src="img/kontakt.jpg" alt="kontakt" width="60" height="64" border="0" style="padding-left: 30px;"/></a>
              <a href="impressum/index.php"><img src="img/impressum.jpg" alt="impressum" width="60" height="64" border="0" style="padding-left: 30px;"/></a>            </div>
          <div class="naviright"></div>
      </div>
     </div>
<div class="content" align="center">
     	<div class="contentbg">
        	<div class="contentlinks"></div>
            <div class="contentrechts"></div>
            <div class="contentbox">
            	<div class="contentboxlinks">
                	<div class="box_new">
                        <img src="img/new_pics.gif" align="left" style="padding-left: 25px; padding-top: 25px;"/>
                        <img src="img/border.png" align="left" style="padding-top: 15px; padding-left: 25px;"/>
                        <img src="img/border.png" align="left" style="padding-top: 15px; padding-left: 15px;"/>
                        <img src="img/border.png" align="left" style="padding-top: 15px; padding-left: 15px;"/>
                        <img src="img/border.png" align="left" style="padding-top: 15px; padding-left: 25px;"/>
                        <img src="img/border.png" align="left" style="padding-top: 15px; padding-left: 15px;"/>
                        <img src="img/border.png" align="left" style="padding-top: 15px; padding-left: 15px;"/>
                    </div>
                    <div class="box_new_bottom">
                    	<img src="img/new_designs.gif" align="left" style="padding-left:25px;"/>
                    </div>
                <div class="contentboxrechts">
                	<div align="left" class="inhalt"><strong>
               	    <span class="Stil1">H</span>erzlich  <span class="Stil1">W</span>illkommen,<br />
                	<br />
                	</strong>Hi<br />
                	<br />
                	</div>
              </div>
            </div>
        </div>
     </div>
</div>
</body>
</html>
 
Ich würde mal sagen, dass der IE6 und IE7 diverse margin-left-Deklarationen anders interpretieren, wie die übrigen Browser, was dazu führt, dass in ihnen alles extrem nach rechts verschoben ist.

Das HTML-Attribut align="center" in den beiden DIV-Blöcken navi und content tut sein übriges dazu, diesen Fehler noch zu verstärken.

mfg Maik
 
Zumindest die Selektoren, in denen die margin-left-Angaben von den beiden IE-Versionen falsch interpretiert werden.

Hierfür bieten sich die Conditional Comments an, um den älteren IEs ihr zusätzliches Stylesheet zuzuführen, in dem die von ihnen fehlerhaft ausgeführten Eigenschaftswerte korrigiert werden.

Somit muß das bestehende CSS auch nicht angerührt werden.

mfg Maik
 
Schau dir nur mal den Unterschied an, wenn hier zu Testzwecken die margin-left-Deklaration auskommentiert ist:
CSS: 
.naviright   {
        /*margin-left:851px;*/
        width: 116px;
        height: 64px;
        background:url(../img/navi_rechts.jpg);
        }
sowie in diesen beiden DIV-Blöcken das Attribut align="center" entfällt:
HTML: 
<div class="navi" align="center"> ... </div>
    	
<div class="content" align="center"> ... </div>

Der Rest wäre dann "Feintuning" :-)

mfg Maik
 
Sodele, ich geh noch einen Schritt weiter, und empfehle dir zum Vergleich dieses CSS für die Navigation, das mit Hilfe der float-Eigenschaft die DIV-Blöcke nebeneinander ausrichtet:

CSS: 
.navi {
        width: 967px;
        height: 64px;
        margin:auto;
        padding-top: 120px;
 }

.navibg   {
        width: 967px;
        height: 64px;
        background:url(../img/navi_07.jpg);
}

.navileft   {
        padding-left:0px;
        width: 115px;
        height: 64px;
        background:url(../img/navi_links.jpg);
        background-repeat:no-repeat;
        float:left;
        }

.naviright   {
        float:left;
        width: 116px;
        height: 64px;
        background:url(../img/navi_rechts.jpg);
        }
.buttons{
        width: 736px;
        height: 64px;
        background:url(../img/navi_07.jpg);
        position:relative;
        float:left;
        z-index: 11;
}

Hab nämlich gerade eben erst gesehen, dass sich der Block naviright nicht dort befindet, wie es der Klassenname eigentlich vermuten lässt :-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück