Jump to content

Validating Browsers


Elemental

Recommended Posts

Hey Folks, After going through all 11 pages in this forum (yeah, slow lazy day) and not finding this suggestion, I could have missed it though I suppose, I thought what the heck at the very least someone will get a chuckle out of my suggestion.Since there is so much PAIN and AGONY in the browser world of compatibility why not come up with a "Browser Validator", you know something like the W3.org has for HTML, CSS, and the like; only it would validate the code for each browser type (a validator tool for each browser type)I'm not sure how plausible something like this would be, I suppose since each browser manufactures has their own way of doing things that the validator would have to be authored by them; in which case getting them to agree on something like this could be just as easy as getting them to agree on one standard format.Anyway just a thought, but if this is already available then "PLEASE" point me there.Peace,Elemental

Link to comment
Share on other sites

Can you give me an example of code that would be "valid" in one browser but "invalid" in another?

Link to comment
Share on other sites

Can you give me an example of code that would be "valid" in one browser but "invalid" in another?
Synook, Okay, bare with me I'm new at this stuff, maybe CODE isn't the correct syntax.If you remember, I posted a question about changing the color of the scroll bar, but that CODE only works in IE, and then someone else posted that it worked for them in Opera...That's what I meant by a "Browser Validator" a program or application (I guess it's safe to say) that would check all the code on the page i.e. HTML, CSS, JavaScript, etc, and tell you if it will read the same for IE or FF or whatever browser that particular validator checks for.Peace,Elemental
Link to comment
Share on other sites

Oh right. Wonder how someone would make such a thing though. How could you tell?
Synook, I have no clue as to how but I would guess to say that if you already know that a certain, lets use the Scroll Bar example, CSS rule works this way in FF and Opera but not in IE you would have the basis to start with.How does the CSS or HTML Validator work at the W3C.org? granted it doesn't check to see the browser being used but I would think that something like it could be developed? I bet web designers would scramble for a tool like this; no more all nighters unless of course you had a dead line to meet...Peace,Elemental
Link to comment
Share on other sites

How does the CSS or HTML Validator work at the W3C.org?
For the HTML one it uses the Document Type Declaration, which is a set of rules that governs how the language used should be structured.I suppose proprietary tags and attributes could be checked...Really, however, all developers should code in 100% valid HTML and CSS. The scrollbar CSS properties are proprietary, are not valid, and therefore should really not be used at all. The W3C validators check for valid code, that should be all you need. If you needed to use one of these "browser" validators, your code is not conforming enough.
Link to comment
Share on other sites

For the HTML one it uses the Document Type Declaration, which is a set of rules that governs how the language used should be structured.I suppose proprietary tags and attributes could be checked...Really, however, all developers should code in 100% valid HTML and CSS. The scrollbar CSS properties are proprietary, are not valid, and therefore should really not be used at all. The W3C validators check for valid code, that should be all you need. If you needed to use one of these "browser" validators, your code is not conforming enough.
Synook, I did run the work that I've been learning with through the W3C validators and after fixing what I got wrong it did validate, however the fact that it did didn't make the page load the same in FF and IE and that's why I posted the suggestion.I do see and agree with your comment "all developers should code in 100% valid HTML and CSS" but since not all browsers agree it would be great to have a tool that would help developers do what the browsers don't or wont due to their proprietary language.Like I mentioned earlier, I'm new at this stuff, I'm sure you and many others have spent countless hours trying to figure stuff out; I can tell you I've cursed at my screen a few times and I'm just learning, or maybe that's just me.Peace,Elemental
Link to comment
Share on other sites

If an HTML element, a CSS property/value, etc. is defined, it SHOULD work the same in every user agent (eg. Browser, Search engine, etc.) that claims to support it.If it's proprietary, i.e. be created by a single user agent vendor, it would work only for their product(s). Period.The W3C validators ensure you're writing HTML and CSS as you should AND check whether you have proprietary stuff.As for the same W3C defined thing not working the same in all browsers - a program that would check that can never be made to be 100% accurate and for every page.What could be done instead is a single test page that all browsers should render the same way - tests. Like the Acid2 test to name one.

Link to comment
Share on other sites

As for the same W3C defined thing not working the same in all browsers - a program that would check that can never be made to be 100% accurate and for every page.
I agree with Boen. There are just too many factors and small quirks involved with HTML and CSS to write a program that will tell if it works. It's just not possible. Factors like user's screen settings, the especially difficult CSS combinations of for example absolute/relative positioning, margins and floats ++...
Link to comment
Share on other sites

