[Tact]

Hi everyone. I got a question. Probably a big one.

For years now, I have been desigining for what probably USED to be the most popular browser on the net. (IE) But recently, I think i notice that it's quickly losing it, or worse, already has lost.

Let me just say, that I know my site is FUNCTIONAL on all browsers. That's not the problem. My problem is it doens't LOOK as good in all browsers. It only looks awesome in IE6. (i don't know about 7) I looked at my site in firefox and it's totally ugly. >.<

Now, I know my site isn't perfectly perfect when it comes to w3c and stuff. I always get little errors that bother me because they seem unimportant and meaningless. (like using the ending tags which aren't really needed but yah, makes things more "uniform" i guess) And one day I might be bothered to actually make my site totally w3c perfect or whatever. But even then, I fear it'll still look like junk on other browsers. And I don't want that.


I also have a feeling that If i decide to recode everything to make it look good in FF, it'll then look ugly in IE. Why should I choose? Should i have to? Or is there actually away to make it look good in both and ALL browsers?


here's my site for anyone wondering. feel free to look at it in all your browsers. (especially IE 6) let me know what you think. this site is like 8 years old. (been kind of a work in progress the entire time and it evovled many times. this is it's current state)

www.animeleech.net

btw. this also looks more awesome if you got 800x600 or 1024x768. if you have bigger it'll seem too empty. but still good. also. if you go into the galleries and click on the sailor moon link. there's an awesome effect i made the buttons do that ONLY works in IE. I'ts really awesome.


I myself use avant personally. I used to use maxthon and before that slimbrowser. I think ff is overrated. i've had tabbed browsing built in popup blockers, and customizable search bars for years before ff became popular for those things. (ff prolly does own regarding security but i doubt that's the reason KIDS/TEENS made the move.-_-)

Personally, I don't care what anyone uses anymore. I know I can't change that. So that's why I'm wondering what I could do. Whats the easiest way to do this? I just wanna make sure my site looks awesome in all browsers. Down to every little pixel and spacer. if anything is off even by one pixel, it could ruin it! >.< arg. (as you can see if you used ff to see my site)


thanks in advanced.

[namenotfound]

Now, I know my site isn't perfectly perfect when it comes to w3c and stuff. I always get little errors that bother me because they seem unimportant and meaningless. (like using the ending tags which aren't really needed but yah, makes things more "uniform" i guess) And one day I might be bothered to actually make my site totally w3c perfect or whatever. But even then, I fear it'll still look like junk on other browsers. And I don't want that.

Do that RIGHT NOW then take a look at it in Firefox.

IE is a broken browser, which means it renders incorrect code as if it's correct. Fix the code and it *might* look better in Firefox.

Also, don't forget about Opera. The three most popular browsers on a Windows system is IE, Firefox, Opera. On a MAC system you also have Safari, since I don't have a MAC I use http://browsershots.org to see if it looks good in Safari.

[Tact]

cool link. thanks.


you know. i never thought of it like that. so you're saying i could actually be killing 2 birds with one stone? fix this and the other will prolly get fixed too? oh man. that's awesome news. now i'm actually pumped to get this done now.

if i'm lucky. it'll look exactly the same in ff as it does in IE.


thanks for your reply.

[Big-K]

At this point, it almost looks the same in both browsers. Alot of it is simply shabby coding, like the border issues and size of the copyright.

[Gibble]

This is precisely why I loathe browsers that render imperfect code.

As a programmer, if I make a mistake, my app won't compile, let alone run. If I'm lucky, the compiler catches mistakes...I fix them, and carry on. Worst case, the mistake is logical, and the app doesn't output the proper data...hopefully the test plan catches any logical oversights.

Internet design SHOULD have the same safeguards, but unfortunately, M$ allows crap code to render properly. ALWAYS validate to w3c specs. ALWAYS, ALWAYS, ALWAYS.

Who's to say just because your site renders properly with IE 7, but in a year, it doesn't with IE 8? or 9? Wouldn't you rather have it compliant so it's more likely to always work...?

[MMJ]

FF is much closer to W3C standards than IE.

Tip: Add a little padding to the left of indexleft.htm

[Tact]

wow. THANK YOU SO MUCH EVERYONE for your replies. I never knew IE was like that. Thought it's nice in a way to be forgiving, it can be bad in that it lets you slack off too much. dope!

If you guys say ff is more strict, then I will start working on ff then.

btw. while on the subject. there is one part of my site that concerns me. it doens't work in ff. is there something wrong with the script? should i look for other scripts?


oh and also. anyone have any idea why some scripts work on my website but don't work offline (I edit my site offline, and upload the changes) seems wierd.

here's the link with the script i'm talking aobut. (if it doesn't take you to it, please click on "sailor moon" on the left menu

http://animeleech.net/animeleech.htm


those buttons are faded to start with, and fade in on mouse-ever. it looks so awesome on ie. poor little ff can't do it.

[namenotfound]

You're using filters. Filters are created by Microsoft so they are exclusive to IE.

(btw it would have been nice if you just posted the code directly, or at least the actual page rather than the page in a frame)

<script>

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
 * destop - destination transparency level (ie 80, for mostly solid)
 * rate   - time in milliseconds between trasparency changes (best under 100)
 * delta  - amount of change each time (ie 5, for 5% change in transparency)
 */

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
        
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != 25){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}


</script>

That's what you're using on your site.


You can fix that up to be cross-browser, but I don't have time right now to get the script fixed since I'm leaving in 2 minutes. When I get back if no one else posted it, I'll post a fixed up script.

[namenotfound]

Ok here's how you can make it fade with firefox

<IMG style="-moz-opacity:0.6" src="someimage.jpg" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">

[Tact]

omg that thin line of code could replace that ginormous old one? wow. o_o thanks a lot.

really apprciate it.

[Shadow2531]

Originally Posted by namenotfound

Ok here's how you can make it fade with firefox

<IMG style="-moz-opacity:0.6" src="someimage.jpg" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">

And, you can use the standard css opacity property instead of the mozilla extensions so it works in Opera and FF and other browsers thats support css opacity.