IE 6 Problems With 3 column Layout & Transparency Issues

[teamleaf]

Okay... so I got rid of some odd alignment problems in IE 6 & 7 by rewriting my index page with the 3 column layout. IE 7 is perfect now! Thanks.

My current problems now only reside in IE 6. For some reason, the middle column of my page displays half a page below the left and right columns.

The only other problem is that IE appears to have absolutely no concept of displaying my png images with their native transparency. Are there any solutions for this, it makes my site look like crap and 50% of the visitors are still using IE 6 for whatever reason.

The site can be found @ www.teamleaf.org

Thanks in advance for all your help!

[abduraooft]

Okay... so I got rid of some odd alignment problems in IE 6 & 7 by rewriting my index page with the 3 column layout. IE 7 is perfect now! Thanks.

My current problems now only reside in IE 6. For some reason, the middle column of my page displays half a page below the left and right columns.

It might be due to the unnecessary modifications made to your layout (from the original http://www.bonrouge.com/3c-hf-fluid.php)

You are dragging the box model bug of IE into your layout by setting a width to your middle column(#main and #content), which is not required.

[teamleaf]

Originally Posted by abduraooft

It might be due to the unnecessary modifications made to your layout (from the original http://www.bonrouge.com/3c-hf-fluid.php)

You are dragging the box model bug of IE into your layout by setting a width to your middle column(#main and #content), which is not required.

So... I put the width on those as a centering hack. The left 50% hack... How could I rewrite that to achieve that same effect without bringing in the box model bug?

[abduraooft]

Setting a style of width:500px;margin:0 auto; on your inner most div having background-image:url(images/Leaf.png); would center it. No need to apply specific widths on your #content and #main.

[teamleaf]

Originally Posted by abduraooft

Setting a style of width:500px;margin:0 auto; on your inner most div having background-image:url(images/Leaf.png); would center it. No need to apply specific widths on your #content and #main.

Yeah... okay I fixed that in the meantime. What about the transparency issue?

Any suggestions for that?

Should I just make that leaf and all the links in one image and then just link the areas?

[abduraooft]

Should I just make that leaf and all the links in one image and then just link the areas?

Yeah, that would speed up the page load by reducing the number of http requests (and decrease the effective page size too)

I'd also recommend you to remove all inline styles from all your tags.

[teamleaf]

Originally Posted by abduraooft

Yeah, that would speed up the page load by reducing the number of http requests (and decrease the effective page size too)

I'd also recommend you to remove all inline styles from all your tags.

All the inline styles have different attributes though... how would I go about removing them?

I fixed the other things right after my other posts, before I even check back here for your responses... but I can't do the same for this one. Its outside my knowledge at this point.

Thanks again!

[abduraooft]

All the inline styles have different attributes though... how would I go about removing them?

I'd do it like

#nav{
background:url(leaf.png) no-repeat top left;
}
#nav li{
line-height:30px;
}
#nav li a{
display:block;
text-indent:-999px;
}
li.goals{
background:url(Goal.png) no-repeat top left;
}
.............

<ul id="nav">
 <li class="goals"><a href="aqua/goal.html">Our Goal</a> </li>
 <li class="downloads"><a href="aqua/downloads.html">Downloads</a> </li>
..........
</ul>

( ie make your markup semantic )

[teamleaf]

Ok... I started on that... and it doesn't seem to work quite the way I want...

http://www.teamleaf.org/indextest.html

[teamleaf]

Bumpity Bump... I guess no one is here on the weekends?