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

Position bei CSS im IE und Firefox unterschiedlich

Status
Für weitere Antworten geschlossen.
F

fjordpferd

Neues Mitglied
Hallo,

ich habe folgende Zeilen erstellt:
  • Code: 
    <!--
      h1{position:absolute;top:55;left:220;font-size:20px;color:#808080;
      font-family:Verdana;background-color:#393C39;margin-left:1%;margin-right:1%}
      body{background-color:#393C39;}
      h3.a{position:absolute;top:165;left:62;font-size:18px;font-family:AvantGarde;}
      h3.b{position:absolute;top:245;left:62;font-size:18px;font-family:AvantGarde;}
      h3.c{position:absolute;top:62%;left:6%;font-size:18px;font-family:AvantGarde;}
      h4.a{position:absolute;top:427;left:256;font-size:18px;font-family:Avantgarde;}
      h4.b{position:absolute;top:427;left:440;font-size:18px;font-family:Avantgarde;}
      h4.c{position:absolute;top:427;left:604;font-size:18px;font-family:Avantgarde;}
      h4.d{position:absolute;top:82%;left:80%;font-size:18px;font-family:Avantgarde;}
      h4.e{position:absolute;top:1536;left:420;font-family:Verdana;font-size:12px;
      color:#C6FF00;text-align:center;}
      a:link{text-decoration:none;color:#808080}
      a:visited{text-decoration:none;color:#808080}
      a:hover{text-decoration:none;color:#C6FF00;}
      a:active{text-decoration:none;color:#DEDFDE;}
  -->
  </style>


</head>
<body>

[img]home/grafik/b.gif[/img]
[img]home/grafik/i.gif[/img]
[img]home/grafik/gr.gif[/img]
[img]home/grafik/b.gif[/img]
<h1>[url="home/xxxxxx.html"] xxxxx yyyyyy[/url]</h1>
folgendes Problem tritt auf, der Text xxxxx yyyyyy wird im IE an anderer Stelle positioniert als im Firefox. Wie erreiche ich die gleiche Positionierung.
 
Zuerst:

Hi, da du neu bist, kannst du es ja nicht wissen, aber editier mal bitte zuerst deinen Text, und setz das ganze in einen code-Tag. Genaueres steht hier. Außerdem solltest du zunächstmal einige ungeschlossene Tags schleißen ( a:visited{text-decoration:none;color:#808080). Außerdem ist es immer besser, wenn man zwischen den einzelnen CSS-Befehlen Platz lässt. Zudem hat der IE eine andere Fenstergröße als Firefox, und daher verändert sich das (glaube ich zumindest) wenn du den Befehl position:absolute nimmst.
 
hi,

danke für Deine Anwort.

..und daher verändert sich das (glaube ich zumindest) wenn du den Befehl position:absolute nimmst.
Zum Vergrößern anklicken....
Ich habe es schon mit % anstatt px versucht, mit "relative" anstelle von "absolute" ich habe immer unterschiedliche Darstellung, wenns im Firefox passt, passt es nicht im IE.
 
Hi fjordpferd

gerade der IE weißt erhebliche Schwächen auf im Bezug auf die Umsetzung von CSS. :roll:
Hilfreich wäre ein Link zu Seite damit man sich die Unterschiede mal selbst ansehen kann. Ich würde erstmal folgendes probieren.

Deine jetzige H1 Positionierung:
Code: 
h1{position:absolute;top:55;left:220;font-size:20px;color:#808080;font-family:Verdana;background-color:#393C39;margin-left:1%;margin-right:1%}

Änderungen:
- Einheiten bei "top" und "left" angeben.
- "margin-left/right" entfernen.
- Leerzeichen im Quelltext einfügen.

Neue H1 Positionierung:
Code: 
h1 { position:absolute; top:55px; left:220px; font-size:20px; color:#808080; font-family:Verdana; background-color:#393C39; }

Erklärung:
Die "top" und "left" Angabe war ungenau wegen der fehlenden Einheit. Die "margin" Angaben standen im Widerspruch zur absoluten Positionierung. Wenn du hier noch Abstand haben möchtest nutze die Eigenschaft "padding" am besten mit fixen Werten (px).

Gruß
Hobbyuser
 
Hi hobbyuser,

tja, allein mit Phase5 und selfhtml passieren mir solche Fehler wohl noch häufiger. Hast Du vielleicht eine Empfehlung für zusätzliche Literatur?

Ich habe die Seite mal online gestellt haesu.eu

Nochmal ein Dankeschön für die Hilfe.

gruß Fjordpferd
 
fjordpferd schrieb:
Hast Du vielleicht eine Empfehlung für zusätzliche Literatur?
Zum Vergrößern anklicken....
Also ich kann immer nur empfehlen bei selfhtml die Referenzen zu benutzen.
LINK: http://de.selfhtml.org/

Dort sind auf der rechten Seite die Kurzreferenzen zu HTML und CSS. Einfach das passende Thema aussuchen und nachschlagen, bei bedarf kommt man von der Referenz in die Beschreibung. ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben