12 replies [Last post]
deepiceman
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2009-03-17
Posts: 8
Points: 0

Hi all,

I am trying to add a logo image on the site and the image is in the transparent gif format. The image appears on top of a gradient background. In Firefox the image appears smooth, whereas in IE6, IE7 and Opera the image appears to have jagged edges. How can I fix this? Attached is an image for you all to see.

HTML Code:

<div id="topPan">
	<h1><img src="images/frontext.jpg" name='SlideShow' width=230 height=230 class="left" /></h1>
	<a href="index.html"><img src="images/logo.gif" class="right" title="Creekside of Farmington Hills" alt="Creekside of Farmington Hills" width="450" height="152" border="0" /></a>
    <p>22295 Indian Creek Dr, Farmington Hills, MI 48335<br/>
    Phone: (248) 474-1774</p>
	<ul>
		<li><span>Home</span></li>
		<li><a href="#">Floor Plans</a></li>
		<li><a href="#">Features</a></li>
		<li><a href="#">Location</a></li>
        <li><a href="#">Community</a></li>
		<li class="contact"><a href="#" class="contact">Contact</a></li>
	</ul>
</div>

CSS Code:

#topPan
{
	width:800px; 
	height:252px; 
	position:relative; 
	margin:0 auto; 
	padding:0;
}
 
#topPan p
{
	width:413px;
	height: 35px;
	position:absolute;
	top:170px;
	left: 67px;
	margin:0px; 
	padding:0px 0px 0px 0px;
	text-align:center;
	font:13px "Trebuchet MS",Arial, Helvetica, sans-serif; 
}
 
#topPan h1
{
	width:300px; 
	height:215px; 
	/*background:url(images/header-img1.jpg) 0 0 no-repeat #FEEBB0; */
	color:#fff; 
	text-indent:-2000px;
}
 
#topPan img.left /*Image Slideshow on the left of the logo */
{
	width:230px;
	height:180px;
	position:absolute;
	top:10px;
	right:30px;
	margin:0px;
	padding:0px;
	border: 5px solid #FFFFFF;
}
 
#topPan img.right /*Renamed from img to img.right so that the slideshow can be placed on the left */
{
	width:480px; 
	height:152px; 
	position:absolute; 
	top:15px; 
	left:0px;
	margin:0px; 
	padding:0px 0px 0px 10px;
}
 
#topPan ul
{
	width:481px; 
	height:32px; 
	display:block; 
	position:absolute; 
	top:215px; 
	right:0px;
	margin:0px; 
	padding:0px; 
	background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; 
	color:#fff;
}
 
#topPan ul li
{
	float:left; 
	display:block; 
	width:80px; 
	height:32px; 
	background:url(images/menu-devider.gif) right top no-repeat;
}
 
#topPan ul li span
{
	display:block; 
	width:78px; 
	height:32px; 
	background:url(images/menu-hover.gif) 50% 0 no-repeat; 
	font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; 
	font-weight:bold; 
	text-align:center; 
	text-decoration:none;
}
 
#topPan ul li a
{
	display:block; 
	width:78px; 
	height:32px; 
	background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; 
	color:#fff; 
	font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; 
	font-weight:bold; 
	text-align:center; 
	text-decoration:none;
}
 
#topPan ul li a:hover
{
	display:block; 
	width:78px; 
	background:url(images/menu-hover.gif) 50% 0 no-repeat;
	text-decoration:none; 
	/*position:fixed;*/ 
	margin:0; 
	padding:0px;
}
 
#topPan ul li.contact
{
	display:block; 
	width:80px; 
	height:32px; 
	background:url(images/menu-bg.gif) 0 0 repeat-x #FF8714; 
	color:#fff; 
	font:13px/32px "Trebuchet MS",Arial, Helvetica, sans-serif; 
	font-weight:bold; 
	text-align:center; 
	text-decoration:none;
}
 
#topPan ul li.contact:hover
{
	display:block; 
	width:80px; 
	background:url(images/menu-hover.gif) 50% 0 no-repeat;
	text-decoration:none;
	/*position:fixed;*/ 
	margin:0; 
	padding:0px;
}

