Drupal Tips: Common Browser compatibility issues-Background image not working in IE7/IE8/Opera

For any site - be it Drupal or non-Drupal, this is most probably due to simple mistakes made while entering attributes. Let us see one very common case where a simple mistake can cause glaring issues:

We usually see the css given something like this. We do not see any glaring issue in the class defined below.

#header {
background:url("images/headback.png")repeat-x;
width:1020px;
height:120px;
font-family:arial;
position:relative;
}

BUT IE follows strict HTML standard and will not render this class. Here the background is not at all rendered on IE7/IE8/Opera. It can be fixed by simply adding a space between ')' and 'repeat-x'. The corrected class definition would be as follows.

#header {
background: url("images/headback.png") repeat-x; // Correct
width: 1020px;
height: 120px;
font-family: arial;
position: relative;
}

Just make it a point to stick to standards as much as possible, and you will see that most of your problems vanish in no time.