Forum Moderators: not2easy
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
I followed the steps one by one and I got the code to work with all browsers I've tested it with so far, (except the Mac version of Internet Explorer).
The browser refuses to show the Tables background image, so I just end up with a fully transparent Table. (And not a 50% opacity background that i'm after).
Thank you in advance for any help you may give.
Hassan.
[edited by: tedster at 5:32 am (utc) on Feb. 14, 2005]
bump really as I don't know much about IE/Mac.. although I can tell you that support for CSS Opacity is definitely sketchy full stop. Opera for instance doesn't support it at all, and for IE you need to use proprietary filters, whether Mac supports those filters I don't know..
have you a snippet of the code you're using that works in IE to see if someone else can help more
Thanks
Suzy
<html>
<head>
<title> Testing Opacity. </title>
<style type="text/css">
body {
background: #ffffff url('Smilie.gif');
text-align: center;
}
#LayerDVD {
background: url('layer.png');
border: 3px solid #cccccc;
color: #ffffff;
height: 200px;
margin: 20px auto;
padding: 10px;
text-align: justify;
width: 300px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Layer.png');
}
</style>
</head>
<body>
<div id="LayerDVD">Testing.</div>
</body>
</html>
[edited by: SuzyUK at 10:46 am (utc) on Feb. 18, 2005]
[edit reason] fixed formatting [/edit]
You know, I assume, that the alpha filter only works on PC IE, so you're not relying on that to work here.
That said, in my experience, to get tiled PNG backgrounds to work in Mac IE, the tiling image needs to by at least 64px x 64px (so 64px or greater in both dimensions), and any background repeat information needs to be part of a separate background-repeat declaration, not part of a background shorthand declaration.
Compatibility across browsers generally is better for 32-bit PNGs than 8-bit, so I'd stick with those if at all possible.
Edit: Could case sensitivity be an issue here? You have both Layer.png and layer.png referenced in your code.
I have managed to get the code to work in Mac IE (not transparent) but it still shows up, so it's better than nothing.
I have tested it in FireFox, Netscape, IE and Safari on the Mac. And the results are promising.
The next phase of the project is to tackle the PC side of things. So I was wondering if there was a way to post a URL here, so that people could access the page a tell me how it fairs on their browser? (Compaired to a screenshot of how it should look on the same page).
Hassan.
[edited by: SuzyUK at 7:41 pm (utc) on Feb. 22, 2005]
[edit reason] formatting [/edit]
#LayerDVD {
background: url('layer.png');
border: 3px solid #cccccc;
color: #ffffff;
height: 200px;
margin: 20px auto;
padding: 10px;
text-align: justify;
width: 300px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Layer.png');
}
My understanding is that you have to remove the background image (bold above) while applying the IE filter in order to get png transparency in IE. Otherwise the filter image is transparent, but the background png underneath it is not, resulting in no transparency (A sheet of glass over a peice of wood does not a window-pane make.)
#LayerDVD {
background: url('layer.png');
border: 3px solid #cccccc;
color: #ffffff;
height: 200px;
margin: 20px auto;
padding: 10px;
text-align: justify;
width: 300px;
}/*iemac hide \*/
* html #LayerDVD{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Layer.png');
}
/*end iemac hide*/This, of course, is for IE/Win.
cEM
I have inplemented the changes you talked about, but I have no idea whether it's working on Windows. Furthermore, I am back to square 1 with Mac IE not showing the background at all!
At this stage I would just settle for the background just to show up in Mac IE, and the background to be transparent in the rest of the browsers. (I really hate cross-platform scripting sometimes!)
Any help would be appreciated!
Hassan.
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
[edited by: SuzyUK at 7:39 pm (utc) on Feb. 22, 2005]
<style type="text/css">
div.withBg { background-image: url(/img/ugly.gif); }
body > div.withBg{ background-image: url(/img/beauty.png); }
/* MSIE does not understand the latter argument and thus ignores it, the rest do, and replace "ugly.gif" with "beauty.png" */
</style>
<div class="withBg">mmmm, something...</div>
BTW: This MSIE-only code you're using _should_ be working on both the mac and the windows-platform, but it seems to be a major performance eater (I tested with virtual-PC, so I can only make assumptions here...)
