The background!
Title background
 

QWERKI

Dexter's Jamie Thompson's web laboratory (aka. The Development Version of the Site)

CSS Tricks

- Some CSS tricks I've picked up when building this site

Preamble

It has recently come to my attention that the behaviour described in this article isn't actual due to the factors I thought it was when I discovered it. It is in fact caused by IE running in quirks mode, which does indeed have case-insensitve CSS name matching. When IE is in stndards mode, it does have the correct (case-sensitive) behavior. I'm leaving the article for the time being though as it may still be useful to someone.

During the development of this web site I collided headlong into the problems encountered when trying to develop cross-browser web sites. The initial CSS layout was based upon one found at bluerobot, which I then fiddled with to try and achieve the look I was after. Web development isn't my primary interest though, and this maybe explains in part the awful design decisions I've made :)

Accomodating Internet Explorer in your CSS

Nevertheless, experimentation with the browser-specific voice-family hack found in the bluerobot CSS led me to discover that Internet Explorer parses the CSS rules in a case-insensitive manner, whilst the gecko-based browsers I tested exhibited the correct case-sensitive behaviour. This can be seen in the CSS of this site, where I first use the correct CSS (always using lowercase) to define the transparent backgrounds I want, and then override them in iebodges.css with uppercase versions of the rules, i.e.

base1.css

.contentitem
{
margin:0px -30px 20px 0px;
border:1px solid black;
 
/* Don't want the opacity being applied to the contents of the block element, so can't use "opacity" */
background-image:url("/50percent");
 
/* IE swaps padding and margins, so have to be explicit...not always a bad thing */
padding:10px;
 
/* Lets the browser fit things as it sees fit */
width:auto;
}

...and then in...

iebodges.css

.CONTENTITEM
{
/* IE needs this otherwise the filter isn't applied */
width:100%;
 
/* Have to turn off the existing background-image otherwise it'll override filtered version */
background-image: none;
 
/* Microsoft's convoluted way of using PNG Alpha channels */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ( src='/50percent', sizingMethod='scale' );
}

Thus allowing me to use correct CSS and yet still cater for the great unwashed still using Internet Exploder, neat huh?

Mr Navigation

Links

Mr DataStrip

  • Time:
    03:47:15 am
  • Date:
    31/07/2010
  • Visitors:
    3
  • Max Visitors:
    111 on 2008-10-03 02:45:12
  • Uptime:
    127 days, 07:02:39
  • Really need to think of more things...

Powered By