Member Avatar for TonyG_cyprus

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...........

  • 5 Contributors
  • 5 Replies
  • 267 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by asrockw7

Recommended Answers

All 5 Replies

Member Avatar for asrockw7

IE is using the 'old' or 'Quirky Mode' renderer by default to accomodate for things written back when 'standards' weren't a thing. You can override that. ;)

Backwards compatibility is so NOT cool from a developer point of view.

Member Avatar for Wil 0' Wisp

Didn't say how to override it though? Or is that pay to view?

Member Avatar for pixelsoul

Welcome to the pain that all modern day professional web developers feel.

You'll probably be happy to know that IE 10 supports a lot of the new CSS3/HTML5 spec (but still lacks in some areas still). Your only choices are to workaround the ones that IE doesn't support, or don't use them at all. There are a lot of different techiques for putting in fallbacks and using IE only stylesheets. I just avoid using any thing for crucial website functionality if IE doesn't support it, unless there is a very easy fallback I can put into place.

Member Avatar for jwenting

in fact IE supports the new stuff in v9 and in large part v8, but to prevent old websites written before strict standards enforcement was in place in browsers from breaking that strict enforcement is turned off in them by default, and as a side effect some things that rely on that may not work correctly.

Member Avatar for asrockw7

Didn't say how to override it though? Or is that pay to view?

At the time, I thought this was more of a place for random ramblings so posting actual fixes didn't seem appropriate. Anyway.

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

Should make IE use its latest rendering engine. I'm not actually a web developer so I wouldn't know any details about what that snippet would imply for the rest of your code, but I do know that that thing fixed my CSS real nice. :) There are also PHP and web server equivalents that essentially goes around that line.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.