Thread: CSS Problem(e)

Tags: CSS

Seite 1 von 2

20.05.2006 11:36 Uhr

webspace4free

Status: offline

Moin Moin! :)

Ich bastel grad am Design meiner neuen Homepage und habe 2 Probleme mit CSS. :sad:

Ausnahmsweise stellt der Firefox mal was nicht richtig da, dafür der IE. Bei dem anderen Problem ist es - wie gewohnt - umgekehrt. :wink:

1. Der FF mag scheinbar den CSS Befehl "margin-top" nicht. Der wird einfach nicht beachtet... (Roter Kreis). Im IE sieht es allerdings so aus wie es sein soll.

2. Unter der Footer Grafik wird noch ein Stück der Background Grafik angezeigt. Im FF dagegen ist alles in Ordnung. (Roter Kreis)

Der Code:
style.css

PHP:

 
body {
margin-top:25px;
padding:0;
background-image:url(images/background.gif);
background-color:#123454;
background-repeat: repeat-x;
}
#header {
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:152px;
}
#main {
width:700px;
background-image:url(images/body_background.jpg);
text-align:left;
}
#content {
margin-left:7px;
}
#footer {
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
height:13px;
}
#logo {
margin-top:15px;
margin-left:10px;
height:30px;
width:100px;
border:1px solid black;
}

index.html

PHP:

 
<!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=iso-8859-1" />
<title>de | Online Community</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
 
<body>
<div align="center">
<div id="main">
      <div id="header">
            <div id="logo">bla</div>
      </div>
      <div id="content">
      bla
      </div>
      <div id="footer"></div>
</div>
</div>
</body>
</html>

greetz und danke im Vorraus. :)

1 mal bearbeitet

20.05.2006 18:16 Uhr

boandlkramer

Status: offline

Zitat:
1. Der FF mag scheinbar den CSS Befehl \"margin-top\" nicht.

Der Firefox sollte margin-top auf jedenfall beherschen.

Zitat:
2. Unter der Footer Grafik wird noch ein Stück der Background Grafik angezeigt.

So wie es aussieht, ist das noch ein Überbleibsel vom \"header\". Beim FF sieht die Schrift etwas größer aus als im IE. Vermutlich wird deshalb dann der \"footer\" im IE nicht so groß dargestellt wie im FF.

Sollte dir das nicht weiterhelfen, schick mir mal einen Link zu den Images. Dann schau ich es mir genauer an.

___________________________
http://www.georgkainzbauer.de --- http://www.gtkdb.de

20.05.2006 18:37 Uhr

webspace4free

Status: offline

naja, dein erster Tipp bringt mich nicht so unbedingt weiter. *g*

20.05.2006 20:23 Uhr

Gelöscht #536

Status: offline

Es ist dir bestimmt schon aufgefallen, aber der FF interpretiert in deinem Script den margin-top net auf den oberen Teil der Headers sondern auf den ganz oberen Rand der Seite. Das kannst du (falls du es noch nicht bemerkt hast) auch ganz einfach sehen, indem du für margin-top einmal 100px angibst. Dann rutscht alles weiter runter.

20.05.2006 20:30 Uhr

webspace4free

Status: offline

hm...wo du es so schreibst fällt es mir auch auf *g*
aber wie soll ich die divs jetzt anordnen?
wenn ich das Logo div in das header div setze wird das header div nach unten gezogen.
wenn ich das ganze davor platziere wird alles nach unten gezogen und ein undefinierbares bilderdurcheinander entsteht...

20.05.2006 20:38 Uhr

Gelöscht #536

Status: offline

mmhh Die Technik is zwar jetzt scheiße aber sie hilft vllt jemandem anderen weiter das Problem zu finden. Wenn man ne Tabelle vor den Logo <div> baut klappt es:

Also meine Erkenntnis ist: Es muss ein Content vor das Logo. Könntest zB nen gleichfarbigen text nehmen wie den Hintergrund. Oder du baust irgendwas unsichtbares ein. (Ich verusch mal weiter die richtige Lösung zu finden)

PHP:

<body>
 
<div align=\"center\">
 
 
<div id=\"main\">
      <table>
            <tr><td></td></tr>
      </table>
                  <div id=\"logo\">
                        LOGO
                  </div>
 
    <div id=\"content\">
 
    bla
 
    </div>
 
    <div id=\"footer\"></div>
 
</div>
 
</div>
 
</body>

OK. Meine 2. Idee ist einfach in der CSS was zu schreiben àla:

PHP:

#blocker
 
{
 
height: 10px;
 
}

Das kannst du dann in der html vor das Logo bauen. so:

PHP:

<body>
 
<div align=\"center\">
 
 
<div id=\"main\">
      <div id=\"blocker\">
      </div>
                  <div id=\"logo\">
                        LOGO
                  </div>
 
    <div id=\"content\">
 
    bla
 
    </div>
 
    <div id=\"footer\"></div>
 
</div>
 
</div>
 
</body>
 
</html>

20.05.2006 20:45 Uhr

webspace4free

Status: offline

das bringts beides nicht so wirklich...
Tabellen möchte ich auf gar keinen Fall verwenden und ein \"Überbrückungs Div\" ist auch nicht das wahre.

20.05.2006 21:13 Uhr

Gelöscht #536

Status: offline

Jetzt hab ich ne neue Technik gefunden.

Du schreibst dein Logo als float: left; und beendest das float in content wieder mit clear: left;

Sieht dann so aus:

PHP:

#content {
 
margin-left:7px;
 
background-color:gray;
 
clear: left;
 
}
 
#logo {
 
margin-top:15px;
 
margin-left:10px;
 
height:30px;
 
width:100px;
 
border:1px solid black;
 
background-color:purple;
 
float: left;
 
}

Mhh... Irgendwie au net toll. Der IE zieht das Logo dann immer weiter nach rechts als der FF

20.05.2006 21:16 Uhr

webspace4free

Status: offline

super, funktioniert fast perfekt.
leider sind sich IE und FF in der verschiebung noch nicht ganz einig.
der IE zeigt das ganze weiter rechts an als der FF.

20.05.2006 21:30 Uhr

Gelöscht #536

Status: offline

Jetzt wird die Lösung unschön aber ich kann mir vorstellen, dass du mal weitermachen willst. Vorerst kannst mal diesen Teil schreiben. Der IE liest den Teil vor dem der * ist noch, der FF nicht. Du trägst einfach in den Teil des IE Den halben Wert ein, dann funktioniert es. Die Lösung ist jetzt zwar total behindert, aber funktioniert wenigstens mal. Vllt findet sich ja noch eine, die eher offiziell ist. (Ich kenn mich nämlich mit CSS net sehr gut aus)

PHP:

#logo {
 
margin-top:10px;
 
margin-left: 10px;
 
* margin-left: 5px;
 
height:30px;
 
width:100px;
 
border:1px solid black;
 
background-color:purple;
 
float: left;
 
}

Seite 1 von 2

Ähnliche Threads	Forum	Ähnlichkeitsgrad
float - IE und Firefox	Website & Webprogrammierung	1
CSS Menü	Website & Webprogrammierung	1
[gelöst] externe css "zerschießt" Design	Website & Webprogrammierung	1
Neues eBook: CSS	eBooks	1
Navigation mit CSS / aktiver Link	Website & Webprogrammierung	1
CSS Navi mit ul und li einrücken	Website & Webprogrammierung	1
myPortfolio coden...?!	Website & Webprogrammierung	1