I've just been playing this morning with some css3 stuff, and realised (I know I'm behind the times on this) what total Cr*p a certain well distributed browser is! Not only do we have to add lines and lines of code to our css because the thing has it's own rules, and even then they don't work!
A simple sample:-
index.html
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class='header'>
</div>
<div class='wrapper'>
<div class='banjo'>
</div>
</div>
</body>
</html>
and style.css
body{
background:#EDEFEF
}
.header{
background:#D5DEDF;
border:1px solid #485253;
height:125px;
margin:10px auto;
position:relative;
width:85%
}
.wrapper{
-moz-box-shadow:5px 8px 8px 9px #4D4D4D;
-webkit-box-shadow:5px 8px 8px 9px #4D4D4D;
background:#ffffff;
border:1px solid #7E8A8D;
box-shadow:5px 8px 8px 9px #4D4D4D;
height:70%;
margin:10px auto;
position:relative;
width:85%
}
.foot{
font:9px comic sans ms;
margin:0px auto;
text-align:center;
width:85%
}
.banjo{
-moz-box-shadow:2px 4px 5px 5px #4D4D4D;
-moz-transform:rotate(-9deg);
-webkit-box-shadow:2px 4px 5px 5px #4D4D4D;
-webkit-transform:rotate(-9deg);
background:#ffffff;
box-shadow:2px 4px 5px 5px #4D4D4D;
height:300px;
margin:15px auto auto 15px;
position:relative;
transform:rotate(-9deg);
width:300px
}
Works great on Firefox, Opera and my fave Chrome, on IE.... not a chance!
Even the simple margin rule won't render, and the box I've placed (<div class='banjo'>
) doesn't even show up on IE.
If I ever get round to actually publishing anything out there, I think a splash screen "View on anything except IE" will be in order!
Well...... thats my rant of the month over...........