Webdesign, Tutorials und mehr - Webmasterpro.de

Profi gesucht CSS+Firefox#3

jensK, am Mittwoch den 18.06.2008 um 18:20:11

Hi,

hab heute, wie so viele andere auch, FF Version 3 installiert und durfte beim ersten Testlauf gleich mal feststellen, dass der meine Homepage mit 'nem kleinen Fehler darstellt.

Und zwar sind zwei relativ positionierte Bildelemente um jeweils 6pxl nach oben verschoben (+ kleines Prob mit nem Javascript, aber das gehört (noch) nicht hierher ^^).

die betroffene Page: http://www.jenskuerschner.de/index.php

Betroffen sind die Orangenteile, die aus dem Viereck herausragen.

Hier der CSS-Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#picteil1 {
border:0px;
position:relative;
margin:0px;
padding:0px;
background:url(grafiken/orange1.png);
background-repeat:no-repeat;
width:342px;
height:69px;
left:209px;
top:-788px;
}

* html #picteil1 {
border:0px;
margin:0px;
padding:0px;
width:0px;
height:0px;
background:url(grafiken/bg8b.bmp);
}

#picteil2 {
border:0px;
position:relative;
margin:0px;
padding:0px;
background:url(grafiken/orange2.png);
background-repeat:no-repeat;
width:170px;
height:246px;
left:341px;
top:108px;
}

* html #picteil2 {
border:0px;
margin:0px;
padding:0px;
width:0px;
height:0px;
background:url(grafiken/bg8b.bmp);
}

Hoffe irgendjemand kann mich hier belehren was ich a) im CSS mal wieder alles verbockt hab, bzw. b) sagen was ich denn nun genau für ein Problem in FF3 hab.

VIELEN DANK und viele grüße!!!

Jens

P.S.:

Verwende bisher diese Browserweiche - wie integrier ich da FF3 - mit welchem Kürzel?

1
2
3

<link rel="stylesheet" type="text/css" href="style.css" >
<!--[if gte IE 5.5]><link rel="stylesheet" type="text/css" href="stylee.css" ><![endif]-->
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="styleee.css" ><![endif]-->

prm, am Mittwoch den 18.06.2008 um 18:45:27

Du versuchst mit dieser Hilfskonstruktion einen Abstand zu definieren:

1
2

<br>
<p>&nbsp;</p>

Die Browser verwenden teils unterschiedliche Standardabstände für "p" und andere Elemente, was zu unterschiedlicher Darstellung führt.

Deshalb solltest du einen margin definieren.

Z.B. so:

Oder wenn du unbedingt bei deiner Konstruktion bleiben willst, dann definiere einen für alle Browser einheitlichen Abstand für p:

1

p {margin: 16px 0;}

Wozu sind denn diese vielen IE-Hacks und Browserweichen gut? Das müsste im IE auch ohne funktionieren.

koslowski, am Mittwoch den 18.06.2008 um 19:24:36

Hi,

Die Browser verwenden teils unterschiedliche Standardabstände für "p" und andere Elemente, was zu unterschiedlicher Darstellung führt.

Genau deshalb sollte man einen CSS-Prolog definieren, um die unterschiedlichen Browserinternen Vorformatierungen auf null zu setzen.

1

*  { padding:0; margin:0; }

Das sollte in die erste Zeile deiner CSS-Datei. Davon ausgehend müssen dann natürlich alle Abstände neu definiert werden. Aber das ist kaum Mehrarbeit als das Abstandsgestopsel für jeden Browser.

koslowski

David Danier, am Mittwoch den 18.06.2008 um 22:10:45

http://snook.ca/archives/html_and_css/no_css_reset/

koslowski, am Donnerstag den 19.06.2008 um 08:23:15

Hi,

trotz des Links, man sollte einen CSS-Prolog definieren.

Der von mir beschriebene ist der gebräuchlichste.

Es gibt noch Eric Meyers reset, den manche benutzen.