boen_robot; Jonas, Thank you both for your comments; like Synook, you've been helpful and dare I say patient, I can be very slow to learn at times.Given the fact that my "self learning Page" validated for both XHTML and CSS using the W3C.org validators, how is it that the Page renders differently in IE and FF?Forgive my ignorance for a moment; I understand that they are different browsers, and each of them has it's own way of dealing with things but if my code is valid and compliant should it not render the same in either IE or FF, not to mention the other browsers?If the answer is no, which obviously it is, than what must I, or anyone else for that matter, do to ensure that the work one does will render the same, or as close to the same as possible? I know one must test, test and then test some more on the various browsers as well as machines but one needs to know what they're testing for.Do we need to learn various and specific versions of HTML, XHTML, CSS, etc for each of the browsers in order to have our work render the same?Obviously, this is the argument behind Validation and Compliance, we shouldn't have to learn a myriad of programs or languages in order to have a page render correctly in all browsers but I'm back to the question, what then?Sorry if this sounds like I'm ranting, I'm just trying to understand the how-to-be compliant if the who-is-not doesn't want to play by the same rules; no pun intended.Peace,Elemental

Link to comment
Share on other sites

Well, there are a few reasons for discrepancy, here are a few I consider major:#1 Browsers which ignore standardsOld versions of IE fit into this category nicely, and they're still only fixing this as an opt-in in IE7/8.#2 Incomplete support of a standardIt takes time to add all of the relevant functionality into a rendering engine, and so there's a delay between a standard being published and it being implemented. That contributes.#3 BugsRendering engines aren't perfect, and so we have things like Acid2 which give a test which will tell you if the rendering engine works as it should.#4 UB (undefined behaviour)Not everything is well defined in the current HTML/etc standards, and different browsers often implement the rest in different ways, last I heard a few of the major groups were meeting to try to work out how the rendering engines should act in those cases so that it could be standardised.Standards are still important though, once they've taken root and we start to see old versions of IE replaced by more compliant versions or other browsers it WILL be possible to write something and know almost exactly how it's going to look everywhere (in complex cases it's still easily possible that a rendering engine bug might be found, and if it's in Gecko, KHTML or WebKit you could report it).Anyway, for testing, it's still important to know how each engine is going to handle it - and there are tools for that around. browsershots.org provides a useful service (even if it is usually annoyingly slow), and I have three versions of IE, two versions of Firefox, Opera and Konqueror on here for local testing purposes.

Link to comment
Share on other sites

It takes time to add all of the relevant functionality into a rendering engine, and so there's a delay between a standard being published and it being implemented.
Last time I checked, we're all still using HTML 4.01, released 24 December 1999. Practically yesterday!laugh.gif
Anyway, for testing, it's still important to know how each engine is going to handle it.
Absolutely right. Because even if the code checks out, if the browers use different engines, you never know where a funky space is going to turn up, a stray pixel here or there, or even how much space a certain font really takes up. Going platform to platform is especially hazardous. No validator is going to tell you that.Then again, if you COULD pull it off, you'd have a best-selling app, for all the reasons mentioned.
Link to comment
Share on other sites

AElliot; Deirdre's Dad, Thanks for chiming in guys; I get the why's but not the hows. I understand as well as agree with all the reasons given but that still leaves me in the dark as to the how.For instance, I know what my "Self Learning Page" looks like in IE and FF. I like the way it looks in IE and as much as I like or I'm beginning to like FF it still doesn't render the page the way I would like it too; which brings me to ask, why? is FF not compliant or is IE not compliant?I've been using Wendy Willard's book "HTML A Beginner's Guide, Third Edition" to teach myself what little I know of the subject, it was recommended to me by a friend who used an earlier version of the book when he studied web design about 6 years ago; she talks about compliance and having your code validate to the W3C standards, the same things some of you have mentioned.If this book was or is still being used for teaching purposes it would stand to reason that it would follow the standards it refers to, and I could only assume, as a student, that it does. Well, imagine my surprise when I tested my work in FF and it was nothing like what I expected? I thought, okay I did something wrong lets go see what I missed; and open tag or one that wasn't closed, etc... but no all was correct. I then took a look in the Appendix C of the book, Troubleshooting (FAQs) and I found the entry "My Page Looks Good in One Browser, but Terrible in Another!", hurray here's what I'm looking for... I was wrong of course... and I paraphrase: Developers sometimes don't bother to look at the site in different browsers..., did you use MS Word or MS FrontPage because..., did you use CSS or other HDTML some older browsers..., and finally just: test, test, test.No where does it say if you used the CSS rule, and I'm just making this up I'm not saying this rule behaves like my example, - border-color: red; - for instance, this rule will not have the desired effect in FF what you should use is this rule - border-style-color: red; - and so forth.So that's my dilemma, as I'm sure the dilemma for most if not all beginners as well.Anyway, ALL of you have been very patient with me and I truly appreciate it, I'll just go back into my cave and continue learning in the hopes that soon the light bulb will go off or rather get turned on.Peace,Elemental

