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

Jquery – laat change() werken in IE8 & IE7

Mark — Sun, 28 Mar 2010 09:09:10 +0000

Om hoofdpijn van te krijgen, change() function werkt blijkbaar niet in Internet Explorer 8 & 7, dus waarschijnlijk ook niet niet in Internet Explorer 6. Maar de oplossing is vrij eenvoudig;

Met bind() 2 functions meegeven, click() voor IE en change() voor de anderen:

Niet crossbrowser manier

Crossbrowser manier

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

Conditionele body tag voor IE

Mark — Sat, 27 Feb 2010 07:14:26 +0000

Je kan CSS via conditionele comments (zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.

HTML

Het enigste wat je nu moet doen is de uitzondering toevoegen aan je reeds bestaande CSS.

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

Text-indent op submit voor ie6 & 7

Mark — Sun, 17 Jan 2010 07:08:22 +0000

Tekst values op een submit button zou je willen verbergen als je de submit knop wilt vervangen door een afbeelding, met text-indent kan je voor alle browsers de tekst-valu verbergen, bij Internet Explorer 6 & 7 lukt dit niet, hiervoor is nu een oplossing:

HTML

CSS

form input.knop {
text-indent:-9999px; /* Voor alle browsers */
font-size:0; /* Voor alle IE 6&7 */
line-height:0; /* Voor alle IE 6&7 */
}

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

Oplossing “trappen effect” in IE6

Mark — Sun, 29 Nov 2009 07:43:18 +0000

Bijna elke webdeveloper gebruikt lijsten om een navigatie te maken, in de lijst maken we dan links en deze floaten we dan en normaal gezien is alles in orde …. voor de moderne browsers. IE6 en IE7 zullen je het trappen effect tonen. Als je het gezien hebt, weet je waarover ik het heb:

Normale code

HTML

CSS

ul {
    list-style: none;
}
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

Fixed CSS voor Internet Explorer

CSS

ul li {
    float: left;
}

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

Crossbrowser transparante kolommen

Mark — Sat, 03 Oct 2009 12:56:15 +0000

Transparantie is iets wat moeilijk ligt, nog steeds, tegenwoordig, door de gebrekkige ondersteuning van IE6, maar met volgende methode kan je transparantie in kolommen verkrijgen met een kleine IE6 hack in je CSS, je kan het natuurlijk beter in een conditionele comment gieten:

Download afbeelding

Download volgende afbeelding:

HTML





A demonstration of cross-browser transparent columns
A demonstration of how to implement cross-browser transparent columns. It's used by having combination a transparent div with the same height as it's parent and a div containing the content. Then we pull the overlay div to the left and set the content div to position: relative; to fix the z-index. Check the source for more info.
Since IE6 lack support for absolutely positioned elements with both top and bottom (this is true for right and left as well) we have to compensate for this using proprietary CSS expressions. Voilá!
Browsers
Tested with and works in Firefox 3.x (Windows, Solaris & OSX), Safari 3 (Windows & OSX), Opera 9 & 10 (Windows), IE6 and IE7.
Quirks to have in mind
You must to set the width of the parent columns for this to work properly. Each column needs it's own ID and it's own IE6-rule for the expression: (). It also won't work in IE6 without javascript, which is a minor issue since it degrades gracefully.





A sidebar
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at felis. Praesent vulputate, tortor vitae bibendum dignissim, risus enim congue lacus, tincidunt condimentum sem arcu eget dui. Nulla ligula. Etiam lobortis, dolor eget volutpat posuere, nisl metus fermentum velit, vitae egestas purus massa vestibulum dui. Donec eu ante. Suspendisse feugiat, ante ut pulvinar ultrices, nisi tellus lobortis felis, id dapibus neque lorem nec nisi. Aenean lorem lectus, consectetuer ac, ornare vel, eleifend tincidunt, nibh. Nullam auctor. Nulla facilisi. Suspendisse sed erat. Ut vitae sapien. Duis libero risus, ultrices eu, porttitor at, eleifend vitae, massa. Integer magna. Proin a diam. Curabitur congue.

CSS

body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background: url(pattern.gif);
color: #fff;
width: 770px;
margin: 0 auto;
padding: 50px;
}
h1,h2 {
color: #77AFC7 !important;
margin-bottom: 0;
line-height: 1.2em;
}
p {
margin-top: 0;
}
a {
color: #aaa;
}
a:hover {
color: #FFF !important;
text-decoration: none;
}
code {
background-color: #100;
padding: 0.2em 0.5em;
display: inline-block;
}
#wrapper {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
}
.container {
position: relative;
float: left;
}
.content {
position: relative; /* Fixes the z-index */
float: left;
}
#column-1 {
width: 500px;
}
#column-2 {
width: 250px;
margin-left: 20px;
float: left;
display: inline;
}
#column-1 .content {
padding: 20px;
width: 460px;
}
#column-2 .content {
padding: 10px;
width: 230px;
}
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); }
* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }

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

Target=_blank op de XHTML manier

Mark — Fri, 18 Sep 2009 10:35:24 +0000

Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

HTML

Je originele link

external link

Aangepaste link

external link

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

Haslayout oplossen in IE6 & IE7

Mark — Sat, 08 Aug 2009 09:01:25 +0000

Haslayout is een browser specifieke eigenschap van windows browser Internet Explorer om te zeggen of een element dimensie moet krijgen van zijn siblings (elementen met inhoud in het betreffende element), maar door sommige CSS eigenschappen toe te passen verandert dit soms naar Haslayout-1 en krijg je niet hetzelfde effect als in andere browsers. Hoe je dit kunt oplossen met volgende 2 kleine CSS Snippets:

Conditionele CSS voor IE6

Conditionele CSS voor IE7

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