✔ Anzeige-probleme in IE als auch in FF

davey · 8. April 2005

Hi zusammen,

Im Vorraus schonmal: Ich bin ein totaler CSS newbie

! Und dies ist auch einer meiner ersten Versuche ein design basierend auf CSS zu gestalten. Genug der Worte:

Zu den Problemen:
Ich habe im wesentlichen 4 DIV-elemente: #Rahmen, #header, #left, #content.

Internet Explorer:
Sie werden auch alle an der richtigen Stelle angezeigt, doch rechts von div-element #content wird teilweise die Hintergrund-farbe vom #Rahmen angezeigt.
Ich möchte aber nicht die Hintergrund-farbe des #content dem des #Rahmen anpassen. Hier das Bild

FireFox:
Im div-element #left habe ich block-elemente eingefügt um die links meiner Vorstellung nach darstellen zu können. Hier werden die ersten beiden Links übereinander angezeigt.
Hier das Bild

Ich hoffe ihr könnt mir weiterhelfen, denn ich bin völlig verzweifelt Danke im Vorraus

CSS-code:

Code:

#rahmen{
background-color:#D1E349;
position: absolute;
left: 50%;
width: 650px;
margin-left: -325px;
border: 1px solid #000000;}

#header{
background-color:#FFFFFF;
width:650px;
border: 0px solid #000000;
border-bottom:1px solid #FFFFFF}

#link_head{
float:left;
background-image:url(sidebar.gif);
width:244px;
height:28px;
border:0px solid #000000;}

body{
background-image:url(bg_main.gif)}

#left {
background-color:#D1E349;
width:37.6%;
float:left;
border:0px solid black;
border-top:1px solid #FFFFFF;}

#content {
background-color:#FFFFFF;
width:62.4%;
float:right;
border:0px solid black;
border-top:1px solid #FFFFFF;}

a.block{
color:#008030;
background:#D1E349;
display:block;
text-align:center;
width:244px;
height:28px;
border-bottom:1px solid #C3DC3A}

a.block:hover{
color:#008030;
background-color:#C3DC3A;}

HTML-code:

Code:

<div id="rahmen">

	<div id="header">
	<img src="header.gif" width="650" height="125" border="0" alt="OSZ Banken und Versicherungen">
	</div>

	<div id="left">

		<div id="link_head">
			Menü
		</div>

		<a href="index.html" class="block">Home</a>
		<a href="chronik.html" class="block">Chronik</a>
		<a href="akt.html" class="block">Aktuelles</a>
		<a href="bg.html" class="block">Bildungsgänge</a>
		<a href="fb.html" class="block">Fachbereiche</a>
		<a href="lehrer.html" class="block">Lehrer</a>
		<a href="pjkt.html" class="block">Projekte</a>
		<a href="fv.html" class="block">Förderverein</a>
		<a href="links.html" class="block">Links</a>

		<div id="link_head">
			Osz Banken und Versicherungen
		</div>

	</div>

	<div id="content">
	Inhaltliches
	</div>

</div>

Maik · 8. April 2005

Die Gründe für die, von dir beschriebenen, Darstellungsprobleme habe ich in deinem CSS-Source (noch) nicht entdeckt, dafür aber einen anderen Fehler.

ID's können in einem Dokument nur einmal vergeben werden. Wenn du ein DIV mit den gleichen CSS-Eigenschaften in einer Seite mehrmals verwenden willst, dann musst du stattdessen die CSS-Klasse .link_head notieren:

Code:

.link_head{
float:left;
background-image:url(sidebar.gif);
width:244px;
height:28px;
border:0px solid #000000;}

HTML:

<div class="link_head">
   Menü
</div>

<a href="index.html" class="block">Home</a>
<a href="chronik.html" class="block">Chronik</a>
<a href="akt.html" class="block">Aktuelles</a>
<a href="bg.html" class="block">Bildungsgänge</a>
<a href="fb.html" class="block">Fachbereiche</a>
<a href="lehrer.html" class="block">Lehrer</a>
<a href="pjkt.html" class="block">Projekte</a>
<a href="fv.html" class="block">Förderverein</a>
<a href="links.html" class="block">Links</a>

<div class="link_head">
   Osz Banken und Versicherungen
</div>

greez, maik.l

Maik · 9. April 2005

Der Darstellungsfehler im FireFox liegt am float: left; für .link_head.
Um das Problem im IE 6.0 zu beheben, habe ich den DOCTYPE strict.dtd für das Dokument bestimmt.
Somit akzeptiert der IE das Standard-Boxmodell und lässt den Hintergrund rechts neben #content verschwinden.

Mehr Infos zum Thema Boxmodell findest du unter:

CSS4You.de - Boxmodell und Fehlverhalten von IE im Boxmodell >> Peruns Blog.

Hier der korrigierte Source-Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body
{
background-image:url(bg_main.gif);
font-size: 12px;
}

#rahmen
{
background-color:#D1E349;
position: absolute;
left: 50%;
width: 650px;
margin-left: -325px;
border: 1px solid #000000;
}

#header
{
background-color:#FFFFFF;
border: 0px solid #000000;
border-bottom:1px solid #FFFFFF;
}

#left 
{
background-color:#D1E349;
width:37.6%;
float:left;
border:0px solid black;
border-top:1px solid #FFFFFF;
}

.link_head
{
background-image:url(sidebar.gif);
width:244px;
height:28px;
border:0px solid #000000;
}

#content 
{
background-color:#FFFFFF;
width:62.4%;
height: 100%;
float:right;
border:0px solid black;
border-top:1px solid #FFFFFF;
}

a.block
{
color:#008030;
background:#D1E349;
display:block;
text-align:center;
width:244px;
height:28px;
border-bottom:1px solid #C3DC3A;
}

a.block:hover
{
color:#008030;
background-color:#C3DC3A;
}
-->
</style>

</head>
<body>

<div id="rahmen">

        <div id="header">
        <img src="header.gif" width="650" height="125" border="0" alt="OSZ Banken und Versicherungen">
        </div>

        <div id="left">

                <div class="link_head">
                        Menü
                </div>

                <a href="index.html" class="block">Home</a>
                <a href="chronik.html" class="block">Chronik</a>
                <a href="akt.html" class="block">Aktuelles</a>
                <a href="bg.html" class="block">Bildungsgänge</a>
                <a href="fb.html" class="block">Fachbereiche</a>
                <a href="lehrer.html" class="block">Lehrer</a>
                <a href="pjkt.html" class="block">Projekte</a>
                <a href="fv.html" class="block">Förderverein</a>
                <a href="links.html" class="block">Links</a>

                <div class="link_head">
                        Osz Banken und Versicherungen
                </div>

        </div>

        <div id="content">
        Inhaltliches
        </div>

</div>

</body>
</html>

[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

greez, maik.l

davey · 11. April 2005

Jo Danke hat alles supi geklappt, weiß nun auch was es mit dem FF problem auf sich hatte... ich musste einfach bloß die blockelemente nochmal zusätzlich in ein eigenes div-element einfügen....
hihi aber nochmal DANKE michaaa!

Ist echt cool, dass es welche gibt, die einen auch helfen.

Vor dir war ich nich so überzeugt von Foren, aber du hast meine ganze Einstellung gegenüber Foren verändert!

gReetZ aus Berlin vom davey

✔ Anzeige-probleme in IE als auch in FF

davey

Grünschnabel

Maik

Maik

davey

Grünschnabel

Neue Beiträge