Link to comment
Share on other sites

Thank you both for your comments; like Synook, you've been helpful and dare I say patient, I can be very slow to learn at times.
Hey, don't be hard on yourself. This is difficult stuff to grasp, because it really doesn't make any sense that things are this way.
Given the fact that my "self learning Page" validated for both XHTML and CSS using the W3C.org validators, how is it that the Page renders differently in IE and FF?Forgive my ignorance for a moment; I understand that they are different browsers, and each of them has it's own way of dealing with things but if my code is valid and compliant should it not render the same in either IE or FF, not to mention the other browsers?
Ideally, yes it should. In reality however, that's (like you say) obviously not the case.
If the answer is no, which obviously it is, than what must I, or anyone else for that matter, do to ensure that the work one does will render the same, or as close to the same as possible? I know one must test, test and then test some more on the various browsers as well as machines but one needs to know what they're testing for.Do we need to learn various and specific versions of HTML, XHTML, CSS, etc for each of the browsers in order to have our work render the same?
Test, test, and test, yes. Then if you're stuck on something, you musk ask others who have been through it before and made it work. I can guarantee someone has seen and solved most of your html/css problems before. There's no need to learn various and spesific versions of HTML and XHTML, as there really is just one version with varying degrees of strictness (HTML 4.01 loose/strict -> XHTML 1.0 Transitional/Strict -> XHTML 1.1) CSS however is usually where the difference stems from. There's no such thing as various versions of CSS, but there are different steps of development, or spesifications. There's CSS 1, CSS 2.1 and CSS 3 (working draft). I'm going to tell you two differences that causes grievances with CSS:1. Center alignment.
<div style="text-align: center;"><div style="margin: auto; text-align: left;">content...</div></div>

Explanation for the above:Internet explorer uses text-align: center to center any element (while it is originally intended for text-alignment). Opera, Firefox, Safari and other browsers use margin: auto to center align content. Then there's the text-align: left, which is needed to counter IE's text-align center, or otherwise in IE, the text will be centeraligned within the centeraligned content, which may not be desirable. You see, unless specified otherwise, certain CSS elements may be inherited from parent elements, so that when you have a <div> underneath the first <div>, both will get text-align: center;.BUT there's really no way you can know this stuff without asking people why your content doesn't align in all browsers. So remember, ASK, ASK, ASK, and then ask them to give an explanation as to why there is a difference as well. That way you learn from it.2. BordersI'm not going to illustrate this by code, because I don't have an example handy, and it is a long piece of code that I've used in the past to bring forth this headache. I once made a site with several boxes close-by (like table-cells). Each of these boxes had a border on it. However, when I aligned them a certain difference from each other, it looked good in two browsers, while it looked scrunched up in IE. You see, when browsers implement borders, they don't do it the same way. Opera and Firefox put the border on the inside of the element. Say you have a defined width and height, and so when adding the border, it stays the same width and height, and instead the content area is slightly smaller (2px on each side for instance). IE on the other hand builds the border on the element so you go from a div with 200px width to a div with 204px width (2px border = +2px on each side). In my case the elements were set next to each other with no more than 2 pixels between them. So you can imagine in IE, the 2 extra pixels on the elements meant there was no more room, and it looked ugly.So that's border differences, something that may not be obvious or even very noticeable with elements further apart, but will at some point cause grief.

