I wondered if anyone could take a quick look to see what the problem might be. I'm not sure if it's a double margin problem. I'm using the ie7-js script which fixes transparency issues in this browser but apparently it also fixes the double margin bug so I'm not sure that that's the problem.

If anyone has any idea what the issue might be, could you let me know.

As always, appreciate the assistance.

PaulOB
—
2010-03-29T09:42:01Z —
#2

Hi,I haven't looked at the code yet but I see that IE6 is showing a missing image icon which is probably the blank image that most pngfix solutions require. Check whether you have missed this out (and whether your script requires it).

PaulOB
—
2010-03-29T10:01:54Z —
#3

Ignore the above - you do have a missing image (/images/consumer_flash_static.jpg) but its not from the pngfix.

The problem in IE6 is the double margin bug on the floats (see faq on floats) and the fact that you have placed inner elements inside info-consumer which are the same width as the parent but you have added 20px margins to them making them 40px too big.

Could I ask another question? As mentioned before I'm using the ie7-js script to fix transparency problems on the page for ie6. I have some links in the sidebar with some images in the background. I'm also using a:hover for some rollover effects, eg.

It all works perfectly well in all browsers except ie6. When you hover in this browser, the image all gets squashed into the <a> tag even though I've created a rule that should offset it -53px - just showing the rollover portion of the image.

Is this another bug in ie6 and if so, is there a workaround? Or could it be a transparency issue that's not fixed by the script I'm using.

PaulOB
—
2010-03-29T14:37:51Z —
#5

Hover changes for png images using the position property don't usually work for IE6. For ie6 you would need two different images and swap the whole image on hover.

I didn't check which png script you were using but the one I usually use is this one.

gwh
—
2010-03-30T00:18:48Z —
#6

Paul_O_B said:

Hover changes for png images using the position property don't usually work for IE6. For ie6 you would need two different images and swap the whole image on hover.

I didn't check which png script you were using but the one I usually use is this one.

I had to create separate images for ie6 (bit of a pain) as you suggested and this has worked so thank for that.

Since there was background repeat transparent images in the layout the code fixed this. I'm not sure if the twinhelix code supports tiling for transparent images, does it?

RyanReese
—
2010-03-30T02:12:32Z —
#7

It supports every kind of image :). I wouldn't use that IE7 js code. It can massively slow down your site and there are a few quirks with it

gwh
—
2010-03-30T13:23:58Z —
#8

You know the page in question has a semi-transparent png image loading over the top of another image which gives the illusion that the image behind the semi-transparent one is fading to transparency. Currently, the fully opaque image is loading first and then the semi-transparent one. This isn't a good look because I wanted the viewer to see the effect of the transparency right from the beginning. Is there a way to force the semi-transparent image to load before the opaque one? Would the twinhelix code ensure this?

PaulOB
—
2010-03-30T13:39:32Z —
#9

If you are talking just about IE then no the filter image will always load afterwards.

Why don't you just use a single transparent image instead of 2 if it worries you? Obviously that won't allow you to change the image without creating another transparent one.

gwh
—
2010-03-30T15:07:36Z —
#10

Paul_O_B said:

If you are talking just about IE then no the filter image will always load afterwards.

Why don't you just use a single transparent image instead of 2 if it worries you? Obviously that won't allow you to change the image without creating another transparent one.

I can't believe I didn't think of using just one image in the first place. I've actually got 3 images making up that top banner. This would have simplified the layout so much. If I do make just the one and say put it in the body tag, will this affect the sticky footer? I mean I'd be removing these elements which are currently holding all those images:

The only problem with this is that for it to work it depends on the height of the outerWrapper div. So even though I got it to work on the home page, on some of the inner pages where the div expands due to there being more content, there's still some white space below the footer on these pages. So does that mean that I have to create different style rules for all these different pages in order for the sticky footer to work on all of them? Surely there must be an easier way to do this?

RyanReese
—
2010-03-31T01:46:01Z —
#14

Hi, the point of a sticky footer is to stick to teh bottom of the browser if there isn't enough content. If there is enough content then it will push the footer down.

The inners of the structure of the sticky footer code (where the content is) can't be absolute positiioned. It gets removed from the flow of the document and thus broken easily :).

gwh
—
2010-03-31T03:22:33Z —
#15

But the following two elements need to be positioned relative to the outerWrapper:

It doesn't matter that you have absolutely placed the above 2 elements because they are not interrupting the normal flow of the page.

You shouldn't need to change anything as the sticky footer height and the negative margin are the only things that should match and will never change.

The page is always a minimum of 100% high but will grow as required when there is more content and the footer will move down accordingly like a normal footer.

It makes no difference what content you add. On pages where there is not content the sticky footer stick to the bottom of the viewport. On longer pages it sist at the bottom of the document.

Now that you have removed the images from the top you can simplify the page a bit and use a negative bottom margin instead and that will allow the footer to overlap a bit as you seem to have it too far away.

div#content_main, div#info_consumer, div#flash{display:inline;}/*IE6 double float margin bugs*/
div#info_wrapper_top,div#info_wrapper_bottom{width:298px;}/*You set 318px width on these to match the parent. But you add 20px right margin thus making these two elements 20px too wide. Decrease the width 20px*/

Also be aware you are having PHP errrors. Example, (taken from your source)