Wenn man sehr, sehr viel Erfahrung hat kann man vielleicht drauf verzichten, obwohl ich eine Reihe von erfahrenen Webdesignern kenne, die den universellen Reset routinemäßig einsetzen.

Für Anfänger ist es absolut nicht empfehlenswert darauf zu verzichten.

Sämtliche Fachliteratur empfiehlt diesen oder Eric Meyers reset , oder beides.

koslowski

jensK, am Freitag den 20.06.2008 um 10:32:36

Hi,

vielen, vielen Dank soweit - werde sehen ob ichs schaffe ^^

Das mit dem Reset ist mir völlig neu - danke hierfür!

Die Browserweichen sind für 1-2 Kleinigkeiten, die das Problem hier gar nicht betreffen. Dachte aber, dass man da vielleicht dann extra was für FF3 machen könnte - aber vl schaff ichs ja so.

Wenn ich Probleme hab meld ich mich wieder *g*

Viele Grüße

David Danier, am Freitag den 20.06.2008 um 11:11:40

Das hätte ich gerne begründet. Ein CSS-Reset bedeutet weit mehr arbeit, da viele Styles nachträglich wieder definiert werden müssen. Für einen Anfänger mag es aber doch praktisch sein, wenn Listen, Absätze und Überschriften ein gewisses Aussehen haben um das sie sich erstmal nicht kümmern müssen.

Es ist noch nicht allzulange her, da waren Tabellen-Layouts das tollste überhaupt und alle haben sie benutzt. ;-)

Nicht, dass ich den CSS-Reset mit Tabellen-Layouts gleichsetzen will, dennoch ist nicht immer die Lösung der Masse die idealste Lösung.

Um nochmal auf Fachliteratur + Anfänger zurück zu kommen:
Fachliteratur empfielt das denk ich gerade Anfängern, um Probleme wie sie mit Listen auftreten können auszuweichen (margin/padding auf ul/ol oder li?). Dadurch werden allerdings andere Probleme geschaffen (Absätze werden dem <div> gleich), die umschifft werden müssen. Gerade deswegen finde ich es eigentlich besser zu erklären, wieso es bei manchen Elementen nötig ist mehr Eigenschaften zu setzen als direkt ersichtlich, anstatt sich künstliche Probleme zu schaffen, die wieder speziell behandelt werden müssen. Gerade zu lernzwecken macht das doch überhaupt keinen Sinn, vor allem wenn Profis später kein CSS-Reset einsetzen sollten.

Viele professionelle Webdesigner benutzen des Reset trotzdem, ja. Meiner Meinung würde so ein Reset allerdings erst mit einem Schritt weiter Sinn machen. Soll heißten, man definiert Standard-Vorgaben für die Elemente, anstatt nur jegliche Formatierung zu entfernen. Solche Standardvorgaben könnten dann beispielsweise festlegen, dass das Einrücken in Listen immer durch ein margin-left beim <li> definiert ist oder Absätze immer ein margin-top/-bottom von 1em haben. Nur so würde die Arbeit wirklich erleichtert. ;-)

prm, am Freitag den 20.06.2008 um 11:37:44

Ich sag's mal so (meine Meinung):
Wenn es nicht gerade auf pixelgenaues Arbeiten drauf ankommt, ist das Reset nicht zwingend erforderlich und gerade der Anfänger tut sich leichter, wenn er mit den browserseitig vordefinierten Werten arbeitet.
Schließlich erfordert das Reset in der Tat wieder die Neudefinition der Marginwerte für die verwendeten Elemente.

Allerdings sind die browsereigenen Werte bei Listen zum Teil doch recht beträchtlich. Dazu kann man aber die betreffenden Elemente auch selbst definieren, ohne dass es eines Generalresets bedarf.

Fazit: Jeder so wie er es mag. Es wird ja niemand zu etwas gezwungen. Hier werden nur Vorschläge und Tipps weitergegeben, die eben mal oft der praktischen Erfahrung entspringen.

