Forum Moderators: not2easy
I've finished a site using 960 grid system. everything fine in moz, safari, IE7 etc. Final checks in IE6 and found the normal issues with l/r margins etc. and have entered conditional comments to sort out. However!...
In one page I have a right hand column that will not float left. This is normal and the remedy is usually to adjust the left right margins that come with each .grid_XX and this allows the float.
I thus adjusted the margins in conditional comments for lt IE6 expecting to see my div float up into it's correct position. But try as I might, and no matter how small I made the width of the left hand column it would not float!
Since I do most of my development in moz - I put a 1px border around all the divs on the page to see what I could see in IE6 where the problem is.
What I found was that however small I make the left hand div (to give the right hand div enough space to float within the overall container) all that is happening is that the text in the div conforms to the width that I set but not the div itself. So the right hand column never gets a chance to float into it's correct position.
I have verified the code - all is good. It seems to me that the <div id="leftColAbout"> is refering back to another set of CSS instructions - however, if I change the class from grid_13 to say grid_12 or grid_5 or whatever - all that happens is the text within the div adjusts but the 1px outline stays at 760px wide (grid_13). Why would the conditional comments correct all other requirements correectly but not deal with grid_13? I'm really stumped. I need someone who works with 960 grid system to help here probably, but lots of folk do, so hopefully that's possible.
Strangely if I increase the grid_13 to grid_16 the div expands to fill the space as anticipated - but will not shrink under the width of grid_13. For anyone used to 960 grid system the info below gives the info required to see the structure.
I have stripped out the basic div structure and listed it below - I am really stuck on this so any help or pointers will be great.
<body>
<div id="container" class="container_16">
<div class="container_16 grid_16" id="header-wrap">
</div>
<div class="clear"></div>
<div id="hozmenu" class="grid_16">
</div>
<div class="clear"></div>
<div id="leftColAbout" class="grid_13"> *offending div*
<div id="testimonial7About" class="testimonial">
</div>
</div>
<div id="rightColAbout" class="grid_3">
</div>
<div class="clear"></div>
<div id="footer" class="grid_16">
<div id="backToTopAbout" class="backToTopSubpage">
</div>
<div id="faqAbout" class="faqSubpage">
</div>
<div id="startNowAbout" class="startNowSubpage">
</div>
</div>
<div class="clear"></div>
<div id="baseline" class="grid_16 baseline">
<div class="grid_5 alpha baselineleft">
</div>
<div class="grid_5 baselinecentre">
</div>
<div class="grid_6 omega baselineright">
</div>
</div>
</div>
</body>
and here the conditional comment:
#leftColAbout { margin-right: 0px; margin-left: 0px; padding: 40px 0px 0px 0px;}
