Jump to content


Photo

png transparency and image widths


  • Please log in to reply
3 replies to this topic

#1 DaveLinger

DaveLinger
  • Members
  • PipPipPip
  • Advanced Member
  • 268 posts
  • LocationWV, USA

Posted 24 July 2006 - 02:05 PM

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...

<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>

(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:

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

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...
http://www.DaveLinger.com
dave at linger dot com

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 24 July 2006 - 02:54 PM

IE6 and below doesn't support PNG transparency. Period. There's no way for that to be fixed.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 DaveLinger

DaveLinger
  • Members
  • PipPipPip
  • Advanced Member
  • 268 posts
  • LocationWV, USA

Posted 24 July 2006 - 04:06 PM

umm.... okay.... what about making the filler image take up the rest of the area?
http://www.DaveLinger.com
dave at linger dot com

#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 24 July 2006 - 04:36 PM

IE does support png but by using a filter

You can visit this page for more details http://msdn.microsof...ImageLoader.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.

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users