nicht angemeldet
CSS- unterschiedliche Darstellung bei IE und Opera
Hallo,
ich habe schon wieder ein seltsames Problem mit CSS.
Mein Quellcode für die css-Datei sieht so aus:
#button_event_pos
{ text-align: center; position: relative; z-index: 0; top: -31px; right: 0; left: 80px }
#button_promotion_pos
{ text-align: center; position: relative; z-index: 0; top: -66px; right: 0; bottom: 0; left: 256px }
#news_pos
{ text-align: center; position: relative; z-index: 1; top: 0; right: 0; bottom: 0; left: 0 }
#nwt_bild_start
{ text-align: center; margin-top: 80px; position: relative; z-index: 0; top: 0; right: 0; bottom: 0; left: 0 }
Im Internet Explorer wird das alles wunderbar dargestellt. Mein Opera Browser jedoch positioniert 2 Buttons abweichend (ca. um 2px).
Hattet ihr schon mal ähnliche Probleme???
Ich weiss nciht wie ich das lösen könnte.
IE-Version: 6.0
Opera: 7.23
Danke für Eure Hilfe
-
Hallo,
#button_promotion_pos
{ text-align: center; position: relative; z-index: 0; top: -66px; right: 0; bottom: 0; left: 256px }Warum definierst du top, right, bottom und left?
Ich würde für die horizontale und vertikale Ausrichtung nur je eine Angabe machen.Im Internet Explorer wird das alles wunderbar dargestellt.
Dass der Internet Explorer alles wunderbar darstellt halte ich für ein Gerücht
Mein Opera Browser jedoch positioniert 2 Buttons abweichend (ca. um 2px).
Und das zerhaut dir das Design?
Und könntest du uns vielleicht deinen HTML Quellcode und einen Link
auf eine Beispielseite zeigen, damit wir das Problem nachvollziehen können?Gruß
Alexander Brock--
SelfCode: sh:( fo:) ch:? rl:( br:> n4:? ie:{ mo:} va:) de:> zu:| fl:{ ss:( ls:[ js:(
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>nwt</title>
<link href="nwt_neu.css" rel="stylesheet" type="text/css" media="all"><div id="nwt_bild_start"><img src="bild_start_neu.gif" border="0"></div>
<div id="button_event_pos">
img id="button_event_01" src="button_event_01.gif" alt="Event" name="button_event_01" border="0">
</div><div id="button_promotion_pos">
<img id="button_promotion_01" src="button_promotion_01.gif" alt="Event" name="button_promotion_01" border="0">
</div><div id= "news_pos" class= "news">
>>> Hier können eventuell die ersten News stehen / Datum 10.03.2004 ...mehr...
</div></body>
</html>
So sieht der Quellcode aus. Die Seite ist leider (noch) nicht online und ich kann sie auch nicht hochladen.
Ich habe quasi 2 Buttons nebeneinander positioniert. Im IE sind sie auf gleicher Höhe. Im Opera nicht, da ist der eine um 2 px nach oben verschoben.
Vielen Dank für Eure Hilfe
Mel-
Hallo,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
Total falscher Doctype. Da gehört Strict hin!
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>nwt</title>
<link href="nwt_neu.css" rel="stylesheet" type="text/css" media="all">hier gehört
</head>
<body>
hin<div id="nwt_bild_start"><img src="bild_start_neu.gif" border="0"></div>
<div id="button_event_pos">
img id="button_event_01" src="button_event_01.gif" alt="Event" name="button_event_01" border="0">Das Attribut name in Bildern ist deprecated.
border="0" brauchst du afaik nur, wenn das Bild ein Link ist,
aber selbst dann würde ich
a img {
border: 0;
}
bevorzugen.</div>
<div id="button_promotion_pos">
<img id="button_promotion_01" src="button_promotion_01.gif" alt="Event" name="button_promotion_01" border="0">
</div>Wozu brauchst du eigentlich die vielen <div>s um die Bilder?
Lass sie weg.<div id="news_pos" class="news">
>>> Hier können eventuell die ersten News stehen / Datum 10.03.2004 ...mehr...
</div></body>
</html>
Ich habe quasi 2 Buttons nebeneinander positioniert. Im IE sind sie auf gleicher Höhe. Im Opera nicht, da ist der eine um 2 px nach oben verschoben.Ich würde die Buttons nicht relativ positionieren, sondern den ersten
Button links floaten.Gruß
Alexander Brock--
SelfCode: sh:( fo:) ch:? rl:( br:> n4:? ie:{ mo:} va:) de:> zu:| fl:{ ss:( ls:[ js:(
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com-
Hallo Alexander,
Total falscher Doctype. Da gehört Strict hin!
vielleicht hab ich im Thread was übersehen, aber ist das so pauschal richtig?
Das Attribut name in Bildern ist deprecated.
border="0" brauchst du afaik nur, wenn das Bild ein Link ist,
aber selbst dann würde ich
a img {
border: 0;
}
bevorzugen.Könnte vielleicht noch erwähnt werden dass sonst eigentlich auch keine Fehler entstehen sollten.
Wozu brauchst du eigentlich die vielen <div>s um die Bilder?
Lass sie weg.Stimmt, da wird häufig zuviel gekocht, allerdings auch nicht ganz so schlimm, und..
Ich würde die Buttons nicht relativ positionieren, sondern den ersten
Button links floaten...hier könnte ein Div in dem das alles stattfindet die Sache u.U. vereinfachen und zugleich der inhaltlichen Struktur entsprechen.
Grüsse
Cyx23
-
Hallo Cyx23,
Total falscher Doctype. Da gehört Strict hin!
vielleicht hab ich im Thread was übersehen, aber ist das so pauschal richtig?
Er kann natürlich auch transitional verwenden
(ich mag transitional irgendwie nicht), aber
frameset ist definitiv falsch, da er <body> verwendet.Ich würde die Buttons nicht relativ positionieren, sondern den ersten
Button links floaten...hier könnte ein Div in dem das alles stattfindet die Sache u.U. vereinfachen und zugleich der inhaltlichen Struktur entsprechen.
Da hast du natürlich Recht (lange Form von full ACK :-)).
Gruß
Alexander Brock--
SelfCode: sh:( fo:) ch:? rl:( br:> n4:? ie:{ mo:} va:) de:> zu:| fl:{ ss:( ls:[ js:(
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com-
Hi,
Er kann natürlich auch transitional verwenden
(ich mag transitional irgendwie nicht), aber
frameset ist definitiv falsch, da er <body> verwendet.Die Verwendung von body ist allein noch kein Ausschlußkriterium, denn auch ein korrekt aufgebautes frameset-Dokument kann (und sollte) ein body-Element enthalten. (ich sage nur: noframes)
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo,
Die Verwendung von body ist allein noch kein Ausschlußkriterium, denn auch ein korrekt aufgebautes frameset-Dokument kann (und sollte) ein body-Element enthalten. (ich sage nur: noframes)
*nachguck* stimmt *schäm*
aber er verwendet überhaupt keine Frames, wieso gibt er dann
HTML 4.01 frameset als Doctype an?Gruß
Alexander Brock--
SelfCode: sh:( fo:) ch:? rl:( br:> n4:? ie:{ mo:} va:) de:> zu:| fl:{ ss:( ls:[ js:(
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com-
Hi,
Die Verwendung von body ist allein noch kein Ausschlußkriterium, denn auch ein korrekt aufgebautes frameset-Dokument kann (und sollte) ein body-Element enthalten. (ich sage nur: noframes)
*nachguck* stimmt *schäm*
aber er verwendet überhaupt keine Frames, wieso gibt er dann
HTML 4.01 frameset als Doctype an?Ich sagte doch:
Die Verwendung von body ist allein noch kein Ausschlußkriterium,Die Tatsache, daß kein frameset nach dem head kommt, sondern ein body, ist ein hinreichendes Ausschlußkriterium.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
-
-
-
hi,
Mein Opera Browser jedoch positioniert 2 Buttons abweichend (ca. um 2px).
hülfe!
herr handwerker, da ist noch ein 2mm breiter spalt im fussboden! der muss weg, sonst fallen wir da alle rein ...gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."