nicht angemeldet
Ewiges Thema: Positionierung IE u Firefox
StruppiHallo,
ich habe nun (wie ich dem Rat vieler Foren, etc.) entnehmen konnte mehrere Stunden probiert und komme nicht auf eine vernüftige Lösung.
Ich habe folgendes Problem: IE und Firefox (eigentlich Firefox) interprtieren mein CSS unterschiedlich. Da ich verzweifle und der Blick eines Prosfis wahrschenlich reicht, hier:
Auszug aus dem CSS:
body {font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
margin:0px;
padding:0px;}
#haupt {position:absolute; ///mein Hauptfenster
width: 700px;
top:20px;
left: 35%;
margin-left: -200px;
height: 700px;
font-size:11px;
}
#con1 { ///Textblock
margin:0;
position:absolute;
top: 230px;
left: 8px;
width: 263px;
height: 281px;
}
#vertline { ///Trennlinie
position:absolute;
top: 230px;
left: 276px;
}
#fppic { ///Bild
position:absolute;
top: 230px;
left: 283px;
}
#news { ///Bildunterschrift
position:absolute;
top: 406px;
left: 284px;
width: 411px;
height: 104px;
}
--------------------------------
Testblock, Trennlinie und Bild sollten auf einer Höhe sein. Trennlinie und Bild werden von IE und Firefox auf einer Höhe dargstellt - Textblock ist so um die 10 px tiefer. Auch die Bildunterschrift ist bei IE richtig, bei Firefox ebenfalls 10 px tiefer.
Danke für jede Hilfe,
lieben Gruß
Timo
-
Ich habe folgendes Problem: IE und Firefox (eigentlich Firefox) interprtieren mein CSS unterschiedlich. Da ich verzweifle und der Blick eines Prosfis wahrschenlich reicht, hier:
nein, ohne HTML wird es schwierig. Welchen DOCTYPE verwendest du? Ist dein HTML valide?
und dann sollte man mit position:absolute sehr sparsam umgehen, es ist weder nötig noch besonders sinnvoll mit CSS alle Elemente zu positionieren, darüber hinaus auch nicht einfach.Testblock, Trennlinie und Bild sollten auf einer Höhe sein. Trennlinie und Bild werden von IE und Firefox auf einer Höhe dargstellt - Textblock ist so um die 10 px tiefer. Auch die Bildunterschrift ist bei IE richtig, bei Firefox ebenfalls 10 px tiefer.
Wenn etwas im IE anders ist als im FF (oder noch besser Opera) kannst du in 99% der Fällen davon ausgehen, dass der IE etwas falsch macht. Dessen zahlreiche Bugs führen oft zu falschen Darstellung.
Struppi.
-
zumindest meine standartlösung für dieses problem ist mehrere css dateien zu schreiben.
eine css datei für alle browser(inwelcher etwa 99% des css steht) und falls ein bestimmer browser(normalerweise IE) probleme hat irgentetwas korrekt darzustellen dann korregiere ich das in einer ie.css die von anderen browsern ignoiert wird
zB. so:
<link rel="stylesheet" type="text/css" media="print" href="main.css" />
<!--[if IE 6]><style type="text/css">@import "ie6.css";</style><![endif]-->
<!--[if IE 7]><style type="text/css">@import "ie7.css";</style><![endif]-->ich habe die Erfahrung gemacht das diese methode die sauberste und bequeste methode ist browserspezifische fehler zu beheben. um fehler im opera oder safari zu beheben muss man etwas ähnliches mit php machen aber das ist eher selten nötig
hoffentlich war ich hilfreich
-
-
Danke Struppi, danke Öle für die Antworten.
Verstehe ich das richtig, dass bei:
<!--[if IE 6]><style type="text/css">@import "ie6.css";</style><![endif]-->
<!--[if IE 7]><style type="text/css">@import "ie7.css";</style><![endif]-->sich der richtige Browser direkt angesprochen fühlt, oder was muss ich über das CSS steuern, damit IE6 oder IE7 wissen, dass sie gemeint sind... Also impliziert [if IE 6] dem IE 6, dass er das dann folgende ie6.css öffnen soll...
Gruß
und Dank nochmal!-
sich der richtige Browser direkt angesprochen fühlt, oder was muss ich über das CSS steuern, damit IE6 oder IE7 wissen, dass sie gemeint sind... Also impliziert [if IE 6] dem IE 6, dass er das dann folgende ie6.css öffnen soll...
wie du sicher weisst bedeutet <!-- das alles was zwischen diesen klammern steht von jedem browser ignoriert wird -->
wenn du hingegen <!--[if IE 6]> schreibst wird alles was in den klammern steht von alles browsern ausser dem IE6 ignoriert <![endif]-->
Achtung! das funktioniert nur beim internetexplorer
-
wenn du hingegen <!--[if IE 6]> schreibst wird alles was in den klammern steht von alles browsern ausser dem IE6 ignoriert <![endif]-->
Das heißt mein Standart Css schreibe ich, damit es im Firefox passt und füge mehrere für IE zu.
Sieht der Kopf dann so aus (??):
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 6]><style type="text/css">@import "ie6.css";</style><![endif]-->
<!--[if IE 7]><style type="text/css">@import "ie7.css";</style><![endif]-->Und weiß dann jetzt Firfox, dass für ihn das normale Stylesheet gilt und IE 6 o 7. wissen, dass sie auf das jeweils ihrige anspringen müssen?
Gruß...-
wenn du hingegen <!--[if IE 6]> schreibst wird alles was in den klammern steht von alles browsern ausser dem IE6 ignoriert <![endif]-->
Das heißt mein Standart Css schreibe ich, damit es im Firefox passt und füge mehrere für IE zu.
http://www.k-faktor.com/standart/
Sieht der Kopf dann so aus (??):
http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative
Wobei ich aber deine Probleme eher bei der absoluten Positionierung sehe.
Struppi.
-
Wobei ich aber deine Probleme eher bei der absoluten Positionierung sehe.
Das stimmt übrigens.
-
Wobei ich aber deine Probleme eher bei der absoluten Positionierung sehe.
Das stimmt übrigens.
Lieber mit position:fixed arbeiten?
-
Wobei ich aber deine Probleme eher bei der absoluten Positionierung sehe.
Das stimmt übrigens.
Lieber mit position:fixed arbeiten?
nee, lieber gar nicht mit position arbeiten.
Struppi.
-
Wobei ich aber deine Probleme eher bei der absoluten Positionierung sehe.
Das stimmt übrigens.
Lieber mit position:fixed arbeiten?
nee, lieber gar nicht mit position arbeiten.
Struppi.
mhh, aber irgendwie muss ich doch positionieren. aber ich kenn mich da wohl zu wenig in css aus.
danke aber für die hilfe bis hierher.
ich werd mal schauen, wie man anders positioniert...
lg-
mhh, aber irgendwie muss ich doch positionieren. aber ich kenn mich da wohl zu wenig in css aus.
danke aber für die hilfe bis hierher.
ich werd mal schauen, wie man anders positioniert...nein, du musst nicht positionieren, ein Browserfenster ist kein Stück Papier, sondern eine sehr variable Darstellungsfläche, deshalb gibt es HTML und CSS. Ich weiß nicht wie deine Entwurf aussieht, aber in der Regel reichen margin und padding um Elemente anzuordnen.
Struppi.
-
-
-
-
-
-
Und weiß dann jetzt Firfox, dass für ihn das normale Stylesheet gilt und IE 6 o 7. wissen, dass sie auf das jeweils ihrige anspringen müssen?
also der Firefox sollte nur die main.css laden und die anderen dateien komplett ignorieren. der ie7 hingegen läd sowohl die main.css als auch ie7.css duch den @import werden aber alle attribute die zuvor in der main.css anders deklariert wurden einfach überschrieben (glaube ich jetzt zumindest, wenn nicht kann man die bevorzugten attribute mit !Important ausszeichnen.)
-
-
-
-
-
Danke für die Antwort!
nein, ohne HTML wird es schwierig. Welchen DOCTYPE verwendest du?
<!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>...</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>Gruß
Timo
-
-
Moin
nimm einfach die "position:absolute-Bomben" aus deinem Code. Versuche es vernünftig umzustellen.
Wie soll deine Seite aufgebaut sein?
Versuche mit "vernünftiger" Schachtelung (nicht zu tief und nicht nur DIVs, da es sonst eine DIV-Suppe wird) verschiedener Elemente und mit floats.
Dann kommt auch ein brauchbares Ergebnis dabei heraus.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)