Darstellungsprobleme im Internet Explorer 8

blizzart88 · 03.03.2011

Halli Hallo,

ich habe mal wieder ein Problem. Und zwar wir mein Layout (diverse div-Boxen) im FF zwar richtig, allerdings im IE 8 vollkommen falsch dargestellt.

Ich habe das komplette Layout mit margin: 0 auto zentriert, aber im IE wird es linksbündig dargestellt.

Hier mal meine CSS-Datei:

Code:

html     {height: 100%;}

body {height: 100%;
     margin: 0%;
      padding: 0%;
     background-color: #000000;
     background-image: url(../images/body-bg.png);
     background-repeat: repeat;
    }

#wrapper{margin: 0 auto;
         width: 960px;
         background-color: #1B1C19;
         border: none;
        }

#header    {width: 960px;
         height: 200px;
         margin: 0;
         background-color: #123000;
         background-image: url(../images/header.jpg);
         background-position: top left;
         border: none;}
         

#inhalt-container    {width: 960px;
                     height: 850px;
                     min-height: 850px;
                     margin: 0;
                     background-color: #1B1C19;
                     border: none;
                     }

#inhalt    {background-color: #1B1C19;
         border: none;}

#footer    {width: 960px;
         height: 200px;
         margin: 0;
         background-color: #1B1C19;
         background-image: url(../images/footer.jpg);
         background-position: top left;
         border: none;
         text-align: right;}



#navi-horizontal    {width: 960px;
                     height: 50px;
                     margin: 0;
                     background-color: #34A357;
                     background-image: url(../images/navi-horizontal.jpg);
                     background-position: top left;
                     border: none;
                    }

#navi-vertikal    {}

#formular     {width: 600px;
             height: 600px;
             background-color: #828282;
             background-image: url(../images/formular-bg.jpg);
             background-position: top left;
             border: 2px dashed #333333;
             }
             
#fehler-container    {margin: 0 auto;
                     margin-top: 50px;
                     margin-bottom: 50px;
                     width: 800px;
                     height: 600px;
                     min-height: 600px;
                     background-color: #1B1C19;
                     background-image: url(../images/404-bg.jpg);
                     background-position: bottom left;
                     border: 2px solid black;
                    }
                
#fehler-left    {width: 300px;
                 height: 600px;
                 background-color: none;
                 border: none;
                 float: left;
                }

#fehler-right    {width: 500px;
                 height: 600px;
                 background-color: none;
                 border: none;
                }            

#clearleft    {clear:left;}

#clearright    {clear:right;}

#clearboth    {clear:both;}

p    {font-family: Courier New, monospace;
     font-size: 14px;
     color: #384505;}
     
.textrechts     {font-family: Courier New, monospace;
             font-size: 11px;
             color: #4F5E13;
             text-align: right;
             margin-right: 10px;
            }
             
.textrechts404    {font-family: Courier New, monospace;
                 font-size: 11px;
                 color: #4F5E13;
                 text-align: right;
                 margin-right: 10px;
                 margin-top: 580px;
                }

h1    {font-family: Courier New, monospace;
     color: #384505;}

h2    {font-family: Courier New, monospace;
     color: #384505;}

h3    {font-family: Courier New, monospace;
     color: #384505;}

h4    {font-family: Courier New, monospace;
     color: #384505;}

h5    {font-family: Courier New, monospace;
     color: #384505;}

h6    {font-family: Courier New, monospace;
     color: #384505;}

a    {font-family: Courier New, monospace;
     font-size: 14px;
     font-weight: bold;
     text-decoration: none;
     color: #5C7300;
    }

a:hover    {font-family: Courier New, monospace;
         font-size: 14px;
         font-weight: bold;
         text-decoration: underline overline;
         color: #BF8600;
        }
         
a.footer    {font-family: Arial, serif;
             font-size: 10px;
             font-weight: bold;
             text-decoration: none;
             color: #5C7300;
            }

a.footer:hover    {font-family: Arial, serif;
                 font-size: 10px;
                 font-weight: bold;
                 text-decoration: underline overline;
                 color: #BF8600;
                }
                 
label    {font-family: Courier New, monospace;
     font-size: 14px;
     font-weight: bold;
     color: #FFFFFF;
     }
     
legend    {font-family: Courier New, monospace;
         font-size: 14px;
         font-weight: bold;
         color: #FFFFFF;
        }
         
.search    {border: none;
         height: 16px;
         background-color: #FFFFFF;
         background-image: url(form-bg.jpg);
         color: #70A300;
         font-size: 10px;
         font-weight: bold;
         font-family: Arial, serif;
        }
         
.input1    {width: 300px;
         height: 22px;
         border: 1px solid #000052;
         font-family: Arial, sans-serif;
         color: 00008C;
         font-size: 12px;
         background-image: url(../images/input1-bg.jpg);
         background-color: CFF9FF
        }
        
.senden    {border: 1px solid #000052;
         height: 16px;
         background-color: #FFFFFF;
         background-image: url(form-bg.jpg);
         color: #70A300;
         font-size: 10px;
         font-weight: bold;
         font-family: Arial, serif;
        }
         
         
.textarea1    {width: 600px;
             height: 600px;
             border: 1px solid #000052;
             font-family: Arial, sans-serif;
             color: 00008C;
             font-size: 10px;
             background-image: url(../images/textarea1-bg.jpg);
             background-color: CFF9FF
            }

und meine Index.php

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title></title>

<link rel="stylesheet" type="text/css" href="css/css.css">

<link rel="icon" href="../../favicon.ico" type="image/ico">


</head>


<body>

<div id="wrapper">
    
    <div id="header">
    </div>
    
    <div id="navi-horizontal">
    </div>
    
    <div id="inhalt-container">
    <h3>Test</h3>
    </div>
    
    <div id="footer">
    
        <p class="textrechts"><b>&copy;</b> <?php echo date(Y); ?> | <a class="footer" href="http://www.imperium-bomanum.de" target="_self">IMPERIUM-BOMANUM.DE</a></p>
        
    </div>
    
</div>




</body>
</html>

Ich verzweifel hier noch. Wie krieg ich das im IE genauso hin, wie im FF.

Dank im Voraus.

maxderboss · 03.03.2011

AW: Darstellungsprobleme im Internet Explorer 8

Versuch es mal mit einem text-align: center; im body

das könnte funktionieren.

Gruß, Max

blizzart88 · 03.03.2011

AW: Darstellungsprobleme im Internet Explorer 8

Das klappt, danke!

Muß ich jetzt für jedes Element das text-align definieren, damit der Text richtig dargestellt wird?

MegaAdi · 03.03.2011

AW: Darstellungsprobleme im Internet Explorer 8

body {height: 100%;
margin: 0%;
padding: 0%;
background-color: #000000;
background-image: url(../images/body-bg.png);
background-repeat: repeat;
}

Probier da mal das margin: 0%; durch margin: 0 auto; zu ersetzen
margin = ausenabstand zwischen den Elementen,
erste Zahle = Abstand von Oben und Unten,
zweite Zahl (in diesem Fall auto) = Abstand von Rechts und Links.

Um auto verwenden zu können gib deinem body am besten eine fixe Breite.

Gruß Adrian

Doitsu · 03.03.2011

AW: Darstellungsprobleme im Internet Explorer 8

blizzart88 schrieb:
Muß ich jetzt für jedes Element das text-align definieren, damit der Text richtig dargestellt wird?

Nein, du musst nur im wrapper den Text wieder nach links richten.