PDA

View Full Version : Damn IE ruining my site!

StupidCatOfDoom
18-10-2005, 09:33 PM
http://www.scodtv.x10hosting.com/genocide/ - this site looks great in Firefox. But in IE, the PNG isn't transparent, so I tried using some javascript to hide it. This is what it looks like:
(In the head tags)
<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
alert("Hah, youre using Internet Explorer. Our site wont show up properly on IE - get Firefox instead! It is WAAAY better:\nwww.getfirefox.com");
}
func hideIfIE(id)
{
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById(id).style.display = "none";
}
};
//-->
</SCRIPT>

And the image has the following code:
<img src="art/genocide_foreground.png" width="550" height="400" style="position: absolute; left: 230px; top: 165px;" id="foreground_image" onLoad="javascript:hideifIE(foreground_image)" />


On IE it keeps giving me errors and I suspect that's what's blocking the google ads, too...can anyone fix it for poor old me who could have spent time learning JavaScript but didn't and is really lazy? :P
piemastermike
18-10-2005, 11:09 PM
why dony you export it as a gif?
Bewildebeast
18-10-2005, 11:47 PM
What Mike said - I don't really see why that background needs to be a transparent PNG. Using unprompted dialog popups when a user enters a site is really irritating too.

Anyway, contrary to popular belief, IE can display PNG images with an alpha channel properly - it just takes a bit of hacking. Check out this article at A List Apart (http://www.alistapart.com/articles/pngopacity/).

Edit - oh, one other thing - it's really hard to distinguish the links on that site. It would be a heck of a lot easier to see them if they were underlined and in a different colour (in the main text, at least). w3c warn against differentiating them just with colour, and underlining is by far the most common way to distinguish links. When people visit a site, they expect links to be underlined.
Perks
19-10-2005, 04:00 PM
Hmm...unless there's a distinct purpose for having a .png background, I'd just use a .gif version, at least until IE7 comes out.

And your account's been suspended apparantly - get your hoster person on the line!
budrick
19-10-2005, 04:44 PM
If you're going to do something like this, it's better to write a separate function to hide anything you want to hide, and put that in the body's onload event. I spent a lot of time doing exactly this sort of thing last week (well, almost - applying a Javascript hack in IE to make translucent PNGs actually work in IE5.5 and above), and that's the conclusion I came to.
Chavvy
19-10-2005, 04:53 PM
Why would you not want >90% of all internet users not to be able to see your site??

[/beggars belief]
budrick
19-10-2005, 04:56 PM
There's a difference between seeing a site and seeing the whole site. If PNG alpha support is broken in IE, then all that can be done is to lessen the impact and make the site look reasonable. In this case, it's easier to hide the images than anything else. This still lets IE users see the main meat of the page, just not with the flashness that Gecko, Opera and KHTML users will see.
StupidCatOfDoom
19-10-2005, 05:14 PM
There's a difference between seeing a site and seeing the whole site. If PNG alpha support is broken in IE, then all that can be done is to lessen the impact and make the site look reasonable. In this case, it's easier to hide the images than anything else. This still lets IE users see the main meat of the page, just not with the flashness that Gecko, Opera and KHTML users will see.

I know...all i'm trying to do is hide the forgeground image...and i'm getting rid of the message, so it'll look fine on IE (considering 99% of the people who look at it will be using IE anyways).

All I want to know is, how do I hide that image if browser="Microsoft Internet Explorer"? My script is b0rked...
budrick
19-10-2005, 06:13 PM
I didn't bring my version home from work so I'll have to hack it up again. Bear with me.
Put this in the <head> section of your HTML file:

<!--[if IE]>
<script type="text/javascript" src="pnghide.js"></script>
<![endif]-->


Then put this in pnghide.js:


function do_hide() {
var pngfilere = /\.png$/i;
var all_images = document.getElementsByTagName("img");
for (im in all_images) {
if (pngfilere.test(im.href)) {
all_images[im].style.display="none";
}
}
}


Then set your body's onload="do_hide()". That will hide all images whose filenames end in .png in Internet Explorer.

If you want to hide only some PNG files, simply give each image a unique ID, and change do_hide to this:


function do_hide() {
var im = document.getElementById("imageid");
im.style.display = "none";
// Repeat above two lines for each you want to hide. Also consider checking whether getElementById worked before trying to set .style.display.
}
the architect
22-10-2005, 08:09 PM
here's my suggestion:


<html>
<body>
<a href="http://www.mozilla.org/">Page Best Viewed in Firefox</a>
</body>
<html>


then fill in with the rest of your page's content :D
budrick
23-10-2005, 09:59 AM
the architect: Things like that just look really stupid to me. It says "I can't be bothered to make my page work".
the architect
23-10-2005, 01:40 PM
budrick: it was a joke...

(but imho a translucent .png isn't a professional-looking background)
Borzoi
31-10-2005, 05:49 PM
I think that javascript is highly overrated and is not as good as it's made out to be. CSS is what you should use. As for IE: it has to be one of the worst browsers you can get. It doesnt render code properly witch means some sites will look like an elephant walked over it. Firefox, in my opinion, is the best browser you can get and its free.
budrick
01-11-2005, 09:55 PM
There are just some things you can't do in CSS, and this is one of them - at least in IE. There are some other things you can't do in any browser (collapsible tables is something I knocked up recently) without Javascript, and so long as you're careful not to make site operation absolutely reliant on Javascript there's not too much wrong with using it.

Key is to be judicious with it. If you have to question whether you need something, you don't need it :)

Regarding browsers: they're all flawed. Firefox seems to to the best (but not perfect) job with the code I write, but both IE and Opera find some way to mess me about. Sometimes IE actually gets it more right than Opera, bizarrely. And doesn't have the same stupid approach to caching CSS and images that Opera does. :)
The Grim Reaper
02-11-2005, 07:43 AM
I agree with the gif theory.
I dont understand why gif wasn't used originally.
to make it super easy, even if you dont want it, i have attached a gif version of the file.
It took 2 seconds* to convert in PS.
And file size is much smaller, even at high gif quality.




*this is most likely wrong
StupidCatOfDoom
03-11-2005, 05:17 PM
What the...I didn't think GIF images had transparency...ah well, thank ye very much :)
budrick
03-11-2005, 05:41 PM
GIF transparency is all-or-nothing - either a pixel is totally transparent or not at all. PNG transparency is fully alpha-blended, allowing for very neat gradients and totally smooth antialiasing of edges against all backgrounds :)

Pick your poison depending on what you're doing, I guess.
StupidCatOfDoom
05-11-2005, 12:09 AM
Thought so...Doesn't explain how The Grim Reaper managed to make (it seems) a semitransparent gif =\

Oh, and we're now changing the name of teh band, they're all retards and just chose 'Genocide' hurriedly. Now they know that it means the killing off of an entire race, they should hopefully change it ¬_¬
Bewildebeast
05-11-2005, 12:16 AM
Thought so...Doesn't explain how The Grim Reaper managed to make (it seems) a semitransparent gif =\
He didn't, put it on a black background and you'll see it's only 1-bit transparency (there are white bits around the image where it's been anti-aliased on a white background)
The Grim Reaper
05-11-2005, 01:02 AM
actually i opened the png in PS 7 and clicked "save for web > gif 64 no dither"
since both formats support some form of transperancy, it worked.
Bewildebeast
05-11-2005, 10:18 AM
Yes, but SCOD thought you'd managed to make a semi-transparent GIF file, which you hadn't and isn't possible with GIF anyway