Obviously, this is the argument behind Validation and Compliance, we shouldn't have to learn a myriad of programs or languages in order to have a page render correctly in all browsers but I'm back to the question, what then?Sorry if this sounds like I'm ranting, I'm just trying to understand the how-to-be compliant if the who-is-not doesn't want to play by the same rules; no pun intended.Peace,Elemental
Well, compliance is a very good start really, both with (X)HTML and CSS. In the end, it doesn't cut it though (alone and of itself). That's when you ask other people. Some people have "studied" these matters a lot through trying and testing, and have made entire pages on their result. Instead of reading all of this (something you may probably end up doing as time passes though), just go on and learn this stuff as it comes up, because there's no way to remember everything from reading, and not having tried it in practice.
Link to comment
Share on other sites

For instance, I know what my "Self Learning Page" looks like in IE and FF. I like the way it looks in IE and as much as I like or I'm beginning to like FF it still doesn't render the page the way I would like it too; which brings me to ask, why? is FF not compliant or is IE not compliant?
I'd be willing to bet money that IE is not compliant. :mellow: The best thing to do really is develop and test in Firefox and/or Opera, and then work out the quirks with IE afterwards.
I've been using Wendy Willard's book "HTML A Beginner's Guide, Third Edition" to teach myself what little I know of the subject, it was recommended to me by a friend who used an earlier version of the book when he studied web design about 6 years ago; she talks about compliance and having your code validate to the W3C standards, the same things some of you have mentioned.If this book was or is still being used for teaching purposes it would stand to reason that it would follow the standards it refers to, and I could only assume, as a student, that it does. Well, imagine my surprise when I tested my work in FF and it was nothing like what I expected? I thought, okay I did something wrong lets go see what I missed; and open tag or one that wasn't closed, etc... but no all was correct. I then took a look in the Appendix C of the book, Troubleshooting (FAQs) and I found the entry "My Page Looks Good in One Browser, but Terrible in Another!", hurray here's what I'm looking for... I was wrong of course... and I paraphrase: Developers sometimes don't bother to look at the site in different browsers..., did you use MS Word or MS FrontPage because..., did you use CSS or other HDTML some older browsers..., and finally just: test, test, test.
Wow. Excellent troubleshooting. Now go throw that book out the window.J/K. :) Keep the book, but realize however that books are really not good mediums for teaching web development. When was the book released (your copy)? It's likely that it's outdated. I mean, "did you use CSS"? Of course you used CSS, why wouldn't you? I agree that if you made your page with MS Word or Frontpage, it would most likely ######, and look horrible in all other browsers than IE. However, CSS is a really powerful tool, and shouldn't be called a problem under troubleshooting. She's partially right about the developers not looking at the site in different browsers though. If you do that while developing instead of just at the end, you can save a lot of grievances by cutting stuff while in development, and finding a way that works, instead of trying to backpaddle at the end and fix everything at once.
So that's my dilemma, as I'm sure the dilemma for most if not all beginners as well.Anyway, ALL of you have been very patient with me and I truly appreciate it, I'll just go back into my cave and continue learning in the hopes that soon the light bulb will go off or rather get turned on.Peace,Elemental
No, no, no. Don't go into your cave. Ask the other cavemen for advice, so to speak. To go with the analogy, learn what is the most recent metals discovered, how you prepare a fire, and the newest techniques to further harness your weapons. :)
Link to comment
Share on other sites

Three cavemen hunt mastodon for dinner. As they approach the beast, two cavemen hurl spears into its flesh. The mastodon groans, collapses, and dies.Meanwhile, the third caveman has been throwing rocks. Naturally, they bounce off the target, and his mastodon charges out of sight.Caveman One: "Gee, Microspear gets more and more compliant every day."Caveman Two: "Yeah. Last week, he was throwing sand."Caveman Three: "Hah! When Microspear rules the world, you'll be out of compliance."(Sorry. I couldn't help myself.)

Link to comment
Share on other sites

You'll never find a program that will tell you if a given piece of HTML code renders correctly in a browser ("works"), or if a given piece of code renders the same in more then one browser. There are too many subtleties in rendering engines and they change too often (and some are proprietary) where it makes development of software that can do that prohibitive.The only thing you would be able to do, and I'm not sure how useful this would be, would be to scan through an HTML document and compare the tags with a compatibility table. The output of the program would be to tell you what percentage of tags, for example, each browser supports. Or, it would list which browsers support every tag on the page. If you had some VBScript code, for example, it would be able to tell you that it will only work in IE, but that's about all it would be able to say. You wouldn't be able to tell if a given piece of code looks the same in more then one browser, only which browsers support all of the tags that you used.

Link to comment
Share on other sites

justsomeguy; Huw008; and the rest whom I've already thanked, WOW! Talk about support, THIS FORUM ROCKS !!!!Thank you Guys/Gals (don't want to assume or offend anyone) I'm really 'touched' by your patience, understanding, and encouragement. Also, thank you all for taking time out of your busy personal lives to explain, and suggest on how to proceed.Jonas; thanks but I was J/K about the cave thing, although there are days when my kids ... well, that’s a topic for another forum...Deirdre's Dad; thanks for the humor; where would technology be without it? I can't tell you how many times I've wanted to put my foot through my monitor...________________________________________________________So, would it be safe to say then that, FF should be my starting point and then check how the others behave and repair accordingly?This would suggest, to me, that I could have more than one rule within my CSS document, or multiple CSS documents, that would address each of the browsers own way of handling things, am I correct in assuming this? And, if I am, should I be concerned with how I code my HTML tags to reflect the use of more than one CSS document? and by this I don't mean and additional link reference within the head tag to the 2nd, 3rd or however many CSS documents.Peace,Elemental

