Joomla Templates

Hello, I thank you for the new Transparent Bliss.
I was so glad to see that the right column stayed in place and not drop.

but . . .

On all my IE6's, after the site loads, it looks like the right column will stay put but then it slides to left and rests against the center column.

Oh, and this is straight 'out of the box' install.

Please have a look... http://destined2wed.com/d2wjoo15 (with IE6 of course :) )

Thanks

I also seem to have found a new issue to address. I am using the top banner section to place a header graphic. However, IE6 is stretching it to a 728x728 image, thus pushing everything down, and distorting the image/text in this header.

Right clicking and looking at the properties for the image, it shows a file called "blank.gif". I am assuming that this has something to do with the png fix for IE6, or perhaps a css setting is off.

Thanks.
http://orphans.christianoutreachonline.com

Heya Smudley,

My guess is this stylesheet:
destined2wed.com/d2wjoo15/modules/ mod_sb...mod_sbd_rollmenu.css

Is conflicting - try disabling that module briefly and see if the issue still occurs.

It could be one of the other style sheets that some of your 3rd party extensions have installed and are calling but the one above loads after teh template css and the last css to load overrides the others if any styles conflict.

Hiya,
Have you moved the blank.gif from template /images to the site root? This may be causing the issue. Let me know if you've done this already and I'll think again.

Hey Big Bear, Yup, you were right. It has something to do with that 3rd party css.
Now I have to figure out what's causing that.
Thanks!

Big Bear wrote:
Hiya,
Have you moved the blank.gif from template /images to the site root? This may be causing the issue. Let me know if you've done this already and I'll think again.

I just did this, although the date on the blank.gif that was already in the root was actually a couple of days newer than the one in the /images folder.

Now I just need to fire up my old laptop that has IE6 as test it. Although I may also need to test it at work since that is where I first saw the problem. Worst case, I should be able to answer yes or no to the fix by Tuesday.

Heya,
I'll compare the CSS for you myself tomorrow. Just tearing off to work. Let me know if you fix it in the meantime.

Ok. It has been chcked, and it is still stretching that top banner. As I said previously, I have copied the "blank.gif" file from the template into the root, replaceing the one that was originally there.

Hiya,

I've done a couple of quick tests and the issue only seems to arise with .PNG images. I believe it is an issue with teh PNG transparency fix and teh image not having a specific height width set by the banner component.

A very quick fix would be to use a .GIF in place of the current PNG.

Alternatively we can add CSS to force the image to maintain it's original size.

Try:

.banneritem img {
height:90px;
width:728px;
}

Is the class of "banneritem" already in the template? How will that affect other banners on the site? For instance I am using the banner module for the pictures on the right side so that as more are added they will rotate more.

I could probably use a gif since it is just text. But I will try the css fix first.

you are right - don't use the CSS I suggested if you are using banners with other dimensions elsewhere on the site.

You can go into the module for the top banner and add a suffix for it - this will will give us a unique class we can target in our stylesheet.

Actually, the .banneritem is used for other banners, as I have made a change on that to remove a border and add a space for the orphans picture on the right side.

However, there is a style already set for the top banner that includes the actual dimensions:
#topbannerad {
float: right;
width: 728px;
height: 90px;
}

And according to firebug, it seems to be associated with that spot.

Should there be some specific code in the ie6 style sheet?

It's not really a template issue but we are trying to correct the problem by forcing height and width of the offending image - the png transparency fix is pretty good but not perfect and when a size is not specified it stretches the png out.

If you go into teh banner module you are publishing top and add a suffix we should then get a new unique css class we can apply the required dimensions to.

Ok. I made the suffix, and applied the style with the suffix in my css. Checked it out on my laptop, and it seems to have worked, but I will double check it tomorrow with my machine at work (where I seem to keep finding these issues).

Thanks again for the help.

no problem - the key with this was targeting the img tag which makes it specific to the image.

#topbannerad {
float: right;
width: 728px;
height: 90px;
}


The code above only sets dimensions ONLY for the containing div as I'm sure you see.

Let me know if you have any other issues, I'm always happy to help.