• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite sieht auf Firefox unschön aus

Cola_Colin

Neues Mitglied
Ich hab meiner Mutter zum Geburtstag ihre eigene Website gebaut, das ist die erste Website die ich je gebaut hab, sie hatte sich eine gewünscht.
Da ich der Computerfreak der Familie bin, eben von mir.

So nun hab ich also die Website schonmal in den Grundzügen fertig:
Website von Gefion Clausen


Das Problem ist nun, das die Seite mit Opera und dem IE soweit fast identisch aussieht, aber Firefox verschiebt einiges doch ziemlich.

Ich hab keine Ahnung, wieso das so ist :(

Hier mal das css von der Seite:

Code:
body {
	background-image: url("kachelschiff.jpg");    
	margin-top: 15px;
	margin-right: 100px;
	margin-left: 100px;
	margin-bottom: 15px;
}	

#cT {
    position:absolute;
	width: 845px;
	top: 165px;
    left: 325px;
	height: 650px;
}

#links {
	position: absolute;
	width: 225px;
	top: 165px;
	left: 100px;
	height: 650px;
}

#bannerImg{
	background-image: url("t.jpg");
	background-repeat: no-repeat;
	width: 1070px;
	background-position: 50% 25%;
	height: 150px;
	position: absolute;
	top: 15px;
	left: 100px;
	border-style: solid;
	border-width: 5px;
	border-color: #FFF2C6;	
}

#foto{
	position:absolute;
	top: 350px;
	left: 115px;
	width: 195px;
}

#bookimg{
	float: right;
	width: 380px;
	height: 540px;
}

#booklink{
	float: left;
	margin-left: 5px;
	width: 155px;
	height: 230px;
}

#name{
	position: absolute;
	top: 300px;
}

#upperTextChooseBook{
	position: absolute;
	top: 180px;
	width: 795px;
	left: 335px;
	height: 150px;
    font-size:25px;		
}

#bookBar{
	position: absolute;
	top: 360px;
	left: 335px;
	width: 820px;
	height: 240px;
}

#bottomTextChooseBook{
	position: absolute;
	top: 625px;
	left: 335px;
	width: 795px;
    font-size:25px;		
}

p.text {
	background-color: #FFE68C;
	border-style: solid;
	border-width: 5px;
	border-color: #FFF2C6;
    font-size:25px;	
}

div.linkbox {
	background-color: #FFD953;
	border-style: solid;
	border-width: 5px;
	border-color: #FFF2C6;
}

a.linkboxlink {
	float:left;
	background-color: #FFD953;
	width: 195px;
	text-align: center;
	margin-bottom: 5px;
}

Soweit ich das verstehe, bewertet Firefox die Positions angabe Top: 165px von der ID cT und der ID links einfach verschieden ?!

Ich blicke da nicht durch, wieso ist das so ?

Soweit ich das sehe, werde ich einen Fehler gemacht haben und der wird von jedem Browser anders bewertet ?
 
Setz den Teil, in dem der Text steht, und in dem DAs bild ist doch einfach in einen Iframe, und lass die Seite auf der der Iframe liegt das momentane Hintergrundbild haben...
dann setzt du eine feste Größe Fest und alles läuft!!

Ich würde auch die Schriftgröße verändern und die Schriftart verändern!!

Wenn du willst, kannst du mir die Dateien ja mal per Skype schicken und dann bau ich dir das man zusammn... ;)
Skypename: Flemli200

Flemming
 
Lass die absoluten Positionierungen weg, die brauchst du nicht, das schafft man ganz einfach mit float, Abstände macht man mit margin und padding.

Ein Iframe löst hier keins deiner Probleme, es bringt dir und deinen Besuchern nur weitere Probleme.

okay...
darf ich die site so verändern, das die datei Styles.css nicht mehr greift und die Site auf frames (altmodisch) aufbaut??
Arbeite nämlich nich so gerne mit Stylesheets!!
Dann lass es lieber gleich, das sind veraltete und sehr schlechte Arbeitsweisen. Semantisch korrektes HTML und CSS für das Layout sind der Schlüssel.
 
wenn es danach funktioniert, sicher doch xD

Ein paar css elemtene würde das ja nicht ausschließen ? oder muss dann alles neuaufgebaut werden ?


EDIT:
die gesamte Seite mit float aufbauen ? iframe produziert mehr probleme ?
Nungut, ich schaue mir mal an wie das mit float genau funktioniert.
 
Zurück
Oben