Abfrage welcher Broweser und dann bestimmte css Datei

[maddy]

Hey,
ich habe mal eine frage ob dies so ohne weiteres geht. Ich habe das problem, dass ich bei einem meiner Elemente auf der Seite beim FF ein margin brauche und beim IE nicht, Da dachte ich mir die einfachste möglichkeit dies zu beheben, wäre indme ich einfach 2 css Dateien schreibe eine für den IE und eine für den FF. (ist dies überhauptsinnvoll?)

Und meine 2. Frage wäre wie ich dies am besten bewerkstellige!

[ChrisB]

Hi,

Da dachte ich mir die einfachste möglichkeit dies zu beheben, wäre indme ich einfach 2 css Dateien schreibe eine für den IE und eine für den FF. (ist dies überhauptsinnvoll?)

Nein, ist es nicht. Informiere dich zum Stichwort CSS-Hacks.

MfG ChrisB

[suit]

ist dies überhauptsinnvoll?

nein, es ist naheliegend, dass du fehlerhaften code produzierst, da sämtliche marktrelevanten browser die margin-eigenschaft korrekt interpretieren - für den firefox eine ausnahme zu machen ist absurd (der machts gewöhnlicherweise richtig)

Und meine 2. Frage wäre wie ich dies am besten bewerkstellige!

a) schreibe ordentlichen code, damit sparst du dir in fast 100% der fälle sämtliche weichen
b) verwende im notfall für die einzig dämliche browserfamilie <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=conditional comments> und nach möglichkeit keine hacks (jaja, religionsfrage)

[maddy]

ist dies überhauptsinnvoll?
nein, es ist naheliegend, dass du fehlerhaften code produzierst, da sämtliche marktrelevanten browser die margin-eigenschaft korrekt interpretieren - für den firefox eine ausnahme zu machen ist absurd (der machts gewöhnlicherweise richtig)

Und meine 2. Frage wäre wie ich dies am besten bewerkstellige!
a) schreibe ordentlichen code, damit sparst du dir in fast 100% der fälle sämtliche weichen
b) verwende im notfall für die einzig dämliche browserfamilie <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=conditional comments> und nach möglichkeit keine hacks (jaja, religionsfrage)

wenn ich diese conditional comments benutzte macht der IE weiterhin nur scheiß (Version 6.0) ich habe das wie folgt implementiert

  
<link rel="stylesheet" href="main.css" type="text/css" />  
<!--[if IE]>  
<link rel="stylesheet" type="text/css" href="main_IE.css" />  
<![endif]-->  

habe so zusagen eine extra css Datei für den IE, die er aber nicht wirklich benutzt! In der ich das margin weggelassen habe (denn irgendwie Interpretiert er das so besser), trotzdem funktioniert es nicht!
Oder habe ich einen Fehler in dre Syntax??

[Hopsel]

Hi maddy!

Oder habe ich einen Fehler in dre Syntax??

Was hindert den IE nochmal daran die erste Datei einzubinden?

MfG H☼psel

[suit]

wenn ich diese conditional comments benutzte macht der IE weiterhin nur scheiß (Version 6.0) ich habe das wie folgt implementiert

dein schnipsel gilt für alle ie-version die conditional comments unterstützen, nicht nur für den ie6 - tut aber hier nix zur sache

habe so zusagen eine extra css Datei für den IE, die er aber nicht wirklich benutzt! In der ich das margin weggelassen habe (denn irgendwie Interpretiert er das so besser), trotzdem funktioniert es nicht!
Oder habe ich einen Fehler in dre Syntax??

schon mal überlegt, für was das "cascading" in css steht?

wenn du ein css hast und in einem weiteren file eine eigenschaft überschreibst, gilt bei gleicher oder höhrere spezifität die zuletzt genannte eigenschaft - wenn du nur eine weglässt, ist sie dennoch "von vorher" verhanden - du musst also dediziert "margin: 0;" schreiben, wenn du den margin für den ie entfernen willst

wie bereits erwähnt vermute ich bei dir aber ganz andere probleme, die du mit ordentlichem code besser lösen könntest - ich verstehe immer noch nicht, warum der ie margin anders interpretieren sollte als der firefox (standardkonformer modus, kein umgehbarer bug)

[maddy]

wenn du ein css hast und in einem weiteren file eine eigenschaft überschreibst, gilt bei gleicher oder höhrere spezifität die zuletzt genannte eigenschaft - wenn du nur eine weglässt, ist sie dennoch "von vorher" verhanden - du musst also dediziert "margin: 0;" schreiben, wenn du den margin für den ie entfernen willst

Das heißt ich brauche nicht die komplette CSS Datei kopieren und dort dann margin auf 0px; zu setzten sondern einfach nur in die neue CSS Datei

ul.menu
{
margin-top:0px;
}

Dann überschreibt er nur diesen Wert?

