[CSS] IE: 10px in x-Richtung sind länger als 10px in y-Richtung

Quidoff · 5. September 2005

Warum werden im IE 10px in x-Richtung länger dargestellt als 10px in y-Richtung? Weiter unten sieht man den Beispiel-Code.
Hier mal Screenshots für alle, die keinen IE haben.

Internet Explorer 6:

Firefox 1.0.6:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
<!--
body {
    color: #000000;
    background-color: #FFFFFF;
    border: none;
    margin: 0;
    padding: 0;
}

#sidebar {
    width: 120px;
    border: solid 1px #000000;
    float: left;
    padding: 0;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 0;
    margin-right: 0;
}

#main {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 131px;
    color: black;
    background: white;
    padding-left: 20px;
    padding-bottom: 0;
    border-left: 1px solid #999999;
}

//-->
</style>
<title>Navi</title>
</head>

<body>
<div id="sidebar">Text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/></div>
<div id="main">text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/></div>
</body>

PuppetMaster · 5. September 2005

Das Problem scheint mit dem float:left; zusammenzuhängen. Ich hab jetzt keine Erklärung gefunden; du kannst es aber umgehen, indem du die Navileiste absolut positionierst:

HTML:

body {
    margin: 0;
    padding: 0;
}

#sidebar {
    width: 120px;
    border: 1px solid #000;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 10px; left: 10px;
}

#main {
    margin: 0 0 0 131px;
    padding-left: 20px;
    padding-bottom: 0;
    border-left: 1px solid #999;
}

/edit
Das hat natürlich auch den Vorteil, dass du die Navileiste im Quelltext unten anbringen kannst, wodurch Suchmaschinen erst den Inhalt des Main-Containers auslesen. So taucht auf Google in der Suchergebnisbeschreibung dein Content auf, und nicht deine Navileiste.

Quidoff · 5. September 2005

Danke für die Antwort. An eine absolute Positionierung hab ich auch schon gedacht und ich hab es jetzt einfach mal so gelöst. Jetzt würde mich natürlich das Problem mit dem float: left; interessieren. Woran liegt das?

KoЯn

Suche

[CSS] IE: 10px in x-Richtung sind länger als 10px in y-Richtung

Quidoff

Lieutenant

PuppetMaster

Admiral Pro

Quidoff

Lieutenant

Ähnliche Themen