|
View Full Version : FireFox Compatibility?
0wn4g3 01-31-2005, 09:53 PM We have recieved numerous emails stating that all of our html pages look horrible within Mozilla-FireFox and Opera but they took totally legit within IE. My question is where in the world do I begin in order to make all of my html pages compatible with other browsers.
Someone sent me to this link http://validator.w3.org/ where I validated one of my HTML pages and it came up with about 30 errors to a W3C compliance doc but after I supposedly fixed those and re ran the test more errors popped up. The more I try to fix my html pages the more screwed up they become.
Could anyone help me at all or steer me in the right direction. This browser compatibility issue seriously sucks.
Tyler 01-31-2005, 10:35 PM I am taking for granted your website is:
http://www.theclanhq.com?
If you wish for us to help you, provide us with the link to the page you are trying to validate. Without any knowledge of the errors in question, I could take a guess and say that you are using a XHTML Document Type Definition with HTML.
:confused:
0wn4g3 01-31-2005, 10:48 PM Ok well that is our flash based website Immortal but for starters validate this link http://www.theclanhq.com/Webhosting.html This and all of the other HTML files are royally screwed when it comes to FireFox.
Lars-Christian 01-31-2005, 10:51 PM I am taking for granted your website is:
http://www.theclanhq.com?
I wouldn't, because that seems to be rendering fine in FireFox for me.
EDIT: I just saw : http://www.theclanhq.com/Webhosting.html :rolleyes: Talk about a mess.
And yes, TCHQ-0wn4g3, the only way to get it validated is to keep fixing until there are no more errors left in your coding.
You might want to read up on the standards, and get some pointers to where you might be going wrong. And once you've fixed it, made it (X)HTML valid, and got it looking like it should it FireFox and Opera, prepare to start tweaking your coding to get it looking like it should in IE again ;)
EDIT again:
Your coding reminds me a lot about my own a year back. Read up on the XHTML standards, and CSS Stylesheets. That would be your best place to start. I am going to go out on a lim here and guess that you use some sort of WYSIWYG editor when designing?
0wn4g3 01-31-2005, 10:58 PM Well let me ask you guys this, should I just say screw it and offer our website to just that 89% part of the browser market who uses IE or should I really invest my time and effort into making my HTML files compatible with FF. Can you satisfy every browser?
Yes you dam well can. The first step you should take is writing valid (x)html. If you conform to the W3C standards, you will have a much better chance of your website rendering properly in the major web browsers. After your website validates completely, you may have to tweak certain aspects to satisfy other browsers.
Just by taking a quick look at the source of this page (http://www.theclanhq.com/Webhosting.html) I can point out a simple thing you can fix. I see that you have an inline stylesheet, and yet you define these in the <body> tag:
LEFTMARGIN=0
TOPMARGIN=0
MARGINWIDTH=0
MARGINHEIGHT=0
rightmargin="0"
bottommargin="0"
All you need to do is add this to your stylesheet:
body {
margin: 0px;
}
.. and change your body tag to
<BODY bgcolor="#181A1A">
And bingo, you have one less error.
I could also point out the lack of a Document Type Definition as well. Or the lack of the "alt" attribute on <img> image tags... Need I say more? Your best best is to google some tutorials/code examples or maybe try out a html validator/tidier such as this:
http://infohound.net/tidy/
Good luck! :)
dirmass 01-31-2005, 11:53 PM should I just say screw it and offer our website to just that 89% part of the browser market who uses IE or should I really invest my time and effort into making my HTML files compatible with FF. Can you satisfy every browser?
Well I would be very pissed off if I couldn't see your pages in my favourite browser. Or even worse, make me start IE.
If you use proper validated, coding you Can satisfy every browser, Except IE. What I mean by 'satisfy': every browser displays the page a bit different, you can not make them all show the, same pixel by piexel layout.
But you can code a page to look good and be consistent in all browsers.
I am not going to open another browser (IE) to see your website properly. I'll just be clicking the x. If it doesn't work in Firefox (which is fast becoming the most popular browser), it shows that you are lazy and don't take pride in building your website with some sort of standards compliance in mind.
Just as a side note, I returned to school after a holiday break to find that all the computers, close to 100 of them, now have firefox on them. Not a single trace of IE. THANK GOD! The truth is that if Microsoft don't release a new browser soon, Mozilla won't need to worry about competition.
EDIT:
And if you think Mozilla Firefox isn't popular, it has had 1,907,994 downloads on download.com since it was added several months ago. This is not counting downloads on the mozilla website and other mirrors. We are talking millions of people out there with firefox. If you wish to run an online business or any website for that matter, you simply cannot deny a good percentage of your visitors access to your website.
(http://www.download.com/Mozilla-Firefox/3000-2356_4-10335582.html?tag=lst-0-1)
the_pm 02-01-2005, 12:43 AM To expand on the points already given, there's only so much you can do to predict user trends in the future too. I mean, how many people do you think are going to jump on the bandwagon when Google releases its new browser (they have the lead developer from Mozilla working on it, by the way)? For that matter, what happens when IE releases its next browser and it happens to be industry/standards compliant as well?
The whole reason standards exist is not for developers - it's for browser manufacturers. They're just nice enough to share those standards with us so we know how to develop properly to them. IE is problematic, because the MS developers did such a poor job of creating their rendering engine, and then abandoned the browser for all intents and purposes. But there are plenty of techniques available to satisfy all browsers if you take the time to learn them.
I'm sorry IE has caused you so many problems. IE is a problem all developers must face at some point. It just sounds to me like you've reached that point. Another developer screwed over by IE...I hope they read these threads...
0wn4g3 02-01-2005, 02:04 AM You know, we thought we were doing the right things and the way we were coding our html pages and inputting the CSS into the code everything looked A ok as far as IE was concerned. Only until some people contacted us about the horrible output that Fire Fox gives is when we decided to look into the matter and sure enough our website looks destroyed in Fire Fox. It really makes me angry to know that I first did alot of work with all of those HTML files but now it would seem as if I have to completely recode them.
Either that or I stick with being compatible with IE...
the_pm 02-01-2005, 09:16 AM Originally posted by TCHQ-0wn4g3
You know, we thought we were doing the right things and the way we were coding our html pages and inputting the CSS into the code everything looked A ok as far as IE was concerned. Only until some people contacted us about the horrible output that Fire Fox gives is when we decided to look into the matter and sure enough our website looks destroyed in Fire Fox. It really makes me angry to know that I first did alot of work with all of those HTML files but now it would seem as if I have to completely recode them.
Either that or I stick with being compatible with IE... I know man. I feel your pain. I think most developers have been bitten in the a** by IE in this way at least once before (hopefully once is enough!). You don't realize how bad a browser IE really is until you get the chance to see how properly made browsers handle the same code that IE seems to like.
But, it's a very dangerous proposition to code only for IE. Back in the mid-late 90s, someone might have been prone to coding only for NS, and look what happened. The good news is that browser developers have now commited to supporting standards, MS included (they just haven't released a new browser in more than four years). So, learning those standards and coding to them is a very worthwhile endeavor, necessary even.
As hard as this is to swallow, I think you're looking at fully reengineering your site. I've been down that road before - oh, it sucks. You have my fullest sympathies!
Karolis 02-01-2005, 09:39 AM It looks awful in Opera. My suggestion is to check how your website looks with all browsers in the process of development, so you won't have such problems like now.
the_pm 02-01-2005, 09:48 AM I should have stated I too saw the site breaking in Opera, and I checked K-Meleon too, just for kicks (it uses the Moz. rendering engine, so there was little doubt what would happen, but that was all about due diligence).
I would have to assume the same issues would be seen on the litany of Mac browsers as well.
Karolis 02-01-2005, 12:06 PM Sometimes it's even faster to rewrite html from scratch than to fix it, if it was developed for a single browser.
Imusion 02-01-2005, 01:51 PM Well... I am like the master of creating non-standard html pages that seem to work in firefox and IE. I remember I had 300 errors on one page. Thats bad.. lol
But now I've changed well somewhat with my new design I happen to be able to make it XHTML 1.0 Transitional. And it works perfectly in Firefox and IE.
The main problem on your design thats making it look all screwy in firefox is the text size. I'm assuming you purchased the template or something from Template Monster and the templates there are fixed sizes usually so your text is too big and it's stretching the layout in firefox.
So to fix the visual layout without making it HTML compliant you need to size down the text in firefox. Also I see a little messed up part on your code.
<style type="text/css">
<meta name="description" content="TheClanHQ i...">
<meta name="keywords" content="web hosting...">
<!--
Meta tags do not belong in the style sheet area. ;)
Now onto the fix try adding this to your CSS style.
body, table, td, tr {
font-size: 9px;
}
Hope it works!
Imusion
the_pm 02-01-2005, 01:58 PM Originally posted by Imusion
Now onto the fix try adding this to your CSS style.
body, table, td, tr {
font-size: 9px;
}
Hope it works!
Imusion
This won't work in FireFox, Opera or basically any non-IE browser. While the text will be smaller by default, no one wil be prevented from resizing it to suit their needs, nor should they be prevented from doing so (especially if the default size it so small!). This means the design is just as prone to falling apart.
There are deeper issues at hand with the design that makes it so inflexible it's bound to fall apart given a number of visitor-determined circumstances. This will take more than just a simple recoding - this will take an overhaul, reengineering of the template itself so it will adapt appropriate to individual visitors' browsing environments. A quick fix might involve using the overflow property, which would turn all of those text bits into little scrolling boxes, not the most elegant way out, but perhaps a bit more functional that just letting everything fall to pieces :)
Imusion 02-01-2005, 03:54 PM Yeah my fix was just a quick temporary one. Of course if you wanted to really fix it, you would have to probably reslice the thing also in addition to re-coding the whole thing.
0wn4g3 02-01-2005, 03:58 PM Wow thanks for all of your help guys, this will be yet another daunting tasks but just like all of the others that we have endured I am sure we will learn alot of things in the process of fixing our html pages. I will post our results or post if I need some further help with some parts of the code.
Voxxit 02-01-2005, 04:30 PM In the future, you may want to try to code around Firefox (or, in other words, standard's compliancy), and then fix it around IE if it doesn't work right. I have found this to be easier with code. Also, try using and learning around XHTML for your code in the future.
Originally posted by Imusion
Yeah my fix was just a quick temporary one. Of course if you wanted to really fix it, you would have to probably reslice the thing also in addition to re-coding the whole thing.
And ditch the absolute text sizes. Don't use pt's or px's. You are much better off using em/percentages. At least make it so your visitors can up the text size by ONE without destroying the layout.
Website Rob 02-01-2005, 06:45 PM Don't use pt -or- em is what I hope you were trying to say.
Using px or % is always recommended for text size on a Web page.
the_pm 02-01-2005, 07:06 PM Website Rob,
I'm aware of the IE bug concerning the em unit of measurement - I think I might have been the first one to call attention to it here. Are you aware of any other reasons to avoid using em for font sizes, or is your recommendation to stay from using it based on this bug as well?
I would add that until IE releases a browser that can resize text set in pixels, which is how a browser should act, you'd be doing your visitors a favor to stay away from px as well. As little as MS cares about accessibility, I would venture to say this browser "feature" was added on purpose, but considering the impact it has on users, it can only accurately be referred to as a browser bug.
Voxxit 02-01-2005, 07:21 PM HAHA! That's funny. Microsoft releasing a browser that actually works. Hahaha..
Imusion 02-01-2005, 09:15 PM Also a good place for help I forgot to mention. http://w3schools.org/
Awsome for help.
Website Rob 02-02-2005, 12:48 AM the_pm - Although YMMV and each has their preferences, my experience has shown that using % for Font sizing works just about the best across all Browsers. Using 'em' is good for word or line spacing and possibly printing, but some trial & error will show the 'em' is not good for Font sizing on a Web page. Browsers do not seem to treat that classification in the same way and IE is only one example.
Using a % for the base Font size then using % for larger/smaller Font has really saved me a lot of headaches. Most people only check their results on their own Browser, not that there's anything wrong with that :), but some have noticed (as indicated in this thread) it can be quite amazing/disturbing to see their code displayed in another Browser and/or another OS.
For the average person who doesn't want to know all the in's & out's of coding, sticking with:
% big x-big small x-small
for use with Font sizing, would do them just fine for 98% of the time.
Now, don't get me wrong, using 'em' in Web page is possible -but- like wearing shoes with holes in them just after a heavy rainfall, one has to be really be careful about where they step. ;)
0wn4g3 02-02-2005, 12:50 AM A freind of mine took our Webhosting.html and had a go with it. He found quite a few errors in the coding but the biggest problem was the meta tags and the positon of the style code. That was causing a majore break in the webpage. Also because of our theme/template alot of things dealing with the text size was really effecting the html pages layout and it was bursting at the seems.
After editing our extreme package.html for 3 hours today I found out that the codeing is very strict and if it is not right on FireFox will definetly SHOW you. So off to work we go with the learning experience under our belts.
Imusion 02-02-2005, 01:19 AM Originally posted by Imusion
Well... I am like the master of creating non-standard html pages that seem to work in firefox and IE. I remember I had 300 errors on one page. Thats bad.. lol
But now I've changed well somewhat with my new design I happen to be able to make it XHTML 1.0 Transitional. And it works perfectly in Firefox and IE.
The main problem on your design thats making it look all screwy in firefox is the text size. I'm assuming you purchased the template or something from Template Monster and the templates there are fixed sizes usually so your text is too big and it's stretching the layout in firefox.
So to fix the visual layout without making it HTML compliant you need to size down the text in firefox. Also I see a little messed up part on your code.
<style type="text/css">
<meta name="description" content="TheClanHQ i...">
<meta name="keywords" content="web hosting...">
<!--
Meta tags do not belong in the style sheet area. ;)
Now onto the fix try adding this to your CSS style.
body, table, td, tr {
font-size: 9px;
}
Hope it works!
Imusion
Yep like I noted before. :stickout: Looks much better...visual wise.
http://www.theclanhq.com/Webhosting.html now looks perfectly fine to me in firefox. You have the option of keeping the invalid html as it is now or using valid html. I'd personally go with the latter, but if you cbf then I can't force you. After all, you don't work as a web designer (thank god).
the_pm 02-02-2005, 02:59 AM It's still very fragile. One little boost on those microfonts, and the whole thing comes unglued (see attachment).
This all goes back to proper visual engineering to go along with good coding practices. Given the right mix, you don't have to worry about the many user configurations that could potentially ruin your site. You can make a site look great to you in [your[/i] browsers with your default settings, but that tells you very little about how others will be viewing your site. Proper engineering takes away the vast majority of the unknown risk.
My starting point would be to ditch the tables all together. But that's a very long, very advanced conversation, especially for a layout which has some complexities involved. Certainly, engineering the site to be adaptable, even using tables, would be an excellent place to start.
Voxxit 02-02-2005, 08:26 AM http://www.browsercam.com/
Originally posted by VoxxitDesigns
http://www.browsercam.com/
LMAO!!
I can't stop laughing. That's Windows for ya!
eDiamondStudios 02-04-2005, 04:55 PM http://www.theclanhq.com/Webhosting.html appears perfectly to me. I am using opera 8.
Yes i use Fire fox with my website most of the time. When i first got the site some of the features didnt look right to i researched it myself and i can quite remeber where i looked but anyways. I just use IE for editing the site so i know it looks good
peynir 02-05-2005, 07:39 AM Originally posted by immortal9
I am taking for granted your website is:
http://www.theclanhq.com?
Hehe...I am using the same template as yours :)
http://www.templatemonster.com/website-templates/6055.html
0wn4g3 02-07-2005, 03:35 PM Well turns out the problem was the CSS style sheet reference code was in the wrong place. Here you go.
This was the code before any changes were made.
<HTML>
<HEAD>
<TITLE>TCHQ Webhosting</TITLE>
<style type="text/css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<meta name="description" content="TheClanHQ is designed as a place for the Gamer. Providing cheap hosting with frontpage, php, stats, Mysql and domain names support. Affordable web hosting without compromising quality. Offering better then expected webspace and bandwidth, we will provide you the services you demand and deserve.">
<meta name="keywords" content="web hosting, cheap web hosting, Clans, Gaming, Webhosting, Teamspeak, Ventrilo, Cheap Webhosting, Voice Over IP, Voice Over-IP, VOIP, Teamspeak Servers, Ventrilo Servers, Gaming Clans, Reliable, Gamers, PC Gaming, Graphics Design, Graphics, Banner Design, Cheap Banners, Cheap Graphics Design">
This is the code after the changes were made. Once I moved the style type code to the right line below the meta tags it seemed to fix up all of our html pages. How about that.
<HTML>
<HEAD>
<TITLE>TCHQ Webhosting</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<meta name="description" content="TheClanHQ is designed as a place for the Gamer. Providing cheap hosting with frontpage, php, stats, Mysql and domain names support. Affordable web hosting without compromising quality. Offering better then expected webspace and bandwidth, we will provide you the services you demand and deserve.">
<meta name="keywords" content="web hosting, cheap web hosting, Clans, Gaming, Webhosting, Teamspeak, Ventrilo, Cheap Webhosting, Voice Over IP, Voice Over-IP, VOIP, Teamspeak Servers, Ventrilo Servers, Gaming Clans, Reliable, Gamers, PC Gaming, Graphics Design, Graphics, Banner Design, Cheap Banners, Cheap Graphics Design">
<style type="text/css">
Thank you guys for all of your help and responses.
grace5 02-07-2005, 09:24 PM I guess I am in the same boat,as I used IE, then look after a couple of complaints in FF and "oh me oh my"
but page does validate XHTML
my IE mess (http://1ahosting.com)
the_pm 02-08-2005, 05:00 PM Originally posted by grace5
I guess I am in the same boat,as I used IE, then look after a couple of complaints in FF and "oh me oh my"
but page does validate XHTML
my IE mess (http://1ahosting.com)
Validation is just a baseline, a starting point. AFAIC, being able to write valid code is like learning how to crawl - it's the first step before being able to walk and run. From there, you have to know how to use the technology best to suit the cross-browser, cross-platform environment. It's tricky with IE, because of the many, many bugs MS built into its browser and never bothered to fix. But you can stay inside of the industry accepted standards of development and display a site properly in IE as well if you're knowledgable in the area and don't mind banging your head against the wall every now and again ;)
grace5 02-08-2005, 05:16 PM Well after a day and Half a the nite of crawling, I got my site a little more managable than what it was yesterday thanks to some helpful soul at IWDN Forums .And the fact that it was XHTML comp.
This has been a huge eye opener for me as I at 1st used browsercam,(or something similar) and it showed it fine in FF.Only after downloading and installing FF could I see the differance.
I am a fan now of FF.
|