IE 6 CSS issue

HTML & CSS
1

Hi,

on the following URL:

       http://www.patrikabooks.com/

There are two sections in the center column, Featured Books and below this New Releases. These two are 3 column e.g. 3 images with details should appear, it works in fine in Mozilla FireFox but in IE6 it is broken, I could not fix it.

If you can not reproduce it in IE6, please refresh your page 2 / 3 times, the reason is that these titles/books appear randomly, so titles with smaller name will be fine even IE6.

Kindly refer to the attached screenshot.

Please help
Regards

2

Hi, had a very quick look and you have set the height on the floated boxes which means they won’t snag but I’m guessing that your height with titles is coming out greater than that and IE6 will always expand a container to contain its contents.

This means that some containers will be bigger and then snag on the next.

You could add overflow:hidden to clip the content and keep them all even.
e.g.


.centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .specialsListBoxContents {
height:175px;
padding:2px 11px 0 !important;
[B]overflow:hidden;[/B]



}

If that isn’t the problem I’ll have a more detailed look.

(For an automatic method you would need to use an inline-block method instead of floating but would need a few changes to accomplish.)

3

Thanks !!! i am waiting for your more response.

4

In IE6, I think it also is that the javascript in the “bannerSix” div is adding letters to the prices.

Without that script the letters “INR” are not there and the column seems to work also in IE6?

5

Please clarify?

Did you try what I said and what are the issues now?

Also see Erik’s post above.

6

Paul,
Thanks for the reply, I tried what you suggested and it worked on the Featured block only, somehow the same is not working on the Releases Block, moreover, it will truncate the text, is it possible to wrap the long string to the next line?

Regards

7

Erik,

The JavaScript piece is inserted for Dynamic Currency Converter Functionality, courtesy dynamicconverter.com. It is an important component for this website, as its target audience is in many countries, they would like to see the price in their currency, a real time conversion.

Regards

8

Thanks for the follow up!

I understood that later, I didn’t read the script comments before I posted and I didn’t realize the letters meant Indian Rupies. :blush:

Nice function! :slight_smile:

9

I think the easiest solution for you at present is to increase the height by another 50px (or more) to account for all eventual heights. I’m sure a bit of space would allow the page to breathe a bit easier anyway as it looks a bit too tightly packed at the moment.

Otherwise the only other solution would be to use the inline-block method that you can see working in the link I posted above but would require some changes to your html.

is it possible to wrap the long string to the next line?

In IE, FF3.5 and Safari 4 you can use “word-wrap:break:word” to break a sting of unbroken text at the boundary if that’s what you were talkin about.