Ich habe das JavaScript Drop Down Menü von mortox und versuche es zum laufen zu bekommen!

[suit]

Dann überschreibt er nur diesen Wert?

richtig, genau das ist der kniff dabei - erstelle zuerst dein css für ordentliche browser - dann kopiere das stylesheet komplett und passe es so lange an, bis es im internet explorer (je nach dem welche version) funktioniert wie es soll

vergleiche die beiden stylesheets mit winmerge oder kompare und eliminiere sämtliche zeilen, die in beiden css-files drinnen sind

dann bleibt dir ein überschaubares, zusätzliches css file für den internet exploder übrig

Ich habe das JavaScript Drop Down Menü von mortox und versuche es zum laufen zu bekommen!

was auch immer das ist ;)

[maddy]

Dann überschreibt er nur diesen Wert?
richtig, genau das ist der kniff dabei - erstelle zuerst dein css für ordentliche browser - dann kopiere das stylesheet komplett und passe es so lange an, bis es im internet explorer (je nach dem welche version) funktioniert wie es soll

Okey das habe ich jetzt verstanden, aber der IE reagiert gar nicht auf mein extra für ihn, in seinen Augen bugfreies Dateichen.

was mache ich bei der einbindung falsch??

  
<style type="text/css">@import url(main.css) all;</style>  
  
<!--[if IE]>  
<style type="text/css">@import url(main_IE.css);</style>  
<![endif]-->  

Habe gelesen wenn ich all hintendran schreibe irgnoeriert es der IE und in der IF das soll dann der IE nehmen!

[suit]

was mache ich bei der einbindung falsch??

augenscheinlich nichts - kann man das irgendwo online sehen

btw: mach dir eine testseite, minimalistisch

body { background: red; }

und für den internet explorer überschreibst du den wert mit green - wenn das funzt, baue drauf auf

<style type="text/css">@import url(main.css) all;</style>

<!--[if IE]>
<style type="text/css">@import url(main_IE.css);</style>
<![endif]-->

>   
> Habe gelesen wenn ich all hintendran schreibe irgnoeriert es der IE und in der IF das soll dann der IE nehmen!  
  
so wie du es jetzt geschrieben hast, wird der internet explorer beide vewenden, jeder andere browser nur das erste (da das zweite einen html-kommentar darstellt)

[maddy]

Okey wenn der IE aber beide benutzt müsste er doch die Informationen aus dem letzten eigentlich nehmen und umsetzten, tut er aber leider nicht!

Ich werde es mal an einem kleinen Beispiel testen!

[suit]

Okey wenn der IE aber beide benutzt müsste er doch die Informationen aus dem letzten eigentlich nehmen und umsetzten, tut er aber leider nicht!

nur wenn die spezifität des dort verwendeten selektors höher ist
folgendes wird immer rote schrift ergeben, egal ob die informationen in einem oder zwei files verteilt sind

  
a#blah {  
  color: red;  
}  
  
a {  
  color: blue;  
}

folgendes wird blaue schrift ergeben

  
a#blah {  
  color: red;  
}  
  
a#blah {  
  color: blue;  
}

Ich werde es mal an einem kleinen Beispiel testen!

weise entscheidung - am besten die beispiele valideren, damit du sicherstellst, alles richtig zu machen (zumindest prinzipielle)
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

[maddy]

Also habe mal ein kleine HTML Seite gemacht auf der nur Text steht einmal in grau im FF und einmal orange im IE und sie funktioniert tadellos

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
  <title>CSS-basiertes Layout</title>  
  <link rel="stylesheet" type="text/css" href="basis.css">  
  
  
  <!--[if IE]>  
    <style type="text/css">@import url(ie.css);</style>  
  <![endif]-->  
  
</head>  
<body>  
  <a>Test</a>  
</body>  
</html>  

die FF CSS

  
a{  
 color:#c8c8c8;  
 font-size:22px;  
}  

und die IE CSS

  
a{  
 color: #F58958;  
}  

Aber im Prinzip mache ich nichts anders als bei meiner großen Seite! Ich glaube langsam ich bin zu blöde dazu!

[suit]

Aber im Prinzip mache ich nichts anders als bei meiner großen Seite! Ich glaube langsam ich bin zu blöde dazu!

kann man die seite jetzt endlich mal sehen :D

[Harlequin]

Yerf!

Das heißt ich brauche nicht die komplette CSS Datei kopieren und dort dann margin auf 0px; zu setzten sondern einfach nur in die neue CSS Datei

ul.menu
{
margin-top:0px;
}

Dann überschreibt er nur diesen Wert?

Ja, genau so. Ich würde allerdings in den CC noch eine Abfrage der IE-version einbauen, evtl. brauchst du die Unterscheidung für den IE7 schon nicht mehr (oder zumindest der 8er sollte da mitspielen)

