Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[FF vs. IE6] Kleine Probleme mit den Div´s“

Sc_Grafix

Nicht mehr ganz neu hier

Moin.

Ich hab mal wieder zwei kleine Probleme mit meinen Div´s bei der Darstellung im FF sowie/oder im IE6...

Im Firefox werden die Div´s richtig positioniert, bis auf den Contend Div, der sollte eigentlich 5px weiter oben stehen, tut er aber nicht...:(
Ich denke das Problem wird von den Floats, bzw. dem Clear her rühren...



Im Ie werden leider alle Div´s mehrere px nach unten verschoben, aber hier passt wieder der abstand zwischen dem Contend Div und den darüber liegenden Div´s...:(



Hier mal mein HTML:
HTML:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PastellCrossTemp</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    <div id="wrapper">
        <div id="head"></div>

        <div id="nav">
            <a href="index.html" target="_self">Link 1</a><br /><br />
            <a href="index.html" target="_self">Link 2</a><br /><br />
            <a href="index.html" target="_self">Link 3</a><br /><br />
            <a href="index.html" target="_self">Link 4</a><br /><br />
            <a href="index.html" target="_self">Link 5</a><br /><br />
        </div>

        <div id="ban"></div>

        <div id="name"></div>

        <div id="contend">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.</p>
        </div>

        <div id="foot"><center><span class="foottxt">&copy; 2010 <a href="index.html" target="_self">PastellCrossTemp</a> Design by: <a href="http://www.sc-grafix.de.vu" target="_blank">Sc-Grafix</a></span></center></div>
    </div>


</body>
</html>
sowie CSS:
Code:
/* === © 2010 PastellCrossTemp Design by: Sc-Grafix === */


body {
        font-family: "Courier New", Courier, monospace;
    font-style: normal;
    font-variant: normal;
        color: #FFFFFF;
        font-size: 0.75em;
    background-image: url(img/bg.jpg);
    background-repeat: repeat-x;
    background-color: #f7dbb3;

}

a:link {color: #f7dbb3; text-decoration:none}
a:visited {color: #f7dbb3; text-decoration:none}
a:active {color: #f7dbb3; text-decoration:none}
a:hover {color: #9c9f84; text-decoration:underline}

#wrapper {
    width: 850px;
    margin: 0 auto;
}

#head {
    width: 550px;
    height: 64px;
    margin-left: 210px;
    border: solid 5px;
    border-color: #ffffff;
}

#nav {
    width: 195px;
    height: 249px;
    margin-top: -5px;
    padding-top: 5px;
    padding-left: 10px;
    float: left;
    border: solid 5px;
    border-color: #ffffff;
}

#ban {
    width: 550px;
    height: 254px;
    margin-top: -5px;
    margin-left: -5px;
    float: left;
    border: solid 5px;
    border-color: #ffffff;
}

#name {
    width: 75px;
    height: 254px;
    margin-top: -5px;
    margin-left: -5px;
    float: left;
    border: solid 5px;
    border-color: #ffffff;
}

#contend {
    width: 530px;
    margin-top: -5px;
    margin-left: 210px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    clear: left;
    border: solid 5px;
    border-color: #ffffff;
}

#foot {
    width: 550px;
    margin-top: -5px;
    margin-left: 210px;
    margin-bottom: 50px;
    clear: left;
    background-color: #ffffff;
    border: solid 5px;
    border-color: #ffffff;
}

.foottxt {
      color: #a97e5e;
}


/* === © 2010 PastellCrossTemp Design by: Sc-Grafix === */
Hoffe mir kann einer von euch helfen!!!
 

leohh

CSS verliebt

AW: [FF vs. IE6] Kleine Probleme mit den Div´s

Im Firefox werden die Div´s richtig positioniert, bis auf den Contend Div, der sollte eigentlich 5px weiter oben stehen, tut er aber nicht...:(
Na ganz einfach, fuer den content gibst du nach der allgemeinen Borderdefinition einfach ein border-top: none;

IE 6 nutz ich nicht und kann dazu dann auch nichts sagen.
 

sokie

Mod | Web

AW: [FF vs. IE6] Kleine Probleme mit den Div´s

vielleicht solltest du in der cs einfach dafür sorgen, dass die Browser gleiche Ausgangsbedingungen haben:
Code:
*{
    padding: 0;
    margin: 0;
}
 

Ladyan

Nicht ganz neu hier

AW: [FF vs. IE6] Kleine Probleme mit den Div´s

Setz mal ganz oben in deine CSS-Datei:

Code:
* {
      margin: 0;
      padding: 0;
}
ein, das löst zumindest schonmal den Abstand im Firefox.

Edit: Oh, vergessen zu aktualisieren, bin schon zu spät
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben