Up | Down

 

Browser detection for Internet Explorer 5

~ ~
It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it's very necessary. This is due to IE5's misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren't included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.
The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):
#header {padding: 2em; border: 0.5em; width: 10em;}
The solution to this problem? Perform browser detection and send a different CSS rule to IE5:
#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}
IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.
The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can't understand CSS commands with empty comment tags either side of the colons. It doesn't look pretty but it does work!

0 comments:

 
© 2009 - canwecan.com
IniMinimalisKah is proudly powered by Blogger