Css Snippets » IE6

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

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

Altijd passende achtergrondafbeelding

Mark — Sat, 09 Jan 2010 07:58:06 +0000

Een achtergrond afbeelding, die altijd past, of het browser-venster nu groter of kleiner gemaakt wordt.

HTML


 
  uwen inhoud hier

CSS

html, body {
 height:100%;
 margin:0;
 padding:0;
}
#page-background {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
#content {
 position:relative;
 z-index:1;
 padding:10px;
}

Voor Internet Explorer 6

CSS

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

Hoe laat je IE6 crashen?

Mark — Wed, 23 Dec 2009 07:36:07 +0000

Ik was verbaasd te zien dat, zelfs zoveel jaren later, het probleem nog steeds bestaat voor Internet Explorer 6 – dus ik dacht dat ik deze snippet even tentoon stel.
Wees gewaarschuwd, als u werkt met Internet Explorer 6, de browser zal zeer waarschijnlijk crashen, waarbij al uw geopende vensters eveneens zullen ineenstorten, en mogelijk wordt daardoor uw systeem onstabiel. Ik zou adviseren u om uw werk opslaan.

HTML

Misschien kan je met deze snippet wel een statement zetten voor je bezoekers van je website die nog steeds met IE6 je site bekijken??

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

Thumbnail afbeeldingen gallerij

Mark — Fri, 20 Nov 2009 06:10:23 +0000

Een thumbnail image galerij waarbij de afbeelding een variabele hoogte kunnen hebben.

HTML


 
 
 
 sul monitor 1
 
 
 
 
 
 sul monitor 2
 
 
 
 
 
 sul monitor, seduto
 
 
 
 
 
 sul monitor, con il koala
 
 
 
 
 
 sul monitor, guarda fuori
 
 
 
 
 
 sul monitor, si lecca una zampa
 
 
 
 
 
 sul terrazzo, sdraiato al sole 1
 
 
 
 
 
 sul terrazzo, sdraiato al sole 2
 
 
 
 
 
 sul terrazzo, al sole seduto
 
 
 
 
 
 sul terrazzo, si lava
 
 
 
 
 
 sul balcone, seduto
 
 
 
 
 
 sulla ringhiera del balcone, in piedi
 
 
 
 
 
 sulla ringhiera del balcone, contro il cielo blu 1
 
 
 
 
 
 sulla ringhiera del balcone, contro il cielo blu 2
 
 
 
 
 
 sulla ringhiera del balcone, con l'ombra sul muro
 
 
 
 
 
 una zampa

CSS

body {
	background-color: #fff;
	color: #000;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	line-height: 1.1;
	text-align: center;
}
.thumbwrap {
	display: block;
	border: 1px solid #999;
	padding: 15px 8px 0 8px;
	background-color: #f8f8f8;
}
.thumbwrap a {
	display: -moz-inline-box;  /* Moz */
	display: inline-table;  /* Op6+, Saf */
	display: inline-block;  /* IE */
	margin: 0 6px 15px 6px;
	border: 4px solid #999;
	text-decoration: none;
	color: #000;
	background-color: #eee;
	border-spacing: 0;  /* Op6 */
	width: 168px;
}
.thumbwrap a:hover {
	border-color: #6f6;
	background-color: #dfd;
}
.thumbwrap a img {
	border-width: 0;
	vertical-align: bottom;
}
.thumbwrap a span {
	display: block;
}
.thumbwrap a span span {
	padding: 4px;
}
.thumbwrap a>span {
	width: 160px;
}

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

De beste IE6 hack die alles oplost

Mark — Sun, 08 Nov 2009 06:48:51 +0000

Eén CSS hack voor internet Explorer 6, die alle problemen in één keer oplost? Hij bestaat, maar je moet voor jezelf uitmaken of je hem toepast of niet, wees er voorzichtig mee, maak een statement of blijf ondersteunen:

CSS

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

CSS Horizontaal drop-down (uitklap) navigatie

Mark — Sat, 24 Oct 2009 07:00:12 +0000

Een crossbrowser oplossing om een multi level drop down menu te maken, alhoewel er gebruik zal gemaakt worden van browser sniffer voor Internet Explorer 6, op basis daarvan zal een HTC bestand geladen worden om :hover ook op ander elementen te laten werken voor dit multi level drop down navigatie menu.

Download eerst deze bestanden

HTML IE6 sniffer

Plak volgende code je

HTML




	Item 1
		
			Sub 1:1
			Sub 1:2
			
				Sub 1:2:1
				Sub 1:2:2
				Sub 1:2:3
				Sub 1:2:4
			
			
			Sub 1:3
			Sub 1:4
			
				Sub 1:4:1
				Sub 1:4:2
				Sub 1:4:3
				Sub 1:4:4
			
			
			Sub 1:5
			
				Sub 1:5:1
				Sub 1:5:2
				Sub 1:5:3
				Sub 1:5:4
				Sub 1:5:5
			
			
			Sub 1:6
		
	


	Item 2
		
			Sub 2:1
			Sub 2:2
			
				Sub 2:2:1
				Sub 2:2:2
			
			
			Sub 2:3
			Sub 1:4
			
				Sub 2:4:1
				Sub 2:4:2
			
			
			Sub 2:5
			
				Sub 2:5:1
				Sub 2:5:2
				Sub 2:5:3
				Sub 2:5:4
				Sub 2:5:5
			
			
		
	


	Item 3
		
			Sub 3:2
			
				Sub 3:2:1
				Sub 3:2:2
				Sub 3:2:3
				Sub 3:2:4
			
			
			Sub 3:3
			
				Sub 3:3:1
				Sub 3:3:2
				Sub 3:3:3
				Sub 3:3:4
			
			
			Sub 3:4
			
				Sub 3:4:1
				Sub 3:4:2
				Sub 3:4:3
				Sub 3:4:4
				Sub 3:4:5
			
			
			Sub 3:5
		
	


	Item 4
		
			Sub 4:1
			Sub 4:2
			
				Sub 4:2:1
				Sub 4:2:2
				Sub 4:2:3
				Sub 4:2:4
			
			
			Sub 4:3
			Sub 4:4
			
				Sub 4:4:1
				Sub 4:4:2
				Sub 4:4:3
				Sub 4:4:4
				Sub 4:4:5
				Sub 4:4:6
				Sub 4:4:7
				Sub 4:4:8
				Sub 4:4:9
			
			
		
	


	Item 5

CSS

#menuh-container {
	position: absolute;
	top: 1em;
	left: 1em;
}
#menuh {
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	margin:2.0em;
	margin-top: 1.0em;
}
#menuh a {
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
}
/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active {
	color: white;
	background-color: royalblue;
	text-decoration:none;
}
/* menu on mouse-over  */
#menuh a:hover {
	color: #fff;
	background-color: cornflowerblue;
	text-decoration:none;
}
/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover {
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover {
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
#menuh ul {
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9.0em; /* width of all menu boxes */
-/* NOTE: For adjustable menu boxes you can
comment out the above width rule.
However, you will have to add padding in the
"#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li {
	position:relative;
	min-height: 1px;
	vertical-align: bottom;
}
#menuh ul ul {
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1.0em;
	margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
	top:0;
	left:100%;
}

div#menuh li:hover {
	cursor:pointer;
	z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

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