IE Layout Wrong

[neilg]

Hi all,

Just a minor problem that I would like to fix if possible.

The layout I have is perfect in Firefox and Safari but it is slightly out in IE.

Below is how it looks in Firefox and Safari. You can see the line that breaks one product to the next lines up with the bottom of the product picture.


Now this is what it looks like in IE, picture very close to descriptive text, break line halfway up the product picture etc.


Anyone got any ideas??

tropicanabikinis dot com dot au

Cheers,
Neil

[Website Rob]

IE 6 if not 7, interpets code in a slightly different way than other Browsers.

You will have to do trial & error to effect changes to the way you want.

[neilg]

Thanks Rob,

Anyone else got any ideas....I am not a guru when it comes to doing the code so any suggestions of where or what to change would be appreciated

Cheers,
Neil

[bodyjewelrystores]

I've struggled with IE layout problems myself, and frequently hacks will need to be applied ;)

I looked at your stylesheet - http://www.tropicanabikinis.com.au/i.../css/style.css

Seems like you should try to play around with this section:

.block_c3
{
width: auto;
background-color: transparent;
background-image: url(../images/block_back1.gif);
background-repeat: repeat-x;
background-attachment: scroll;
background-x-position: center;
background-y-position: bottom;
}

And give it a fixed height in pixels. The grey line comes from "block_back1.gif", and is applied to the bottom of the section as a background image - if it appears in the wrong position, then perhaps IE does not interpret the section's height correctly.

So try adding something like:

height: 151px;

(my guess only - your mileage may vary).. of course I'm assuming that all your thumbnail images have the same height, otherwise this wouldn't line up.

If this does not work then I would try a few other things (like changing the height of the transparent "spacer.gif" image to the left of the text to be the total height of the cell, thus forcing IE to have a fixed cell height).

Good luck

[rstevenson]

There are a couple of common fixes for position problems in IE. They almost seem like magic. One is to set a height of 1px (or maybe 1%) on some element. The other is to set height: 100%. The trick is to find the right element to use, and which trick to apply.

But the general idea seems to be that IE sometimes needs to be kicked into believing that a height is necessary, while other browsers just make the right assumption.

You can Google up more authoritative info on this by looking for "haslayout hacks".

Rob

[rstevenson]

Just took a quick look myself at the Google search, second item.

The height: 1% trick is referred to as the "Holly hack". Now all you have to do is find where to put it. ;-)

Rob

[neilg]

Thanks heaps bodyjewelrystores! I tried your suggestions and sadly they didn't work I really appreciate your help though.

Rob...I will check into your suggestions and see what I can do...many thanks!

Cheers,
Neil