David Danier, am Freitag den 20.06.2008 um 11:51:16

Pixelgenaues Arbeiten ist eh meist überschätzt. In 99% aller Fälle ist das nicht nötig, wenn doch macht ein Bild meist weniger Arbeit. HTML und auch CSS ist einfach nicht darauf ausgelegt Pixelgenau zu arbeiten, spätestens dann, wenn es um die Formatierung von Inhaltstexten geht. Den Abstand zwischen Absätzen in einer Pixelangabe anzugeben macht beispielsweise einfach keinen Sinn, soetwas muss von der Schriftgröße abhängen (-> em).

Wer dennoch Pixelgenau arbeiten möchte, wird eh alle Elemente umformatieren müssen. Da ist ein CSS-Reset nur ein kleiner Schritt. Da meistens nur ein Teil der Webseite die Anforderung "Pixelgenau" bekommt/bekommen kann wäre es hier aber zumindest sinnvoll den CSS-Reset nur auf einen Teil der Seite anzuwenden. Beispielsweise: #menu * { padding: 0; margin: 0 }

Deswegen kam mir die Idee eines brauchbareren CSS-Reset, näcmlich eines solchen, der die Browserunterschiede minimiert. Falls du daran Interesse hast kannst du dich am betreffenden Thema dazu beteiligen. ;-)

Klar, das sowieso. Gerade weil das hier eine Diskussionsplatform ist wird aber natürlich gerne argumentiert, was denn nun gerade richtig ist und wieso man es selbst besser weiß. :D

koslowski, am Freitag den 20.06.2008 um 15:56:43

Hi David,

Das hätte ich gerne begründet. Ein CSS-Reset bedeutet weit mehr arbeit, da viele Styles nachträglich wieder definiert werden müssen. Für einen Anfänger mag es aber doch praktisch sein, wenn Listen, Absätze und Überschriften ein gewisses Aussehen haben um das sie sich erstmal nicht kümmern müssen.

okay, das der CSS-Reset bedeutend mehr Arbeit erfordert, weil man alles neu definieren muss ist imho nicht richtig.

Direkt nach dem Reset folgt i.d.R. eine Restaurierung der wichtigsten Abstände. Da die browserinternen Vorformatierungen ja von Browser zu Browser unterschiedlich sind, hat man damit dann eine einheitliche Grundlage geschaffen, die in allen Browsern gleich ist.

Nachteil des Resets ist, daß die Darstellung von Formularen nebst Formatierung derselben sich ungünstig auswirken kann. Deshalb bevorzugen auch manche Eric Meyers modifizierten Reset.

Meine Erfahrung aus meinem Heimatforum ist, das sich Probleme von Anfängern oft allein dadurch erledigen, wenn dieser Reset definiert ist. Sie tun sich dann oft leichter bei der Problembewältigung.

Dazu hats auch mal eine längere Diskussion von wirklich guten Leuten dazu gegeben, die damit geendet hat, den CSS-Prolog an die erste Stelle der FAQ mit einem Link zu dieser Diskussion zu setzen, damit sich jeder ein eigenes Bild davon machen kann.

Aber wie schon gesagt jeder wie er mag, entscheidend ist doch letztlich, für sich selber eine Arbeitsweise zu finden, mit der man gut zurechtkommt. (Hier fehlt ein Smilie!)

koslowski

jensK, am Samstag den 21.06.2008 um 14:20:56

Da ich grad nicht die Zeit hab mich näher mit dem CSSReset zu beschäftigen hab ich das Ganze jetzt erstmal pragmatisch mit 'ner neuen Grafik gelöst.

Ein ausführlicher Artikel darüber wäre aber sicherlich mal interessant ;)

Viele Grüße

David Danier, am Samstag den 21.06.2008 um 15:11:13

Hab mal einen Artikel zum CSS-Reset gestartet, kann sicher noch ergänzt/verbessert werden. Aber evtl. hilft der dir ja schon. ;-)