March 7, 201016 yr Anyone have any idea how to get rid of a border or white line that appears on transparent png images, only seems t be happening in safari.
March 7, 201016 yr Author code? example? its not live anywhere yet, but heres the code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>mebo design - What is this site about?</title> <link href="What.is.this.site.about.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main_div"> <div id="head_div"><a href="What.is.this.site.about.html"><img id= "header_logo" src="header_logo.jpg" border="0" alt="return to homepage"/></a> <img id= "header_backdrop" src="header_backdrop.jpg" border="0"/><img id= "header_small" src="header_small.jpg" border="0"/> <div id="nav_div"> <p class="p_nav"> <span id="who_i_am"><a href="Who.I.am.html">Who I am?</a></span><br /> <span id="what_ive_done"><a href="What.I've.done.html">What I've done?</a></span><br /> <span id="what_i_like"><a href="What.I.like.html">What I like?</a></span><br /> <span id="what_you_say"><a href="What.you.say.html">What you say?</a></span><br /> <span id="what_you_need"><a href="What.you.need.html">What you need?</a></span><br /> </p> </div> </div> <div id="body_div"> <img id= "backdrop_edges"/></a> </div> </div> </body> </html> @charset "UTF-8"; /* CSS Document */ body {background:url(background.jpg); background-attachment:fixed;} #main_div {position:relative; height:2000px; width:953px; left:0px; top:0px; margin:0 auto; text-align:left;} #head_div {position:absolute; height:318px; width:953px; top:0px; left:0px} #header_logo {position:absolute; height:188px; width:386px; top:0px; left:0px;} #header_backdrop {position:absolute; left:386px; top:0px;} #header_small {position:absolute; left:0px; top:188px; height:130px; width:386px} #nav_div {position:absolute; top:0px; left:386px; height:317px; width:200px;} .p_nav {font-family: Century Gothic, arial, sans-serif, Verdana, Genevaf; color:#ffffff; text-align:left; font-size:21.52px;} #who_i_am {-webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); display:block; position:absolute; left:-5px; top:35px;} #what_ive_done {-webkit-transform:rotate(-7deg); -moz-transform:rotate(-7deg); display:block; position:absolute; left:10px; top:61px;} #what_i_like {-webkit-transform:rotate(1deg); -moz-transform:rotate(1deg); display:block; position:absolute; left:18px; top:97px;} #what_you_say {-webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); display:block; position:absolute; left:15px; top:133px;} #what_you_need {-webkit-transform:rotate(23deg); -moz-transform:rotate(23deg); display:block; position:absolute; left:7px; top:174px;} a{color:#c0c0c0; text-decoration: none;} a:hover{color:#fff; text-transform:uppercase} #backdrop_edges {background:url(edges.png); position:absolute; width:953px; height:557px; left:0px; top:318px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...);}
March 7, 201016 yr Author I am trying to upload a screenshot, but for some reason it wont upload. Anyhow, I thought that this was a generic problem with pngs in safari and there might be a work around.
March 8, 201016 yr its not live anywhere yet, but heres the code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>mebo design - What is this site about?</title> <link href="What.is.this.site.about.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main_div"> <div id="head_div"><a href="What.is.this.site.about.html"><img id= "header_logo" src="header_logo.jpg" border="0" alt="return to homepage"/></a> <img id= "header_backdrop" src="header_backdrop.jpg" border="0"/><img id= "header_small" src="header_small.jpg" border="0"/> <div id="nav_div"> <p class="p_nav"> <span id="who_i_am"><a href="Who.I.am.html">Who I am?</a></span><br /> <span id="what_ive_done"><a href="What.I've.done.html">What I've done?</a></span><br /> <span id="what_i_like"><a href="What.I.like.html">What I like?</a></span><br /> <span id="what_you_say"><a href="What.you.say.html">What you say?</a></span><br /> <span id="what_you_need"><a href="What.you.need.html">What you need?</a></span><br /> </p> </div> </div> <div id="body_div"> <img id= "backdrop_edges"/></a> </div> </div> </body> </html> @charset "UTF-8"; /* CSS Document */ body {background:url(background.jpg); background-attachment:fixed;} #main_div {position:relative; height:2000px; width:953px; left:0px; top:0px; margin:0 auto; text-align:left;} #head_div {position:absolute; height:318px; width:953px; top:0px; left:0px} #header_logo {position:absolute; height:188px; width:386px; top:0px; left:0px;} #header_backdrop {position:absolute; left:386px; top:0px;} #header_small {position:absolute; left:0px; top:188px; height:130px; width:386px} #nav_div {position:absolute; top:0px; left:386px; height:317px; width:200px;} .p_nav {font-family: Century Gothic, arial, sans-serif, Verdana, Genevaf; color:#ffffff; text-align:left; font-size:21.52px;} #who_i_am {-webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); display:block; position:absolute; left:-5px; top:35px;} #what_ive_done {-webkit-transform:rotate(-7deg); -moz-transform:rotate(-7deg); display:block; position:absolute; left:10px; top:61px;} #what_i_like {-webkit-transform:rotate(1deg); -moz-transform:rotate(1deg); display:block; position:absolute; left:18px; top:97px;} #what_you_say {-webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); display:block; position:absolute; left:15px; top:133px;} #what_you_need {-webkit-transform:rotate(23deg); -moz-transform:rotate(23deg); display:block; position:absolute; left:7px; top:174px;} a{color:#c0c0c0; text-decoration: none;} a:hover{color:#fff; text-transform:uppercase} #backdrop_edges {background:url(edges.png); position:absolute; width:953px; height:557px; left:0px; top:318px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...);} Could it possibly be the colour attribute on the p tag? : .p_nav {font-family: Century Gothic, arial, sans-serif, Verdana, Genevaf; color:#ffffff; text-align:left; That could affect it if the image is inside of a p tag? Not sure though.
March 8, 201016 yr Author the image in question is the code below, its not in the p tag. #backdrop_edges {background:url(edges.png); position:absolute; width:953px; height:557px; left:0px; top:318px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...);} does this sort of thing happen normally in safari with transparent pngs?
March 8, 201016 yr nope, niether works! Can you post the files that you are using for the background and edges?
March 8, 201016 yr Not sure if it's relevant but you have used an img tag for the background - have you tried just using a div tag?
March 8, 201016 yr I changed the img tag to div and the border has gone. Give it a go and let me know
March 8, 201016 yr do you mean this? <img id= "backdrop_edges"/></a> Yes - change to <div id="backdrop_edges"/> By the way - is that a rogue </a> that's after it??
March 8, 201016 yr Author whoops! yes thanks for pointing that out, I've been staring at the code for so long hadn't noticed. I've added <div id="backdrop_edges"/> </div> and voila! thanks a billion!
March 8, 201016 yr mrsminkie way should work not sure with safari but would this not work ? /* Keep image from having a border */
March 8, 201016 yr whoops! yes thanks for pointing that out, I've been staring at the code for so long hadn't noticed. I've added <div id="backdrop_edges"/> </div> and voila! thanks a billion! You're welcome! It's nice to have helped someone rather than asking for a change. Plus one me if you wouldn't mind!
March 8, 201016 yr Author ps, didn't have time to comment, I added your rep point earlier, I always forget to do that, my fault, sowie,
Create an account or sign in to comment