Jump to content

Archived

This topic is now archived and is closed to further replies.

DaveLinger

png transparency and image widths

Recommended Posts

so here's the deal. I'm working on the upper "navigation" table cell for a website. Here's basically what I'm looking for:

Logo against the left side, then a "filler" image (used to stretch all the way across to the other side), all sitting on top of the background image of that cell. Right now I have the logo and filler image done and in png format, and the transparency looks beautiful in firefox, but not IE, it just shows grey instead. Guh, here's some code...

[code]<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<table width="100%" border="1"><tr><td width="100%" colspan="2" style="background-image: url(images/test.jpg)" class="header">
<p align="left"><img src="images/corner.png"><img src="images/cornerstretch.png" width="99%" height="144"></p></td></tr><tr><td width="20%">

Navigation

</td><td width="80%">

Body

</td></tr><tr><td colspan="2" width="100%"><p align="center">
All content is copyright Wade Linger. <a href="mailto:dave.linger@gmail.com">Contact the webmaster</a></p>
</td></tr></table>
</body>
</html>[/code]

(the style tag needs to be inside the page for the background, as it will be dynamically chosen by php in the final version)

CSS:

[code]body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px;
}
table {
border-collapse: collapse;
}
td {
font-size: 10px;
}
.header {
padding: 0px;
}[/code]

I just dont know how to get the filler to stretch the rest of the way across, and how to get transparency working in IE without using GIFs or flash...

Share this post


Link to post
Share on other sites
IE6 and below doesn't support PNG transparency. Period. There's no way for that to be fixed.

Share this post


Link to post
Share on other sites
umm.... okay.... what about making the filler image take up the rest of the area?

Share this post


Link to post
Share on other sites
IE does support png but by using a filter

You can visit this page for more details http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/AlphaImageLoader.asp

Basiclly, you gonna need to replace your images with divs and set the images as backgrounds. and for IE you can use _background:none; and add the filter.

There are tons of javascripts out there that can handle the whole process as well.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.