XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE7 Problem margin wird ignioriert (http://xhtmlforum.de/showthread.php?t=44609)

danliker 21.02.2007 14:28

IE7 Problem margin wird ignioriert
 
Ich baue gerade eine neue Seite, diesmal möchte ich keine Tabellen verwenden.

Nun, denn der Firefox, Opera und der IE6 machen dass, was ich gerne hätte nur der IE7 will nicht....

liveauction.ch

Das Problem ist die dunkle Box (<div id="content">)mit dem Inhalt, im IE7 klebt diese am oberen Rand anstelle der 30px Abstand. Hat mir jemand einen Tip woran das liegen könnte ?

mein css:

Code:

html
{
        background-image: url(/images/verlauf.gif);
        background-repeat: repeat-y;
        background-color: rgb(136,162,148);
        margin: 0px;
        padding: 0px;
}

body
{
        font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
        font-size: 11px;
        margin: 0px;
        padding: 0px;
        color: white;
}

H1
{
        margin: 0px;
        margin-bottom: 4px;
        padding: 3px;
        font-size: 13px;
}

img
{
        border: 0px;
        margin-top: 3px;
        margin-bottom: 3px;
}

#head
{
        overflow:hidden;
        width: 100%;
        height: 70px;
        border-bottom: 1px solid white;
}

#logo
{
        float: left;
        padding-top: 30px;
        padding-left: 10px;
}

#date
{
        padding-top: 46px;
        padding-right: 10px;
        float: right;
}

#nav
{
        clear: both;
        position: absolute;
        left: 0px;
        width: 150px;
        margin: 30px 15px 10px 15px;
        padding: 0px;
}

#nav ul
{
        margin: 0px;
        padding: 0px;
        list-style-type: none;
}

#nav li
{
        border-top: solid 1px white;
        border-right: solid 1px white;
        border-bottom: solid 1px rgb(77,73,72);
        border-left: solid 1px rgb(77,73,72);
}

#nav A, #nav A:LINK, #nav A:ACTIVE, #nav A:VISITED
{
        padding: 3px;
        display: block;
        background-color: rgb(75,102,86);
        color: white;
        text-decoration: none;
}

#nav A:HOVER
{
        padding: 3px;
        display: block;
        background-color: rgb(120,138,133);
        color: rgb(31,26,23);
        text-decoration: none;
}

#content
{
        margin: 30px 10px 10px 180px;
        padding: 10px;
        overflow: auto;
        background-color: rgb(56,42,49);
        border-top: solid 1px rgb(77,73,72);
        border-right: solid 1px rgb(77,73,72);
        border-bottom: solid 1px white;
        border-left: solid 1px white;
}

#foot
{
        clear: both;
        float: left;
        margin-left: 180px;
        padding: 0px;
//ev. fix für spezial IE bug, mal testen im ie6 display: inline;
}

/* start nur für den IE \*/

* html #foot
{
        margin-left: 90px;
}

/* end nur für den IE */


#copy
{
        float: right;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 10px;
        padding: 0px;
}

#valid
{
        clear: both;
        border-top: dotted 1px red;
        text-align: center;
}

A
{
        color: white;
        text-decoration:none;
}

A:LINK, A:ACTIVE, A:VISITED
{
        color: white;
        text-decoration: none;
}

A:HOVER
{
        color: rgb(31,26,23);
        text-decoration:none;
}

Danke und Gruss
Daniel

danliker 22.02.2007 10:39

das habe ich noch vergessen zu erwähnen diplay:inline beim content habe ich schon versucht, dann wirds noch schlimmer ....

danliker 23.02.2007 12:31

Ich weiss nicht weshalb, aber ein zusätzliches <span style="clear:both"></span> nach dem div head hat das Problem gelöst, der IE scheint das clear des div nav zu ignorieren.

würde mich über eine Erklärungen freuen...

Gruss
Daniel

mazzo 23.02.2007 13:13

Die Links im FAQ-Thread, Punkt 2, erklären das Verhalten von float und clear und wie der IE das falsch macht.

danliker 23.02.2007 13:40

Habe ich ja gelesen, mir ist bewusst das er ein clear:both braucht, aber das es 2 hintereinander benötigt damit er es korrekt darstellt ist für mich nicht nachvollziehbar ....

fricca 23.02.2007 13:51

Das clear in #nav ist wirkungslos weil absolut positioniert.
Das clear des span ist auch wirkungslos, da nur Blockelemente clear-Funktion haben können. Was der IE7 mit dem span macht, weiß ... der Geier.

Ändert sich im IE7 was, wenn du dem #head einen unteren margin gibst (statt den nachfolgenden Elementen einen oberen)?

danliker 23.02.2007 14:17

ich habe nun den span entfernt und ein margin-bottom im #head hinzugefügt sowie die margins im #nav und #content angepasst, nun ist es im ie7 gut, dafür im ff nicht mehr ...

fricca 23.02.2007 14:20

Mach Positionsangaben, wenn du absolut positionierst (top/left ...).


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:20 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020