Thanks in advance,
Deepiceman

AttachmentSize
image.jpg58 KB
Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I've stopped using images

I've stopped using images with transparent backgrounds for this reason. Even .png images.. I had used them through my entire portfolio, just to find out one day while at my girlfriend's house, that every image showed a white background where the transparent part should have been.

This wouldn't have been so bad, but my portfolio site is a dark themed site, with an almost black background.. it looked horrible!

I've changed many designs (gradient backgrounds included) due to this lol.. I hope someone has an answer for you (and me)!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

maybe you can post a link so

maybe you can post a link so we can "see" what is going on. Jagged edges on a trans gifs are very common. Try adding more colors to the gif color pallet to handle more anti-alias to give a smoother look. I find trans PNG, that make use of alpha trans, work best for every transparency need. but give us a link so we can look at this closer.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Titan793 wrote:I've stopped

Titan793 wrote:

I've stopped using images with transparent backgrounds for this reason. Even .png images.. I had used them through my entire portfolio, just to find out one day while at my girlfriend's house, that every image showed a white background where the transparent part should have been. !

I have had great success with trans PNG's. Maybe you're not doing something right Titan? Show us what issues you're having with them.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

CupidsToejam wrote:I have

CupidsToejam wrote:

I have had great success with trans PNG's. Maybe you're not doing something right Titan? Show us what issues you're having with them.

If I can dig some of the images up, I'll throw em back on one of my websites to show you. Like I said, I pretty much scrapped them, and made the images with the background color of my website, which is guaranteed to work.

They were thumbnails of my portfolio projects.. the only reason I made them transparent to begin with was because I wanted a dropshadow on them, and didn't want to remake them every time the background color on my website changed lol.

The strange thing is that I had tested them on various browsers before I decided to use them, and they worked fine (ie: they were transparent).. I had no idea there was any issue until I went to show someone the website several months later, and there they were.. bright white backgrounds staring me in the face.

I want to say that FF was showing the white backgrounds at my girlfriend's house, and one of my co-workers computers at work would show white in IE. My work computer however.. showed them just fine (transparent).

I'm assuming that it was an issue with some computers/browsers not having current updates. I work with computers so often that I update everything religiously. Not everyone is like me though, so I just stopped using them to be safe.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

yeah, IE6 and below doent

yeah, IE6 and below doent support trans png's, but there are fixes for that. FF supports them fine.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

CupidsToejam wrote:yeah, IE6

CupidsToejam wrote:

yeah, IE6 and below doent support trans png's, but there are fixes for that. FF supports them fine.

I'm 90% sure that I checked the version on the work computer at least. My gf uses FF most of the time, but maybe it was on IE at her house.

I'm fairly certain that every pc that showed an issue was newer than IE6, but I might be wrong.

In any case, I wasn't aware that there is a fix for IE6 even, so I just redid them all. I'll have to look into that fix sometime for sure though!

deepiceman
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2009-03-17
Posts: 8
Points: 0

Take at look at this and let

Take at look at this and let me know what your thoughts are ... http://www.creeksideoffarmingtonhills.com/NewCreek/

Thanks

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Titan

This post has good png info!

http://csscreator.com/node/33168

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I see what you did wrong

I see what you did wrong here. the image is 450px × 152px. You scaled it up to 480px × 152px messing up its aspect ratio. Dont scale the image, and see how it looks with its default dimensions.

deepiceman
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2009-03-17
Posts: 8
Points: 0

Yeah I feel pretty stupid

Yeah I feel pretty stupid now Sick

Thanks for you help, I spent a good couple hours trying to figure this out...

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Glad I can hope. We all make

Glad I can hope. We all make stupid mistakes, but thats how we learn and grow Wink

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Thanks for the link

Thanks for the link CupidsToejam.. I'll definitely check that out. I was thinking on the way home, that they did have IE6 there when I started working at my current job. I always update things, so I was probably running v7.0 when I tested it there and at home. I think you might be right on that, and it just didn't hit me at the time.

And Deepiceman, isn't it amazing how something small like that can cause so many strange issues lol. I'm glad everything got sorted out.. and I apologize for the mini-derail of this thread for a bit! Smile