The background!
Title background
 

jamie-thompson.co.uk

The home of Jamie Thompson on the web

CSS Tricks

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

Preamble

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:46:01 am
  • Date:
    31/07/2010
  • Visitors:
    2
  • Max Visitors:
    111 on 2008-10-03 02:45:17
  • Uptime:
    127 days, 07:01:26
  • Really need to think of more things...

Powered By