CSS handling Firefox, Netscape & Opera VS IE

[Verwijderd]

Hallo allemaal,

Ben op zoek geweest naar een antwoord op mijn probleem, maar kan het tot nu toe ook nergens vinden. Ik vind het ook moeilijk om de juiste trefwoorden te vinden voor mijn zoekopdracht. Heb gezocht op o.a.: css, Firefox, IE, background, images, handling, includes.

Het probleem is als volgt:

• Ik heb een html-pagina A
• Ik heb een css I die wordt aangeroepen in html-pagina A
• Ik heb een css II die wordt aangeroepen in het bestand css I.

Bovenaan css I staat de include naar css II.
In css II staan een aantal classen (x,y,z) waarin een background-image wordt aangeroepen.
In css I staan, onder de include tag, dezelfde definities waarin voor dezelfde classen (x,y,z) een andere background-image wordt aangeroepen.
Nu is het zo dat in IE de background-images zoals gedefinieerd in css I worden getoond, echter in Firefox, netscape en opera worden de background-images van css II getoond.

De afwijkingen gelden alleen voor de background-images, want andere styldefinities die ik dubbel opneem in css I en css II (maar met verschillende inhoud) worden wel crossbrowser goed getoond volgens css I.

Mijn vraag is, herkend iemand dit probleem? Hoe kan ik ervoorzorgen dat alle browsers dezelfde images presenteren.

N.B. Ik heb mijn redenen ervoor om twee css bestanden te gebruiken en op deze manier te implementeren. Ik ben dus niet op zoek naar andere oplossingen of 'omwegen', maar echt naar de oorzaak van dit probleem.

Alvast heel erg bedankt!

[Fuelke]

De oplossing ligt alvast niet bij Spielerij

>> Webdesign, Markup & Clientside Scripting

[crisp]

Een concreet voorbeeld zou handig zijn

[Verwijderd]

Fuelke schreef op maandag 20 maart 2006 @ 14:12:
De oplossing ligt alvast niet bij Spielerij

>> Webdesign, Markup & Clientside Scripting

Klopt...verkeerd geplaatst.

Ik ga gelijk kijken hoe ik een goed voorbeeld kan geven.

[djazete]

Een concreet voorbeeld zou helpen misschien, maar het kan zijn dat de include op andere volgorde gerendered per browser. En volgens mij, maar dat weet ik niet zeker da's alleen proefondervindelijk, gebruikt firefox de laatste definitie. Dus als IE eerst CSS I rendered en dan CSS 2 en FF andersom omdat ie bv anders met includes omgaat, dan verklaart dat een hoop.
Kortom, probeer die include eens naar onderen te verhuizen en kijken wat het uithaalt...
Dat schiet mij zo even te binnen.
Succes!

[Verwijderd]

---

aanroep vanuit HTML:

<link rel="stylesheet" href="/layout/Support/stylesheets.css" type="text/css" media="all" />

---

Support/stylesheets.css

@import "../an/stylesheets.css";

#menuvlak ul{
border-top:1px solid #000000;
background-image:url(../an/images/bg_submenu_green.gif) !important;
}

---

an/stylesheets.css

#menuvlak ul{
border-top:1px solid #ffffff;
background-image:url(images/bg_submenu_blue.gif);
}

---

Resultaat

In IE:
1 zwarte rand met image bg_submenu_green

In firefox, opera en netscapeL
1 zwarte rand met image bg_submenu_blue

---

Verheldert dit mijn probleem enigszins?

[ Voor 8% gewijzigd door Verwijderd op 20-03-2006 14:30 ]

[crisp]

Verheldert dit mijn probleem enigszins?

Ja. Het probleem ligt 'm ws in het feit dat IE !important niet correct ondersteund

[ Voor 3% gewijzigd door crisp op 20-03-2006 14:32 ]

[Verwijderd]

Nee, dat kan het niet zijn. '!Important' had ik erbij gezet om firefox te forceren het goede plaatje te tonen. IE deed het al precies zoals ik wil.

Heb nu de @import onderaan geplaatst IE geeft alles nog correct weer, maar Firefox snapt er nu helemaal niets meer van; hij negeert de gehele include nu.

