Saturday, 29 September 2007

ie css bug fixes

Well, there are many problems that ie appears to have when it comes to css. Most problems can be fixed fairly easily when you know what the problem is, so I thought i'd list a few common fixes i use from time to time.


IE Position, Stretch or Browser Resize Problem


IE stretches too wide or after the browser is resized, ie doesn't reposition elements correctly.

ie fix

Apply position:relative to the body tag, the element and containing elements, which are effected by the bug. e.g. in your css file add

body,
#element_container,
#element{position:relative;}

You may also have to play around with width but the above code should work a treat!


IE White Space Bug

This usually occurs when you've been floating elements around each other. This manifests itself in in ie either as a big line space appears at the bottom of the elements or the elements don't stretch the page relative to each other.



IE White Space Fix

at the bottom of the elements, add a new block element like a paragraph tag with a style of clear:both; e.g.

You may also need to adjust the height, line height and the font size so the block element doesn't appear as a new line, e.g.;