...

View Full Version : unwanted image borders in MSIE/Win



rooster
05-23-2005, 01:21 PM
I am having trouble with unwanted borders showing up around my buttons in MSIE/Win. I made oval buttons which are GIF files, and used them as links. in MSIE/OS X, there is no problem, nor is there a problem in Safari. However, when I look at my pages in MSIE/Win, there are big, rectangular, blue obnoxious squares around my groovy oval buttons. What is the best way to eliminate these using CSS? Thanks for your help!

glenngv
05-23-2005, 01:28 PM
a img {border:none;}

Tricia
05-23-2005, 03:13 PM
kept getting violations because I was using the deprecated border="0"

This helps so much!

Thanks!

:thumbsup:

rooster
05-24-2005, 06:55 AM
Thanks so much!!! And I'm glad this question helped somebody else too...

rooster
05-24-2005, 02:23 PM
I just checked my website on windows-the obnoxious blue border is indeed gone (and I am glad!) . however, there is a grey area around the oval button, I am presuming this is the remainder of the rectangular image. I thought that by making my oval buttons a GIF on a transparent backround that this would not happen.

http://www.scsr.nevada.edu/~karkowc/

again, on any of my macs, this isn't a problem. grrrr. Why does this happen only in MSIE/Win?

thanks again!

mrruben5
05-24-2005, 02:33 PM
You're using PNG, IE6 has no support for transparant PNG's. That's why you're seeing the cyan background.

rooster
05-24-2005, 10:19 PM
ah hah!- this makes sense. Having said that, what should I do? thanks again.

rooster

JamieR
05-24-2005, 10:29 PM
I think you might get away with saving it as a JPG or GIF, however isn't there a bit of JS code which can be used to overome that lack of PNG support?

I'm sure I've seen it somewhere :confused:

Graft-Creative
05-25-2005, 12:29 AM
Or you could use this to emulate IE PNG Transparency



// Universal transparent-PNG enabler for MSIE/Win 5.5+
// http://dsandler.org
// From original code: http://www.youngpup.net/?request=/snippets/sleight.xml
// and background-image code: http://www.allinthehead.com/retro/69
// also:
// * use sizingMethod=crop to avoid scaling PNGs (who would do such a thing?)
// * only do this once, to make it compatible with CSS rollovers

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);
}

function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('/images/spacer.gif')";
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
img.src = "/images/spacer.gif";
}

}
}
}


(Thanks BradyJ :thumbsup: )

Gary

mrruben5
05-25-2005, 12:31 AM
Thanks Gary, now I can use that funky firefox png in IE :)

save as .js and put in the head?

Bill Posters
05-25-2005, 08:54 AM
Given that it's such a basic image on a flat background, there's very little point in using PNG24 and going to the effort of adding js to make the alpha transparency work in MSIE/Win.
PNG24 can be a great format, but there's no benefit in using for the buttons on your page. Being so basic, you could more easily use either a solid GIF, a GIF with transparency or a PNG8, either solid of with transparency.

For future reference, there are plenty of tutorials available online on how to make transparent gifs. (The process is pretty much identical in Photoshop for creating PNG8 images.)

I took a minute to grab and adjust your button images (and logos) and resaved them as PNG8 with transparency. You can swap them in and you won't need to change anything else. You also won't need to add the alpha transparency javascript as browser support for the more basic PNG8 is fine in all major (and most minor) browsers.

http://www.bposters.fsnet.co.uk/forum/codingforums/button-images.zip

The same can/should be done with the Firefox logo.

-

Incidentally, there are a few issues with your css…



color: FFFFCC;
Hex colours require a preceding #.
e.g.
color: #ffffcc;



border-style: "none"
No quotes around these values.

e.g.
border-style: none;




.menulink a:link{text-decoration: underline; color: 000066;}

.menulink a:visited{text-decoration: underline; color; FFFFCC:}
.menulink a:visited selector repeated.
Remove one, being sure to maintain the :link, :visited, :hover, :active order of the declarations.

Skyzyx
05-25-2005, 09:21 AM
Just to toss it out there:
http://www.skyzyx.com/scripts/sleight.php

rooster
05-25-2005, 11:02 AM
Hey, thanks for all of the help! as you can probably tell by now, I am quite new to all of this, but trying hard to learn as much as possible. You'll probably get more questions from me! I hope that one day I'll know enough to help others. till then, mucha thanks....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum