Problem FireFox: Darstellung ist nicht korrekt!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abc
anweisung
background
beitrag
boxen
extra
lsung
margin
model
person
schaffen
schne box
sicherheit
standard
startseite
tue
unterschiedliche darstellung
ursache
verzicht
window
-
Schaut euch das mal an: http://img259.imageshack.us/img259/8786/shitam0.jpg
Bei IE ist es eine schöne Box, doch bei Firefox sind 3 von 4 Ecken es nicht!
Woran liegt das und wie kann ich das beheben?
Hier der Quellcode ;)
<html>
<head>
<style> table { text-align:center; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF url(images/c_gradient.gif) bottom left repeat-x; } table, tr, td { border-collapse:collapse; padding: 0px; margin: 0px; }
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="images/tl.gif">
</td>
<td style="border-top: 1px solid #E0E0E0;">
</td>
<td>
<img src="images/tl.2.gif">
</td>
</tr>
<tr>
<td style="border-left: 1px solid #E0E0E0;">
</td>
<td> Hallo
<br> Wie gehts?
</td>
<td style="border-right: 1px solid #E0E0E0;">
</td>
</tr>
<tr>
<td>
<img src="images/bl.gif">
</td>
<td style="border-bottom: 1px solid #E0E0E0;">
</td>
<td>
<img src="images/bl.2.gif">
</td>
</tr>
</table>
</body>
</html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Da kann man leider nichts machen.
Das liegt daran das jeder Browser das anders interpretiert.
Um das zu schaffen müsstest du deinen Firefox verändern nur das bringt anderen nichts. Am besten du schreibst auf der startseite das deine Homepage für IE geschreiben wurde und biestest den Downlode Link an. -
robbmaster schrieb:
Da kann man leider nichts machen.
Das liegt daran das jeder Browser das anders interpretiert.
Um das zu schaffen müsstest du deinen Firefox verändern nur das bringt anderen nichts. Am besten du schreibst auf der startseite das deine Homepage für IE geschreiben wurde und biestest den Downlode Link an.
Also, wenn es Bilder sind, dann kann man da mit Sicherheit was machen.
"Für IE geschrieben" würde ich ehrlich gesagt niemals auf die Startseite schreiben, denn dadurch schreckst du zwei Gruppen von Personen ab:
1. Linux-User (wie ich einer bin), die keinen IE haben und
2. IE-Verachter (wie ich schon früher unter Windows einer war), die jeden anderen Browser lieber nehmen würden als den IE.
Lad doch mal die Seite mit den Bildern hoch und poste den Link, dann können wir dir eher helfen. -
robbmaster schrieb:
Da kann man leider nichts machen.
Das liegt daran das jeder Browser das anders interpretiert.
Um das zu schaffen müsstest du deinen Firefox verändern nur das bringt anderen nichts. Am besten du schreibst auf der startseite das deine Homepage für IE geschreiben wurde und biestest den Downlode Link an.
Also, wenn es Bilder sind, dann kann man da mit Sicherheit was machen.
"Für IE geschrieben" würde ich ehrlich gesagt niemals auf die Startseite schreiben, denn dadurch schreckst du zwei Gruppen von Personen ab:
1. Linux-User (wie ich einer bin), die keinen IE haben und
2. IE-Verachter (wie ich schon früher unter Windows einer war), die jeden anderen Browser lieber nehmen würden als den IE.
Lad doch mal die Seite mit den Bildern hoch und poste den Link, dann können wir dir eher helfen.
Ja gut man könnte 2 seiten erstellen eine IE seite und eine XXX seite und die Bilder veändern. Aber das Problem dabei ist das du im Grunde die ganze HP verdoppeln oder auch verdreifachen musst und das ist anstrengend. Sollte Außerdem ein Firefox User mal bei Links www.abc.xyz/ie/xyz kommt könnte ihn das auch abschreken -
Ja gut man könnte 2 seiten erstellen eine IE seite und eine XXX seite und die Bilder veändern. Aber das Problem dabei ist das du im Grunde die ganze HP verdoppeln oder auch verdreifachen musst und das ist anstrengend. Sollte Außerdem ein Firefox User mal bei Links www.abc.xyz/ie/xyz kommt könnte ihn das auch abschreken
Nein, mir scheint es, als ob FF die Grafiken (also die Ecken) verzerren würde. Warum das so ist, kann ich im Moment nicht sagen. Deshalb würde ich gern mal die Seite im HTML-Format sehen (also nicht nur als Screenshot), damit ich mir mal den Quelltext ansehen kann. Ein Browser verzerrt nicht ohne Grund eine Grafik.
Eine browserabhängige Umleitung halte ich ebenfalls für Schwachsinn und unnötigen Aufwand. Aber schreckt es einen User eher ab als eine Seite, die nur für den IE geschrieben ist? -
doch denn viele hassen den Internet-Explorer auch wenn ich das nicht tue ich benutze alles. Aber was sind Linux-User??????
Ach ja du hast eine Nachricht.
Und noch zu dir k*****:
vielleicht liegt das auch daran das der browser noch nicht richtig geladen war.. -
Die Ursache für die unterschiedliche Darstellung könnte im Box-Model-Bug des IE liegen. Der interpretiert "padding" und "margin" anders als der FF (der es richtig -- dem Standard entsprechend -- macht). Lösungen zu diesem Problem findet man sicher beim Googeln nach "box model bug". Es gibt mehrere.
Der FireFox unterstützt schon seit der Version 1.0.irgendwas "runde" Ecken auf CSS-Basis -- völlig ohne irgendwelche Hilfsgrafiken. Wenn ich also vor der Wahl stünde, würde ich das nutzen und auf extra Unfug für den IE verzichten. Dorts siehts dann halt eckig aus, in richtigen Browsern rund. Fertig.
Die CSS-Anweisung für alle 4 Ecken heißt (Mozilla-spezifisch):
-moz-border-radius: [i]deinMaß[/i];
Man kann aber notfalls auch was für den M$FT IE flicken -- z.B. ein zusätzliches StyleSheet über die "Conditional Commments", die nur der IE kennt.
Ansonsten empfehle ich diese Lektüre für kompatible runde Ecken:
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm
... oder diese (für Englisch-Kundige):
http://www.w3.org/Style/Examples/007/roundshadow.html
Beitrag geaendert: 6.4.2007 20:27:53 von alopex -
Also ich habe es jetzt so gelöst, dass alles bilder sind ;) sieht jetzt bei allen gleich aus ;)
<html>
<head>
<style>
table {
text-align:center;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF url(images/c_gradient.gif) bottom left repeat-x;
}
th {
width:100px;
}
table, tr, td {
border-collapse:collapse;
padding: 0px;
margin: 0px;
}
#tc {background-image: url(images/top.gif);}
#ml {background-image: url(images/left.gif);}
#ml2 {background-image: url(images/right.gif);}
#bc {background-image: url(images/bottom.gif);}
</style>
</head>
<body>
<!-- EXTRA -->
<table width="500px" border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img src="images/hdr_left.gif"></td>
<td style="background-image: url(images/cellpic3.gif); width:100%;">Navi</td>
<td><img src="images/hdr_right.gif"></td>
<tr>
</table>
<br>
<!-- EXTRA -->
<table width=500>
<tr>
<td><img src="images/tl.png"></td>
<td id="tc"></td>
<td><img src="images/tl.2.png"></td>
</tr>
<tr>
<td id="ml"></td>
<td width="100%">
<br><br><br>
</td>
<td id="ml2"></td>
</tr>
<tr>
<td><img src="images/bl.png"></td>
<td id="bc"></td>
<td><img src="images/bl.2.png"></td>
</tr>
</table>
</body>
</html>
Aber danke für die hilfe ^^
Beitrag geaendert: 15.4.2007 20:56:06 von kyokosama -
kyokosama schrieb:
background: #FFFFFF url(images/c_gradient.gif) bottom left repeat-x;
Das ist ein ansolutes dont in CSS. denn dass wird von Firefox (ich finde zu Recht) nicht richtig asgewertet.
Schreibe besser solche Styles:
CSS background-color: #FFFFFF background-image: url(images/c_gradient.gif) background-position: bottom left; bbackground-repeat: repeat-x;
Beitrag geaendert: 16.4.2007 23:27:08 von keiax -
Ich hab ne Lösung für das Problem:
Wie schon gesagt, liegt die andere Interpretation der paddings und margins an dem Boxenmodell.
Man kann den IE aber zwingen, das gleiche Modell wie Firefox zu benutzen, indem man ein "strict"-Doctype verwendet.
HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ich denke, das ist die eleganteste Lösung ;)
Beitrag geaendert: 17.4.2007 18:06:02 von timmythom -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
