Problem mit CSS und den verschiedenen Browsern

[Flare]

Hey ho!

Ich habe mal wiede rein kleines Problem mit den verschiendenen Browsern.
Herauskommen sollte ein Bild, wo ein Text drüber steht. Dies sieht in meiner HTML als Code so aus:

Code:

<style type='text/css'>
.box {
height: 170px;
width: 500px;
padding-left: 200px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(die url eben);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
font-size: 14px;
}
</style>

(Das BIld ist auch 170*500 Pixel)
Also soll dieser ein Element erstellen, was 170 Pixel hoch, 500 Pixel breit ist und der Text soll 10px unter dem oberen Rand und 200 Pixel rechts vom Rand anfangen.
Im IE funktioniert das Ganze auch wunderbar, nur machen zum Beispiel FireFox und Safari Probleme.
Kann mir jemand sagen warum und wie ich es für diese Browser verändern müsste, damit es geht?

Ich hoffe mir kann geholfen werden.


Flare

[NecroWurst]

Hi!

Über die Pixelinterpretationen und das BoxModell vom IE habe ich mich schon öfters geärgert...

Vielleicht probierst du es mal so:

Code:

  

  <!--[if IE]>
    
  <![endif]-->

In diesem Kommentar mit der IF-Abfrage werden alle Informationen nur vom IE ausgewertet und überschreiben die vorhergegangenen CSS-Definitionen... Zumindest bin ich mit dieser Lösung immer am günstigsten gefahren...

[Boombuler]

Evtl ist das hier für dich interesant... http://dean.edwards.name/IE7/
Das ist ein Java Script mit dem sich der IE wie ein "normaler" Browser verhält

Greetz
Boombuler

[alcaeus]

Moin,

vielleicht faengst du mal mit validem Code an:

Code:

<style type="text/css"

Attributwerte werden mit " umschlossen, nicht mit '.

Nehmen wir folgenden Code an (Ausschnitte):

Code:

<div id="myContainer">Ich bin ein Blindtext</div>

mit folgendem Style:

Code:

<style type="text/css">
#myContainer {
  background-image:url(deine_url);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:scroll;

  padding:10px 30px 10px 200px;
  height:170px;
  width:500px;

  font-size:14px;
}
</style>

Sieht etwas aufgeraeumter aus, und funktioniert nicht sicher. Warum? Wirf einen korrekten DOCTYPE mit DTD in die HTML-Datei. Alles andere zwingt die Browser teilweise in den Quirks-Mode, und dann bist du um es mal ehrlich zu sagen, am A****.

So, was ist jetzt das Problem? richtig: die Groesse passt nicht. Laut dem Box-Model der CSS2-Definition wird die Gesamtbreite eines Elements aus width + leftPadding + rightPadding + leftBorder + rightBorder + leftMargin + rightMargin berechnet. Das heisst, dass deine Box insgesamt 730px * 190px gross sein wird, wobei "nur" 500px * 170px fuer Text verfuegbar sind. Das musst du natuerlich beachten, denn der IE machts im Quirks-Mode anders; da werden padding, border und margin von der Breite abgezaehlt, und daraus wird die verfuegbare Breite fuer Text errechnet.

@Boombuler: sowas ist einfach overkill. Wenn man sauberes HTML und CSS schreibt, braucht man solche (IMO schwachsinnige) Scripte erst gar nicht.

Greetz
alcaeus

[Flare]

Danke, das mit dem DOCTYPE hat geholfen, ich hatte da die Hälfte "vergessen". Jetzt bastle ich mir das so passend, dann müsste es klappen.

Danke


Flare

[Boombuler]

Zitat von alcaeus:

@Boombuler: sowas ist einfach overkill. Wenn man sauberes HTML und CSS schreibt, braucht man solche (IMO schwachsinnige) Scripte erst gar nicht.

Hi

mir persönlich Wurst... ich hab das noch nie gebraucht aber n paar kollegen sind sehr davon überzeugt.(Also von diesem Script) Allein schon weil es im Internet Explorer die Features nachrüstet wie transparente PNGs und sowas. Ach und sicherlich hast du recht, vernümpftiger Code ist immer besser als ein Work around!

Greetz
Boombuler