Forum Moderators: open
Here are some pointers and ideas on how to avoid getting shocked, should you decide to view your page in a "real" browser ;)
Don't use IE as your default browser
When you design/develop a new page, or try out a new design/layout - do not use IE as your primary browser. Make the page work in a good browser, such as Mozilla, first - then tweak it a little so IE will understand how to render the page as well. Make sure your tweaks don't cause the page to break in Mozilla/Opera ;)
Use a full DOCTYPE
Always, always use a full doctype, whether you're worried about validating your pages or not. The doctype serves a far greater purpose than validation. You will be surprised how much a page layout will change depending on whether you use a full (and valid) doctype or not. Again, IE is the black sheep. Layouts can be stable or break depending on the doctype.
Unsure about which doctypes you can use? Check W3C's list of valid DTDs [w3.org]
Realize that IE does not render CSS correctly
On this forum I have seen the following numerous times:
:link {
text-decoration: none;
}
:hover {
text-decoration: underline;
}
Ok, that looks ok, doesn't it? There's no problem with the first selector. It will do what you expect it to do - remove the underline on links. However, the second selector will cause all elements to be underlined when you move the mouse over them.
Why? According to the CSS "rule book" :link, :hover, :active, etc can be applied to any element. Right now, the anchor tag is the only element to which :link and :visited can apply. But, you can hover all elements. Again, IE is the only browser that doesn't get this. IE will not apply any :hover rules, unless the element is an anchor. But all good browsers will... and they are right.
IE 6 is not much better than IE 5
IE 6 was supposed to be fully "CSS1 compliant". Is it? No! Basically, the only things they fixed were:
• correct boxmodel rendering (if using a full doctype)
• fixed rendering bug which was exploited in the boxmodel hack
...and, that's about it. IE is not CSS1 compliant. It doesn't support some of the most basic CSS rules. You would think that something that has been around for over seven years would be implemented by now, but it's not. Not in IE. But it is in most other browsers.
So, when you read the CSS "rule book" on W3C's Web site [w3.org], keep in mind that even though something is supposed to render a certain way, that doesn't necessarily apply to IE ;)
a:hover/claus
And IE likes to make things work that shouldnt really work too, like closing tags for you if you forgot to close them and such.
p.s. You sound like a good person to offer me advice on my problem, if you have the time or inclination, please tell me what you think about this thread- [webmasterworld.com...]
--Kenn
Don't use IE as your default browser
But don't forget that 95 - 98% of your audience will be using Internet Explorer as their default browser.
I got badly bitten [webmasterworld.com] by IE's permissiveness until SuzyUK straightened me out.
Incidentally, I dumped IE for security reasons; getting a valid browser (and tabs, and good cookie control, and popup blocker, ...) were all very pleasant extras.
Make the page work in a good browser, such as Mozilla, first - then tweak it a little so IE will understand how to render the page as well.
Doesn't it make more sense to focus on the most popular browser, then check it works in other browsers?
Otherwise you build pages optimised for the 1 in 20 (approx) of your visitors using Moz/Opera, rather than the 19 in 20 who use IE. Which seems a bit... fanatical ;)
Doesn't it make more sense to focus on the most popular browser, then check it works in other browsers?
There are a 100 ways to get a page wrong -- so it only really works for your version and patch-level of the browser you are using at your monitor resolution and option settings.
Put those things together, and you'd be lucky if 5% of your potential audience can see the all your pages without some sort of quirk, no matter how minor.
Fixing all the problems that sloppy IE lets you get away with on your machine is a big headache.
But, as DrDoc says, design it with a better browser, and the retrotweaks for IE are usually very minor.
I just accidentally (in another post) got turned on to a free service that lets you check your page in any web browser (for free). It made me delete something from my site that would improve its visibility in all browsers. Sticky me for the URL for now, I'll ask the MOD if I can post it.
the hover example is really not an IE issue, it's just plain wrong not to make it an a:hover if that is the effect you want
I agree that it's wrong not to make it a:hover... But since a lot of people test in IE, how are they supposed to know? If IE got this thing right, I'm sure those developers/designers would use a:hover instead :)
When it is a lot easier to code for the compliant browsers and then twick for IE instead of the other way around, no
I thought it was easier to code for IE because 'it lets you get away' with a lot of things. I'm not an HTML expert, but I've never had to 'tweak' anything to show up in IE. I code intuitively and it shows up in IE.
But I HAVE had to go tweak stuff to show up in Netscape.
feel free to correct here, but IE seems like a browser that can do more things than Mozilla. Wouldn't that suggest it is better?
The last "browser war" thread turned into a regular shouting match across the oceans.
There's something to be said for writing code that will be validated. At least we can be sure it will work on the major browsers.
The tweaks after the validation might or might not be necessary.
I once was concerned with Netscape 4.X so I wrote alternate stuff for that browser. I don't anymore. I figured out that many of my javascripts weren't working with IE 5.0 (tested and written on 5.5) so I modified my scripts and they now work on 5.0+ and opera and NN 7, Mozilla, etc.
I use IE and recommend it to all my clients. Sure the others are nice (and I downloaded M just today after reading this thread), but if it validates, and it works in IE, I'm satisfied until I need to be concerned about it.
I code intuitively and it shows up in IE.
That is exactly the point that Doc is making.. with the "forgiving nature" of IE it allows you to code intuitively.. but that is not necessarily correct code.
So when you have occasion to require that code to work on something else and it doesn't you will be blaming the other browser right?..
Otherwise you build pages optimised for the 1 in 20 (approx) of your visitors using Moz/Opera, rather than the 19 in 20 who use IE. Which seems a bit... fanatical ;)
Nope! you're building pages that work in 20/20 browsers.. if it works in the others, chances are that it will work in IE too..
e.g the quoted simple example being the :hover example :hover will work in IE, but it works correctly in other browsers so causes added effects in them but simply learning to add the specific element a:hover will mean it will work as intended across all browsers,
so it's laziness, not fanatical, not to know this.. You are effectively assuming that :hover only applies to links and IE doesn't do anything to discourage you.. therefore it "promotes bad design" habits
I know 90+% view with IE, but as a web developer I know there are a growing percentage that don't!
Suzy
I use IE and recommend it to all my clients. Sure the others are nice (and I downloaded M just today after reading this thread), but if it validates, and it works in IE, I'm satisfied until I need to be concerned about it.
That is precisely how I got bitten in the thread I refer to in my post above. The code was valid, and displayed incorrectly (but the way I wanted) in IE due to a bug in IE. It displayed corectly (but not the way I wanted) in NN7.
So validation does not protect you from IE bugs.
As an aside, the correct code also displayed the way I wanted it to in IE, so in this case no tweaking was required.
I thought it was easier to code for IE because 'it lets you get away' with a lot of things. I'm not an HTML expert, but I've never had to 'tweak' anything to show up in IE. I code intuitively and it shows up in IE.
It is much easier to create crossbrowser markup when you write for the stricter browsers rather then IE which lets you "get away" with bad markup. What will work in the stricter browser will almost always work in IE, but it hardly ever works the other way around. And in the case of IE bugs, there is generally a fix for most of the ones you will encounter.
As for this BS about pages optimized for stricter browsers and IE being mutually exclusive. If it is optimized for the stricter browsers, 90% of the time it will also be optimized for IE as well. IE will have less computations in order to figuring out what you really want.
Now do you understand why we say it is easier to code for stricter browsers, such as Mozilla, and not IE?
SuzyUK:
Nope! you're building pages that work in 20/20 browsers.. if it works in the others, chances are that it will work in IE too
But surely the point of this thread is that IE can behave differently!? IMHO coding for the most standards compliant browsers when the most popular browser (by far) is the least standards compliant is making additional work for oneself for no apparent reason? AFAIK, there is no magic bullet to replace testing in multiple browsers. Whether you develop in Moz, Opera, IE whatever, you still *have* to test.
I work on IE, then check it in others. I once turned some CSS off for Opera 6, when it resulted in some buggy rendering - which worked fine in IE - but that's a different matter ;)
Whether you develop in Moz, Opera, IE whatever, you still *have* to test.
And when you're testing in the non-IE browsers, you're more likely to find mistakes if you're coding for IE. If you code for the more standards compliant browsers, you have a better chance of not having mistakes, or at least not as many.
Jennifer
Problem is: how to get experienced?
test your site in ALL major browsers. - I do it everytime before publishing the website (using IE, Opera, Mozilla, NS6; it's tested on IE for Mac; Mozilla, Opera on Linux, too).
If you run into problems - search the web for known bugs - you'll most likely find a solution.
If the web-search doesn't provide a solution - look for one yourself.
and then, when you got it - tadaaaa, a bit more experienced
;-)
Make the page work in a good browser, such as Mozilla, first - then tweak it a little so IE will understand how to render the page as well. Make sure your tweaks don't cause the page to break in Mozilla/Opera (my emphasis)
Test in Moz, test in IE, then test in Moz again...
Versus:
Test in IE, test in Moz, test in IE again...?!
ISTM thorough testing is the most effective way of identifying and fixing issues (as it always has been ;)).
Assuming the overall aim is delivering "best possible appearance" to as much of the audience as possible, it seems more effective to focus on getting it right in IE and then give the pages a quick frob, if really necessary, for other browsers.
For me, as a site builder, it makes sense to see the web the same way 95% of visitors see it. I actually prefer Mozilla, but using it as my default browser seems sub-optimal (and self-indulgent) at the current time.
Test in Moz, test in IE, then test in Moz again...
Yes, mattur, that's exactly what I meant.
As for how to get the experience (and with that some professionalism) you are doing yourself a favor by developing for stricter browsers. The issue at stake isn't "which browser is best"... The issue here is "what's the easiest way to make Web pages that will work on as many platforms, browsers, and 'tools' as possible.
Remember that when you say "IE" you're most likely talking about IE for Windows (at least that's what most people imply, though not on purpose). You will cause yourself far less headache by developing for a strict browser first.
Why do something wrong, only to try to make it right afterwards? Wouldn't it be easier to make it right first, then make any changes you need to make, but without making it wrong?
When I said that IE promotes bad design I meant exactly what SuzyUK said. If you use IE as your primary browser for testing Web pages you will never be prompted about any mistakes you might have made. And, I'm not talking about "oops, I forgot the closing tag", 'cause that's what a validator is for.
No, (and I'll be as blunt as I possibly can) I'm talking about plain wrong coding, unprofessional IE proprietary mistakes! And the problem is that those "mistakes" will soon become deliberate. "Hey, it's working!" Yeah, but that doesn't necessarily make it right.
You don't want to make deliberate mistakes, code wrong on purpose - even if it seems to work in IE.
We all know that about 95% of the Internet users are using IE as their browser of choice, so of course it is most important that the page works flawlessly in IE. But that's not professionalism.
I take pride in what I do. And I don't tweak anything without knowing exactly what I'm doing, or without knowing exactly why I'm doing it and the effect it will have on other UAs people are likely to use when visiting the site.
There's a huge difference between "mistake" and "purpose".
[edited by: DrDoc at 3:18 pm (utc) on Oct. 6, 2003]
So, whatever methodology you use to test, if it isn't guaranteed to make those three classes of people happy, it may be time for a rethink.
This place is a nice find-
anybrowser.com
Make sure your 'car' can run on all the backroads, then tweak it for the busiest highway.
...'cause the backroad is where the real performance issue is at stake
Does this mean my default browser is better than your default browser? No, of course not. It just means other factors (like knowledge) are more important.
Bad workpeople blame their tools, y'know ;)
I totally agree with DrDoc. Using Mozilla is a great way to test for bugs as it displays code properly.
There is also lots of CSS that other browsers support, but IE doesn't. The good thing is that IE will just ignore the CSS that doesn't support, so your site will still be useable in IE even if you use stuff it doesn't support.
There is one main exception to this:
position: absolute; position: fixed;
As we know, IE doesn't support position:fixed, although it's presence seems to confuse it into ignoreing position:absolute. Basically, don't use both fixed and absolute positioning for the same object. There is a workaround for this, although it is likely to make your site quite inaccessible in iCab (not that most people are desparately worried about the very small number of people that are crazy enough to actually use iCab).
Jennifer
I used to use IE5.5 and 6
EVERYTHING ever programmed into Netscape 7 that works also works perfectly in IE.
LOTS of programming in IE never worked in Netscape.
Writing a page that IE displays correctly should be validated. Why cut off 2% of people that could visit your site and make money for you? Would you stand at the doorway of a shop you owned and turn one in fifty customers away? How would you feel if you were turned away? Go somewhere else? You bet...
And if that 2% turned out to be search engine spiders because your code does not validate correctly?
Personally, I think any webmaster that fails to test in browsers other than IE are just lazy or can't code properly. Though it should be tested in IE as well as other browsers.
