Nick 0

I am having difficulty getting IE6 to 'play nice' with the layout I'm trying to create (perhaps it's too specific and I'll have to try another approach.)

The page in question can be found at

I am using the grid system, and have a number of custom styles defined (including a conditionally included stylesheet for IE6). If you examine the center of the page in Firefox or Chrome or IE8 (haven't tested 7 yet) you will see the layout that I'm trying to achieve, however in IE6 this seems to gain extra padding and/or margin to the right of the flash image. I've battled for a number of hours trying to make this extra gap go away, but don't seem to be breaking it, so am asking for a little help :)

Thanks in advance.

1 answer

This was chosen as the best answer

A few points:

Firstly, you've given the div containing the flash 'grid_6', which gives it a width of 340 pixels. You've then given the flash object inside it a 378 pixel width, so you're forcing the browser to ignore one of the widths you've told it to use. IE6 has a habit of hiding content that 'spills over' in situations like this, which I imagine is the cause of your problem.

Secondly, my understanding of the alpha/omega classes in is that they are only needed when you have grid classes inside an element using grid classes, and that they should only ever be used on the left most and right most item respectively. E.g.:

<div class="grid_16">
   <div class="grid_8 alpha"></div>
   <div class="grid_8 omega"></div>

<div class="grid_16">
   <div class="grid_3 alpha"></div>
   <div class="grid_3"></div>
   <div class="grid_10 omega">
      <div class="grid_5 alpha"></div>
      <div class="grid_5 omega"></div>

you shouldn't use them to remove the margin that the grid classes use by default, as you have on the div containing the flash. You also don't need them on your footer content div, as it is not within a grid_* class.

If you want your page to look as it does now in everything, I'd suggest dropping the grid classes on your first row of divs and just wrap them with a grid_16, e.g.:

<div class="grid_16">
    <div id="options1">...</div>
    <div id="slide"> flash stuff here </div>
    <div id="options2">...</div>

then set float left and pixel widths on #options1, #slide and #options2 in your stylesheet. #slide you should set to be the same width as your flash animation (378 pixels), the other two you'll need to work out.

Lastly, you might want to run the page through a HTML validator when you've done the above, as you have a few mismatched tags which might cause you some other problems.

Answered almost 8 years ago by Tim Fountain