Transparent Background Issues (especially in IE6)

This is a discussion on "Transparent Background Issues (especially in IE6)" within the Web Page Design section. This forum, and the thread "Transparent Background Issues (especially in IE6) are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jan 11th, 2008, 21:19
New Member
Join Date: Jan 2008
Location: Birmingham, UK
Age: 27
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Transparent Background Issues (especially in IE6)

Hi,

I'm building a website for a friend of mine. Basically, there's a section with a transparent grey PNG used for the background (by setting the background image URL in the default CSS sheet). This is all fine until I test it on IE6. I got through the initial prolem of IE6's hideous lack of PNG transparency by using this code in the IE6 CSS sheet:

* html img,
* html div,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(t his.pngSet?this.pngSet=truethis.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progidXImageTransform.Microsoft.AlphaImageLoade r(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif")this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().repl ace('url("','').replace('")',''),
this.runtimeStyle.filter = "progidXImageTransform.Microsoft.AlphaImageLoade r(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}


Then I put the background in the HTML page with this code:

<!--[if IE 6]>
<div id="transblock" style="background-image: url(images/blackbgrnd.png);"></div>
<![endif]-->


Only problem is that now the background seems to double up and place itself above the text and links of the rest of the page., effectivly leaving anything in that section untouchable by the user.

I've zipped the site and added it here (http://www.webdesignerforum.co.uk/in...pe=post&id=709) if anyone could have a look. If anyone's got any thoughts about this, I'd be incredibly greatful to hear them.

Cheers
Al
Attached Files
File Type: zip abi.zip (1.64 MB, 7 views)
Reply With Quote

  #2 (permalink)  
Old Jan 12th, 2008, 15:09
Aso's Avatar
Aso Aso is offline
Chief Moderator

SuperMember
Join Date: Oct 2007
Location: UK
Posts: 1,012
Blog Entries: 2
Thanks: 5
Thanked 23 Times in 20 Posts
Send a message via Skype™ to Aso
Re: Transparent Background Issues (especially in IE6)

Scrap the expression code and use IE PNG Fix instead.
Last Blog Entry: The Google Misconception (Feb 3rd, 2008)
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
repeating background issues. Therealmatt Starting Out 4 Sep 20th, 2007 22:54
Help with transparent background jenslennartsson Web Page Design 2 Jul 4th, 2006 03:53
how to create a .png semi-transparent image for background laurablue3 Web Page Design 2 Nov 20th, 2005 12:06
transparent background krazykrisi Web Page Design 1 Aug 25th, 2005 08:51
How to get a transparent background in Fireworks blh9901 Graphics and 3D 1 Aug 3rd, 2005 01:16


All times are GMT. The time now is 02:59.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43