Forum Moderators: open

Message Too Old, No Replies

PNG transparencies again

         

Greven

9:40 am on Dec 23, 2006 (gmt 0)

10+ Year Member



I'm having issues with PNG transparencies and its really geting annoying. After researching and trying several methods, I am currently using the method found here [koivi.com]. It is generating the below code:

<div id="left" class="column">
<img src="images/thinger.jpg" alt="thingerleft">
</div>
<div id="right" class="column">
<img src="images/spacer.png" style="width: 189px; height: 40px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/thinger1.png', sizingMethod=scale);" alt="thinger">
</div>

The issue I'm having is that this method, as well as the JS version of this is pushing thinger.jpg, the first image which should have nothing to do with this, about 300px to the right, out of its containing div and into my central div. If anyone has an idea please let me know as I'll soon be bald.

cmarshall

2:32 pm on Dec 23, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Looks more like a CSS issue than a PNG xperency issue.

What is the CSS you use for div.column and div#left/div#right?

Greven

6:22 pm on Dec 23, 2006 (gmt 0)

10+ Year Member



Here's the requested CSS with unessecary info removed:

div#container .column
{
position: relative;
float: left;
}
div#left
{
width: 190px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
height: 1200px;
}
div#right
{
width: 200px; /* RC width */
margin-right: -200px; /* RC width */
height: 1200px;
}

I'm using A List Apart's "Holy Grail" layout if that matters. If I forgo the PNG fix and simply have:

<div id="left" class="column">
<img src="images/thinger.jpg" alt="thinger"> </div>
<div id="right" class="column">
<img src="images/thinger1.png" width="189" height="40" alt="thinger">
</div>

Then the image in the left div is positioned correctly, but of course with no PNG alpha support.

I should mention that this works fine in FF, Opera, IE7, and of course is only affected in IE5.5-IE6 because that the only time the PNG fix goes into play.

I have validated both my HTML and CSS without warning, and really appreciate the help, thanks.

[edited by: Greven at 6:23 pm (utc) on Dec. 23, 2006]

Greven

9:12 pm on Dec 23, 2006 (gmt 0)

10+ Year Member



So apparently it is moving my entire left column. I'll have to play more, but if anyone still has any idea please let me know

Greven

3:32 am on Dec 24, 2006 (gmt 0)

10+ Year Member



Apparently applying a height of 100% to the container was causing the issue. no idea why, but its fixed. Thanks.