Link to comment
Share on other sites

To add my two-bits worth, even if your page(s) validate, it can still look goobered up which is usually caused by the coder not properly defining the element correctly. (i.e <p> tag in the wrong place; using float: left when you shouldn't; postion:absolute or relative?; and so on). I just fixed a page the other day that it looks fine in IE6, IE7 but it was bit off in Firefox and yet my code validated.

Link to comment
Share on other sites

So, would it be safe to say then that, FF should be my starting point and then check how the others behave and repair accordingly?
Well, yeah, because it's typically a better start. Usually you won't have to repair for Opera at all, or only very slightly. IE is the difficult one, but starting with IE and going the other way is more difficult because IE is so forgiving both with code and interpretation thereof.
This would suggest, to me, that I could have more than one rule within my CSS document, or multiple CSS documents, that would address each of the browsers own way of handling things, am I correct in assuming this? And, if I am, should I be concerned with how I code my HTML tags to reflect the use of more than one CSS document? and by this I don't mean and additional link reference within the head tag to the 2nd, 3rd or however many CSS documents.Peace,Elemental
Well, if you want to get real technical, you can add IE-spesific stylesheets through something called Conditional Comments that while being caught by IE will be registered as regular <!-- HTML comments --> by the other browsers. You should really avoid this if you can though, because it involves re-defining already set CSS rules. The ideal way to develop for IE is to apply CSS rules that don't register in the other browsers, such as the text-align: center; to align an element, and then make up for it with text-align: left;.
Link to comment
Share on other sites

Well, if you want to get real technical, you can add IE-spesific stylesheets through something called Conditional Comments that while being caught by IE will be registered as regular <!-- HTML comments --> by the other browsers. You should really avoid this if you can though, because it involves re-defining already set CSS rules. The ideal way to develop for IE is to apply CSS rules that don't register in the other browsers, such as the text-align: center; to align an element, and then make up for it with text-align: left;.
I'd say otherwise. Conditional comments allow you mark the version of IE (or a range of IE versions) that is known to have a certain bug. Inside this comment, you could have only the fixes for that version, so that when a new version is out, you'd only change the comment's target, or not, depending on whether the problem is solved or not.Yes, this will require revision of the conditional comment's contents if you change the main stylesheet, but if you're really changing the stylesheet (i.e. change more than just colors and images), you're likely to need to change the IE fixes anyway. A single stylesheet containing fixes may then become harder to change, because you may not be sure what a certain fix was needed for.In the end of the day, I guess it depends on the quirks itself. For the text-align issue, sure, but for floats, positions and other crutial elements of the layout, this may not be the case.
Link to comment
Share on other sites

newseed, Thanks for the input, your point IE and FF is what started this post for me. I had the same issue when I tested my, dare I say again, "Self Learning Page"; looked great in IE not so great in FF.______________________________________What have I started??? It's good though, I'm glad to hear both sides of the argument. I've seen, what I've just now learned to be, "Conditional Comments" in use and honestly after reading the short pro and con you two just noted I would just write a CSS document that would address the version of IE I wanted to target; it would be easier to remove the link to it later; provided, of course, I could that. More to learn... the list just grows, and grows doesn't it?PeaceElemental

Link to comment
Share on other sites

More to learn... the list just grows, and grows doesn't it?PeaceElemental
Yeah. For anyone to claim that they've learned all they can learn with HTML+CSS+Browser Behaviour is usually utterly preposterous.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...