IF IE werkt niet?

[pasmaskas]

Ik ben bezig met wat html/css oefeningetjes waar de footer over de hele breedte van de pagina moet staan. Nu lukt dit wel in firefox safari enzo maar niet in internet explorer nu heb ik een css geschreven die in ie de footer gewoon net zo breed laat als de website zo datie niet veerspringt. alleen nu werkt de regel hier onder niet:

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

Hij pakt in ie7 gewoon de andere css

Wat heb ik fout gedaan? ik heb ze nu allemaal al geprobeert van <!--[if IE]> tot <!--[if lt IE 9]> en allemaal werken zij niet.

Hier is een link naar de website: http://webdiezign.nl/testwebsite/footer100ie/index.html

gr pasmaskas

 

[Berkery]

Je moet de IE-specifieke code plaatsen onder de generieke, dan wordt het zoiets:

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if IE]>

Etc...

Nu 'overruled' de gewone stylesheet de IE-specifieke weer.

 

[pasmaskas]

Beste Berkery bedankt voor de reactie ik heb het nu onder de generiek css gezet alleen dit werk helaas ook niet

doe ik echt iets verkeert? Want als ik de style.css vervang voor iestyle.css werkt hij wel naar behoren zo als ik hem in ie wil zien

 

[nestles]

hou er rekening mee dat internet explorer bijna altijd wel roet in het eten gooit bij de webdeveloppers....

 

[pasmaskas]

Ja daar baal ik van ik probeer voor wat ik kan het zo goed mogelijk te doen alleen elke keer 1 of meerdere onderdelen niet goed

 

[Naarling]

In plaats van drie conditionals voor IE5, 6 en 7 is het wellicht handiger om dit te doen.

<!--[if lte IE 8]>
code
<![endif]-->

Daarmee worden alle IE versies ouder dan IE8 aangesproken. Al zie ik ook niet waarom wat je nu doet niet zou werken.

 

[csshunter]

Hoi pasmaskas en anderen,
Ik heb ze om te beginnen even losgekoppeld:

1. Deze is wat er verwacht wordt van browsers die geen Internet Explorer zijn: footer100-notIE.htm.
   De footer is hier schermbreed.
   Bekijk je die in IE, dan begint de footer in het midden van het scherm (plus een L/R-scrollbar).
   
   
2. Deze is wat er verwacht wordt van de IE's, met de IE-only styles in het CC: footer100-IE.htm.
   De footer zit hier in IE op de goede plaats, maar is niet schermbreed: even breed als de header en de rest.
   Bekijk je deze in niet-IE, dan is het resultaat hetzelfde!

Waarom werkt het IE-stylesheet niet voor IE als je deze twee combineert?
Dat hangt van de manier van combineren af!
Bekijken we wat er gebeurt:

• Eerst wordt het algemene stylesheet opgeroepen, daarna het IE-stylesheet.
• Maar: het algemene stylesheet heeft een aantal style-regels die niet in het IE-stylesheeft staan, en ook niet door het IE-stylesheet worden geannuleerd:

body {
   text-align: center;
   }
#content {
   margin: 0 auto;
   text-align: left;
   }

Die regels blijven dus ook voor de IE's gewoon doordraaien!

Wil je dat niet, dan moeten ze ofwel tegengas krijgen in het IE-stylesheet, ofwel de 2 stylesheets moeten volledig losgekoppeld worden, door aan IE niet het algemene stylesheet toe te dienen. *)
Dit 100% loskoppelen kan door een "omgekeerd Conditional Comment" toe te passen voor browsers die niet IE zijn (dan krijgen de IE's die niet te zien):

<!--[if !IE]>-->
	<link href="http://webdiezign.nl/testwebsite/footer100ie/style.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->	

<!--[if IE]>
	<link href="http://webdiezign.nl/testwebsite/footer100ie/iestyle.css" rel="stylesheet" type="text/css">
<![endif]-->

Zo worden de schapen van de bokken gescheiden, en is het resultaat hetzelfde als in de eerdere losse versies:

• Uitgesplitst naar browser: footer100-combi.htm
• Bij andere browsers is de footer schermbreed, bij IE gecentreerd maar paginabreed.

Probleem opgelost.

=======

Andere oplossing! :d
Een andere oplossing om Internet Explorer in het gareel te krijgen is het handhaven van alleen het algemene stylesheet, maar met de toevoeging:

#footer{
	...
	left: 0; /* voor oudere IE's */
}

Hiermee begint IE net als alle andere browsers met een schermbrede footer vanaf de linkerkant.

• Test: footer100-all.htm
• Dit werkt voor IE7, IE8 en IE9.
• Voor andere browsers kan het geen kwaad.

Conclusie: er is dus helemaal geen CC met speciale IE-styles nodig.

Met vriendelijke groet,
CSShunter
________
*) Beide stylesheets geven de volledige css voor de pagina, dan kan dat.

PS: Met IE6 zou ik maar geen rekening houden, die is qua gebruik volledig ter ziele en komt in de browser-statistieken niet meer voor.
IE6 werkt trouwens ook niet met het IE-stylesheet:

Over IE5 zullen we maar helemaal zwijgen.

 

[pasmaskas]

Bedank css hunter het werkt

 

[csshunter]

Hé, net stond hier nog een vraag van iemand die niet begreep waarom het werkte, maar toen in m'n antwoord wilde inzenden, ging dit niet.
Bij een refresh was de vraag weg!

Voor wie toch het antwoord wil weten: hier is het.
=======
Ah, het zit zo:
Als je eerst een algemeen stylesheet hebt, en daarna een aantal <!--[if IE]> style-regels, is het niet zo dat in IE de algemene styles buiten werking worden gezet.
Het <!--[if IE]> betekent dus niet "maar als IE, dan ...", maar: "en als IE, dan ...".
Probeer maar:

<style type="text/css">
   body {
      background: black;
      color: white; 
</style>
<!--[if IE]>
   <style type="text/css">
      body {
         background: white;
         }
   </style>
<![endif]-->

Hiermee zie je in alle andere browsers dan Internet Explorer een zwarte achtergrond met witte letters.
Maar in Internet Explorer zie ja alleen een lege witte pagina.

Dat komt omdat in de <!--[if IE]> alleen de achtergrond op wit wordt gezet.
De witte letterkleur van de algemene styles blijft ook in Internet Explorer gelden: dus zie je niets!

Dat is de C van CSS: Cascade!

• Alles wat zich onder de waterval bevindt, wordt ook nat (krijgt dezelfde styles),
• tenzij je een paraplu opzet (tenzij je in een volgende styleregel het vorige ongedaan maakt).

In het voorbeeld hierboven is het gedaan met twee style-blokjes in de <head> van de pagina, maar met het aanhaken van twee stylesheets werkt het precies zo:

• Als het eerst geplaatste stylesheet het algemene stylesheet is, en het tweede alleen voor IE:
  dan blijven de algemene regels ook voor IE gelden, tenzij je ze voor IE herroept.
• Als het eerst geplaatste stylesheet het IE-stylesheet is, en het tweede het algemene:
  dan werken de IE-styles niet voor zover ze ook in het algemene stylesheet staan: dan vervangt het algemene stylesheet die IE-styles.
• Daarom moeten de <!--[if IE]> styles altijd als laatste in de html-volgrde staan.

Met vriendelijke groet,
CSShunter