Previous Message
Next Message

IE column width problem

Sent by Don - htmlfixit.com on 27 March 2006 13:01


> The original site is www.a-wind-farm-too-far.com
> The new page is www.a-wind-farm-too-far.com/indexnew.htm
> 
> The original layout has a column ('sidebar') floated right with the main
> content in 'maincol' inside 'container' which is floated left.
> 
> The new layout has added 'infobar' inside 'container' and floated left
> with a left margin on 'maincol' to make space for it. This works in
> Opera and Firefox but in IE 'maincol' is displaced below 'infobar'.

This is very typical!  It happens with most designs that are tighly 
assembled and it is caused by differences in how ie6 calculates 
dimensions.  As usual, allow for padding and margin differences, add an 
ie 6.x only stylesheet and hum merrily on your way.  You almost always 
need to reduce the column width of either infobar or maincol inside of 
container for it to work.  The reason it drops one below is that the 
contents are too wide for the container by it's math.

I personally put my special ie only rules in conditionals like these 
nowadays (top one for 6 and below and bottom one for 7 and above if needed):
<!--[if lt IE 7]>
<style type="text/css" media="screen">
/* ie 6- stuff in here */
</style>
<![endif]-->

<!--[if gt IE 6]>
<style type="text/css" media="screen">
/* ie 7+ stuff in here */
</style>
<![endif]-->

I have discontinued my use of the * and other similiar hacks.

Don
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: