andrew_47

Yeah im trying to remove the background from the image, im hoping to cut the image away from the canvas and save it so that when viewed in IE 6 and below it wont have the horrible colour the IE uses for transparent canvas png's I tried to save the files as a gif and uploaded which worked fine but lost a fair bit of quality from the pictures I have so thought it best to use the gif's for IE 6 and use the png's for IE 7, firefox etc......... Thought about doing this with my conditional comments css to target IE 6 but when i preview it i still have the block colour of the unused canvas! So the css cant be sending across the right picture format. If you have for example: main.css #footer{background-image: url(../images/footer.png) repeat-x;} <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="script/ie6.css"> <![endif]--> ie6.css #footer{background-image: url(../images/footer.gif) repeat-x;} It should work right? But it doesn't seem to be, or i have mucked up somewhere.

I used fireworks to create my images and usually use photoshop to reduce file size but have no idea how to create transparent gifs. Would be great if you could tell me how to achieve that! And I have also seen a few places about achieving transparent .pngs in IE6 using different methods but I have tried a few with no success at all so sort of gave up! I have seen many text images where the image has been cut away from the canvas and just thought there must also be a way to achieve this without the text, but im happy to try the gif attempt

I was wondering if anyone could help me with a problem i have. The picture below shows the example. The black acts as the canvas which I want cut out so there is no canvas at all behind the image. I was wondering if anyone could tell me how I could achieve this. I know I have done it before and is probably very simple but as it is a png IE 6 is displaying the image I have with a horrible white to fill the canvas. Many Thanks.

Hey thank you very much. I cant believe I missed something so small and simple. I'll give it a go and look forward to using this forum. Thanks again.

I am having a few problems and wondered if anybody could help. The two screenshots which are displayed have different layouts in Firefox and IE and I have no idea how to correct it. I have supplied the code below for this section also for people to look at. I jus need to know what the problem is and how to fix it. Thank you. <div class="featured_work"> <div class="content_header" align="center">Comments</div> <div class="list_holder"> <ul> <li><a href="#" title="Text">Name <em>Description of link.</em> <span>Date posted</span></a></li> <li><a href="#" title="Text">Name <em>Description of link.</em> <span>Date posted</span></a></li> <li><a href="#" title="Text">Name <em>Description of link.</em> <span>Date posted</span></a></li> </ul> </div> </div> CSS: .featured_work { width:183px; height:350px; background-image:url(../images/content_box2.png); background-position: top left; background-repeat:no-repeat; padding: 10px 9px 0 9px; } .list_holder { width:183px; float:left; } .list_holder ul { font-size: 85%; list-style: none; margin: 0; width: 180px; } .list_holder ul li { border: 1px dotted #999; border-width: 1px 0; margin: 5px 0; } .list_holder ul a { color: #990000; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 5px; text-decoration: none; } * html .list_holder li a { /* make hover effect work in IE */ width: 160px; } .list_holder ul a:hover { background: #ffffcc; } .list_holder a em { color: #333; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%; } .list_holder a span { color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%; } .content_header { width:180px; margin:10px 0 7px 0; font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#464F64; }