Jump to content

png transparency and image widths


DaveLinger

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...
Link to comment
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.