[crisp]

Weet je zeker dat je in je geimporteerde stylesheet geen specifiekere selectors gebruikt?
Volgens mij klopt je voorbeeld niet helemaal met de situatie die jij schetst; ik kan het namelijk met jouw code niet reproduceren.

[ Voor 43% gewijzigd door crisp op 20-03-2006 14:39 ]

[Verwijderd]

Ja, het is precies zoals ik hierboven heb beschreven....wat raar dat jij het niet kan reproduceren. Welke css is bij jouw dan 'dominant'? I of II (de ge-include)?

[ Voor 64% gewijzigd door Verwijderd op 20-03-2006 14:44 ]

[crisp]

Ik heb dit:

HTML:

<link rel="stylesheet" href="style1.css" type="text/css">
<div id="foo">foo</div>

style1.css:

Cascading Stylesheet:

@import "style2.css";

#foo {
    border: 1px solid black;
    background-color: green !important;
}

style2.css:

Cascading Stylesheet:

#foo {
    color: white;
    border: 1px solid red;
    background-color: blue;
}

En ik krijg netjes een groene achtergrond en zwarte border in Firefox (zoals verwacht)

[djazete]

Ik dacht dat hij zei dat het ook alleen gold voor de background-image property....

[Verwijderd]

Ja idd, voor het achtergrondplaatje.

[ Voor 77% gewijzigd door Verwijderd op 20-03-2006 14:53 ]

[Verwijderd]

Ik heb trouwens even gekeken of het ligt aan de naamgevingen van de .css bestanden (die zijn nl gelijk), maar daar ligt het niet aan.

[Verwijderd]

djazete schreef op maandag 20 maart 2006 @ 14:52:
Ik dacht dat hij zei dat het ook alleen gold voor de background-image property....

Een 'hij' is in dit geval een 'zij'

[djazete]

Misschien een rare vraag, maar waarom gebruik je precies dezelfde selector in 2 css files als je er maar 1 actief wilt hebben voor beide browsers..? (ondertussen installeer ik FF even op deze pc)

aan haar:
sorry ik bleef gemakshalve hangen in het archetypische beeld van dit soort communities. stom stom stom

[ Voor 24% gewijzigd door djazete op 20-03-2006 14:58 ]

[djazete]

Bij mij doet IE hetzelfde als FF, ook met background property...

Zal even screenies maken als je wilt...
dit is mn repro code:

Css1:

code:

@import "css2.css";

#foo 
{
border-top:1px solid #000000;
background-image:url(CameraShots093.jpg) !important;
}

Css2:
#foo 
{
border-top:1px solid #ffffff;
background-image:url(DSC01422.JPG);
}

index.html:
<html>
<head>
<title>CSS test</title>
<link rel="stylesheet" href="css1.css" type="text/css" media="all" />
</head>
<body>
<div id="foo">Test</div>
</body>
</html>

[Verwijderd]

Zitten de classdefinities allen in externe css bestanden?

Dus dat je in jouw html linkt naar een css x en in die css een css y aanroept? En kun je ze dan ook eens beiden dezelfde filenaam geven?

[djazete]

ja dat is zo. zal ze even dezelfde naam geven en een screenie uppen.

Edit:
screenie:


enne, met dezelfde naam werkt het ook prima.

Check even of je de laatste versies hebt van de browsers (domme opmerking misschien maar je weet het niet).
Ik kan het zo niet reproduceren, of dat aan het missen van een UL tag komt weet ik niet, lijkt me sterk..
heb nu ook geen tijd meer. Succes!

[ Voor 95% gewijzigd door djazete op 04-04-2007 15:21 ]

[Verwijderd]

Shit hee. Raadsel is nog niet opgelost dus. Waarom doet hij het bij jou wel en bij mij niet...?

Misschien ligt het probleem ergens anders, maar waar?

[Digihelp ®]

Zie hier w3 specificatie

Hier staat duidelijk dat de geimporteerde regels ondergeschikt zijn aan de andere regels in het bestand. Het !important woord is hier dus niet eens nodig.

Heb nu geen tijd om te testen, zou me niets verbazen als een van de browsers het fout geimplementeerd heeft.