Was die Sache mit der Fehlerbehebung angeht, damit das in allen Browsern gleich aussieht (so wie von den anderen angesprochen): es sieht so aus, als reultiere der Unterschied aus den "collapsing Margins", die der IE nicht ganz richtig versteht. Eventuell findets du über diesen Weg eine Lösung, die keine Unterscheidung braucht.

Gruß,

Harlequin

[Hopsel]

Hi suit!

c) verwende im notfall für die einzig dämliche browserfamilie hacks und nach möglichkeit keine conditional comments

(jaja, religionsfrage)

Cheatah hat immer recht! ;-P

MfG H☼psel

[suit]

Cheatah hat immer recht! ;-P

dass hacks potentiell gefährlich sind, da man nie wissen kann, ob nicht irgendwann, irgend ein user-agent auf irgend einen bug der durch hacks umgangen wird, auch anspricht

hacks sind teilweise so komplex, dass man sie nicht ohne anleitung versteht

natürlich gibts auch einfache hacks - wie den star-html-hack aber auch hier ist nicht gesagt, dass nicht mal wieder ein dämlicher browser kommt, der das ebenfalls interpretiert

aber lassen wir das - dieser glaubenskrieg führt zu nix ;)

[Hopsel]

Hi suit!

Cheatah hat immer recht! ;-P
dass hacks potentiell gefährlich sind, da man nie wissen kann, ob nicht irgendwann, irgend ein user-agent auf irgend einen bug der durch hacks umgangen wird, auch anspricht

Ein kleiner Nachteil, der zudem noch von einem unwahrscheinlichen Fall ausgeht.

aber lassen wir das - dieser glaubenskrieg führt zu nix ;)

Ich wurde schon bekehrt...

MfG H☼psel

[Struppi]

ich habe mal eine frage ob dies so ohne weiteres geht. Ich habe das problem, dass ich bei einem meiner Elemente auf der Seite beim FF ein margin brauche und beim IE nicht, ...

Kann es sein, dass du deine Seite im Quirkmodus darstellen läßt?

Struppi.

[maddy]

Kann es sein, dass du deine Seite im Quirkmodus darstellen läßt?

Struppi.

Wer oder was ist der Quirkmodus?? kann man das essen oder hat das was mit tieren zu tun?? Sorry ich habe keine Ahnung was du meinst!

[suit]

Wer oder was ist der Quirkmodus?? kann man das essen oder hat das was mit tieren zu tun?? Sorry ich habe keine Ahnung was du meinst!

das ist die http://de.selfhtml.org/css/formate/box_modell.htm@title=sache, die ich bereits angesprochen habe - ich ging von fehlerhaftem code aus

die antwort auf diese frage hast du aber bisher nicht gegegeben :)

[maddy]

Also vielleicht kurz dazu was ich machen möchte,
ich habe einen DIV-Container, in diesem div container ist eine Typo3 Marke gesetzt die ein drop Down Menü (wie das was bei motrox.de) beschrieben ist erzeugt. So jetz habe ich das Problem, dass mir beim FF das Menü den Div Container aufbläht, beim IE aber nicht. Wenn ich nun mir margin:-17px; arbeite steht es perfekt im FF aber im IE ist es nicht mehr zu sehen!

Dies ist das Java Script was dem Menü zu Grunde liegt

  
<script type="text/javascript">  
     function show(element){  
           element.className += "hover";  
           }  
   function hide(element){  
           element.className = element.className = "";  
     }  
</script>  

[suit]

Also vielleicht kurz dazu was ich machen möchte, ich habe einen DIV-Container, in diesem div container ist eine Typo3 Marke gesetzt

genauso wie javascript saugt typo3 keinen gültigen code aus der website raus -  nachdem du uns aber relvante codeteile vorenthältst wirds schwierg ;)

ein <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=menü mit vernünftigem code> ist auch in typo3 problemlos möglich

[maddy]

Also vielleicht kurz dazu was ich machen möchte, ich habe einen DIV-Container, in diesem div container ist eine Typo3 Marke gesetzt

genauso wie javascript saugt typo3 keinen gültigen code aus der website raus -  nachdem du uns aber relvante codeteile vorenthältst wirds schwierg ;)

ein <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=menü mit vernünftigem code> ist auch in typo3 problemlos möglich

was für code bräuchtest du denn?? Den TS Code ist ja egal, weil ich ja keine funktionierneden teile ersetzte,

oder den hmtl code??

[maddy]

Was ich sehr interessant finde, wenn ich die css Datei ganz rausnehme, sieht die Seite genauso aus wie mit css, obwohl ich keine Layout definitionen in meiner html seite habe!

komisch komisch!

[Struppi]

Kann es sein, dass du deine Seite im Quirkmodus darstellen läßt?

Struppi.

Wer oder was ist der Quirkmodus?? kann man das essen oder hat das was mit tieren zu tun?? Sorry ich habe keine Ahnung was du meinst!

Schon mal von google gehört?

Struppi.