Css Snippets » IE7

Crossbrowser CSS drop shadow

Mark — Wed, 28 Apr 2010 08:39:30 +0000

Drop shadow – ofwel de illusie dat iets zweeft en diepte heeft – wordt al jarenlang met afbeeldingen gedaan, ofwel met nuffige semi-CSS oplossingen.
CSS3 is nog niet voor elke browser 100%, maar drop shadow is één van de zaken die we nu reeds kunnen doen en het werkt in:

Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5+

CSS

.shadow {
  -moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
  -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
  box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
  /* Voor IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* Voor IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Nartuurlijk zal je de ms-filter & filter via conditional comments laden?

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Oplossen :first-child CSS bug in IE 7

Mark — Fri, 19 Jun 2009 14:24:16 +0000

Het zal je zelden voorkomen, maar de ondersteunde pseudo-selector :first-child in Internet Explorer 7 werkt niet meer als je je :first-child in de HTML vooraf gaat met een HTML comment, bekijk volgend voorbeeld:

Foute HTML (in ie7 werkt de css niet meer)

HTML


    
    Start page
    News
    Contact

CSS

li {
    background: red;
}
li:first-child {
    background: blue;
}

Correcte HTML (in ie7 werkt de css weer wel)

HTML


    Start page
    News
    Contact

CSS

li {
    background: red;
}
li:first-child {
    background: blue;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Eenvoudig en valid CSS hacken

Mark — Mon, 01 Jun 2009 06:44:39 +0000

Als je in je stylesheet hacks gaat inbrengen kan je daarmee de validatie ervan zeer sterk naar de knoppen helpen. Volgende manieren laten je toe valide CSS te schrijven die tegelijk als CSS hack kan dienen voor verschillende browsers. Voor Google Chrome en Apple Safari hacks kan je deze CSS Snippet raadplegen.

IE6 en minder

CSS

* html {}

IE7 en minder

CSS

*:first-child+html {}
* html {}

Alleen IE7

CSS

*:first-child+html {}

Alleen IE7 & moderne browsers

CSS

html>body {}

Alleen moderne browsers (niet IE7)

CSS

html>
/**/body {}

Recente Opera 9 en minder

CSS

html:first-child {}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS opacity voor IE6-7 & IE8

Mark — Wed, 20 May 2009 11:15:15 +0000

Opacity is het semi-transparent kleuren van elementen, (dus geen solide kleur) en wordt tegenwoordig door eigenlijk alle browsers ondersteund.
Alhoewel elke op een andere manier van implementeren.

Internet Explorer 6 & 7

CSS

foo {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

foo {
filter: alpha(opacity=80);
}

Internet Explorer 8

foo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Meer info

Meer info over opacity voor ander browser kan je in deze CSS Snippet vinden.

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

In IE8, IE7 emuleren

Mark — Sun, 26 Apr 2009 19:55:58 +0000

Een erg nuttige toevoeging in Internet Explorer 8 is de mogelijkheid om vanuit de Developer Tools direct de compatibility modus van de site te wijzigen. Je kunt switchen tussen Quirks mode (gedrag van IE5), Strict (gedrag van IE 7) en Standards (gedrag van IE8).

HTML

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Hacking IE6 & IE7

Mark — Thu, 05 Feb 2009 17:27:34 +0000

Soms is het onvermijdelijk, maar als je dan toch moet conditioneel gaan hacken, weet je beter ook hoe je bijvoorbeeld enkel Internet Explorer 7 en Internet Explorer 6 aanspreekt zonder dat het een mengelmoes wordt.

Alle browsers

CSS

#MyDiv {
margin : 10px 10px 10px 10px;
}

Enkel IE6

CSS

* html #MyDiv {
margin : 5px 5px 5px 5px;
}

Enkel IE7

CSS

*:first-child+html #MyDiv {
margin : 2px 2px 2px 2px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon