I don't have any trouble making a website compatible to Firefox, but when it comes to make it compatible for IE(6 and 7) and FF and Opera... Opera is much easier, but IE just doesn't seem to agree with my coding.
Any advices or tutorials for that?
No tutorials exist on the matter. The only thing that can be done is finding out what IE is doing wrong, then searching for a solution to this problem in the form of a hack, usually a bit of CSS with a # or > at the front etc.
You could save all these little tips together and form the worlds first 'What to do with IE' tutorial 
You'll never make a web site that's compatible with all browsers unless it is a very, very simple site. Perhaps one that says "Hello World!"!
There are too many browsers, with too many differences, on too many different platforms, to make testing them all a realistic proposition.
What exactly are you having trouble with? You could post the code and we could help fix it.
Properly planning out your structure and your CSS can be a big help. If done properly, there's no reason why it won't work in all browsers, and that includes IE6. Some important rules are:
1. It is vital you have a DOCTYPE at the top of every web page. Without one, your page will behave in quirks mode in most browsers, and start behaving erratically. The best one to use is XHTML Transitional, as this is the most common one.
You could use XHTML Strict, but this is harder to get to grips with and to get your page validated, as you quite literally use a bare minimum of markup. You also cannot use any attributes for an element that can be achieved using CSS, such as ALIGN or WIDTH, and cannot presentation use elements and attributes that have been deprecated
e.g.
Transitional
<div align="center">
Strict
<div style="text-align:center;">
Or even better, you'd put something like this is your external stylesheet:
div { text-align: center; }
Then in your document you would just use <div> on its own.
Here's the code for XHML Transitional
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2. Beware of the BOX MODEL effect. An explanation of the Box Model is available from the W3C's website - http://www.w3.org/TR/REC-CSS2/box.html
And an explanation of the problems with Internet Explorer dealing with this incorrectly can be found here - http://css-discuss.incutio.com/?page=BoxModelHack
3. Validate all your pages using the W3C's validation service
HTML - http://validator.w3.org
CSS - http://jigsaw.w3.org/css-validator/
Stick to these simple rules, and you'll be well on your way. Yes. The best advise is to stick to the w3 standards and test it in as many browsers as possible and validate it.
There is deffinantly no magic code that works with browser but you can increase your chances with clean code.
Thanks for the advices... I always have to work many times to set my sites in a way so that it works in the big three (IE FF and Opera). It ends up working, but it adds many hours of work.
Just a tip, don't forget about Mac users! Safari, which used to be Mac-only, but is now in Beta for Windows and the Mac, does act in a similar way to Firefox, but has quite a few differences! If you have a Mac, you can enable a Debug mode, which allows you to simulate all other major browsers, from one window. This is a link to download Safari, and this is a link about how to enable the debug mode. Again, the debug mode is only available for the Mac. The biggest problem I had when I started coding was with padding, border and margin. I could get things to line up in FF and Opera but not IE, or in IE and Opera but not FF. Now if I want a zero value for anything I explicitly set it.
I also try to avoid vertical alignments.
| mathiaus wrote: |
No tutorials exist on the matter. The only thing that can be done is finding out what IE is doing wrong, then searching for a solution to this problem in the form of a hack, usually a bit of CSS with a # or > at the front etc.
You could save all these little tips together and form the worlds first 'What to do with IE' tutorial |
The search the solution yourself or post the code here and we may be able to help you. But the second option is not good, if you find the problem yourself, it would be best and for the next time you will never face that problem.
Make a file and save there all those problems and tips of making site compatible with all browsers.
To find the problem, you dont need any compiler because your may be perfectly correct but its the way different browsers understand it differently. So, the solution of your problem is do a little task and imediately test in all 3 major browsers. (Dont forget to check in Opera ever, because Opera is proved to be the best browser).
| Quote: |
You'll never make a web site that's compatible with all browsers unless it is a very, very simple site. Perhaps one that says "Hello World!"!
There are too many browsers, with too many differences, on too many different platforms, to make testing them all a realistic proposition. |
No! its possible. I make all my sites compatible with all browsers. I dont code, i just use Dreamweaver still i have perfect control over my sites. I just check in Opera and IE and assume it will work fine in FF.i advice you quirksmode.org.
It is very useful about browser differences.(IE , Firefox, Opera ...) Code to the standards (set by the W3C), then tweak your code to make it work in Internet Explorer - but never write non-standards-compliant code: every browser will display standards-compliant code, even if it messes it up badly like IE often does; non-standards-compliant code isn't even guaranteed to display at all.
| imagefree wrote: |
No! its possible. I make all my sites compatible with all browsers. I dont code, i just use Dreamweaver still i have perfect control over my sites. I just check in Opera and IE and assume it will work fine in FF. |
In that case, you're not sure if it does work or not. You should NEVER assume 
| Quote: |
| GSIS wrote: | You'll never make a web site that's compatible with all browsers unless it is a very, very simple site. Perhaps one that says "Hello World!"!
There are too many browsers, with too many differences, on too many different platforms, to make testing them all a realistic proposition. |
|
THAT is NOT true!
Look at veerle.duoh.com. A realy nice looking and coded site what looks nice in Opera 7+, Whole Mozilla Suite (Firebird, Phoenix, Firefox, Camino(MAC)) and in IE 5.5 +, iCap, Omniweb, Konqueror(Linux) and Netscpae 6+!
Please, think before saying things like that.
My website is compitable with those browsers too. If you just use validated html and css and test your design regulary in those browsers and fix bugs you will have a nice site in every browser. | alem wrote: |
i advice you quirksmode.org.
It is very useful about browser differences.(IE , Firefox, Opera ...) |
Yes that is a very good site for this problem. Goes over most problems you'll run into. Otherwise you just have to post here with specific problems. | ©Wolfie wrote: |
THAT is NOT true!
Look at veerle.duoh.com. A realy nice looking and coded site what looks nice in Opera 7+, Whole Mozilla Suite (Firebird, Phoenix, Firefox, Camino(MAC)) and in IE 5.5 +, iCap, Omniweb, Konqueror(Linux) and Netscpae 6+!
Please, think before saying things like that.
My website is compitable with those browsers too. If you just use validated html and css and test your design regulary in those browsers and fix bugs you will have a nice site in every browser. |
What about IE 5? IE 4? Opera 1-7? In 800x600 part of the content (although you can argue it's use) is not visible unless you scroll left to right (ew). What GSIS said is true. You can make yourself work for MOST CURRENT browsers, but it will never look EXACTLY how you want in all browsers. Look at it in a text browser, "read" the page using a screen reader. Focus on your target audiance and make a site for them, don't aim for the whole world... you can't. Also note the differences between fonts and sizes and screens between mac and pc.You need to pick a reasonable sub-set of browsers and resolutions and code to that, realising that pleasing 100% of people is nigh-on (if not actually) impossible. A good place to start would be installing Opera, IE6, IE7 and Firefox and then making sure all of those display things correctly, but with an understanding that things will look slightly odd in Mac browsers and may simply not work at all on mobile or antique platforms.
In short, try, but don't bust a gut getting 100% - 10% is more than most developers bother with.
Your website need support XHTML and W3D..
I use % for div size and em for fonts. That way it doesn't matter about screen res or the font size the user has set except for images; the site will collapse to fit the screen.
What you should do is check to see if you pages are valid. This validator can help you out: http://validator.w3.org/.
It's also nice to place somewhere on your site something like: "This site is best viewed with FireFox". Or something like that. That way they can switch browsers. | future_technology wrote: |
| It's also nice to place somewhere on your site something like: "This site is best viewed with FireFox". Or something like that. That way they can switch browsers. |
Most people don't bother switching browsers. And if 'best viewed with Firefox' even means that it doesn't work in other browsers, (potential) visitors would simply close the site and/or go to another one. | Quote: |
| Most people don't bother switching browsers. And if 'best viewed with Firefox' even means that it doesn't work in other browsers, (potential) visitors would simply close the site and/or go to another one. |
I am agrre with this. Users don't need to know webmasters troubles. This is not their problem. When I am looking in my statistic I have 65% IE users, 33% Firefox, and 2% is other. Because my site is not profesional I am testing it in IE6, IE7 and FF. This rest can see good or not, but I haven't time for checking.
Sonam | coeus wrote: |
| ©Wolfie wrote: |
THAT is NOT true!
Look at veerle.duoh.com. A realy nice looking and coded site what looks nice in Opera 7+, Whole Mozilla Suite (Firebird, Phoenix, Firefox, Camino(MAC)) and in IE 5.5 +, iCap, Omniweb, Konqueror(Linux) and Netscpae 6+!
Please, think before saying things like that.
My website is compitable with those browsers too. If you just use validated html and css and test your design regulary in those browsers and fix bugs you will have a nice site in every browser. |
What about IE 5? IE 4? Opera 1-7? In 800x600 part of the content (although you can argue it's use) is not visible unless you scroll left to right (ew). What GSIS said is true. You can make yourself work for MOST CURRENT browsers, but it will never look EXACTLY how you want in all browsers. Look at it in a text browser, "read" the page using a screen reader. Focus on your target audiance and make a site for them, don't aim for the whole world... you can't. Also note the differences between fonts and sizes and screens between mac and pc. |
veerle.duoh.com is nice site. It looks well also in text browser Links!
With website you must decide between design, backward compatibility and nervs.
- You can have perfect site with common browsers IE 6+, FF2+, Opera 9+ with no problems
- You can have nearly perfect site with browsers IE5+, Opera 7+, Gecko Based, KHTML/WebKIT based with screen resolution 800x600+, but you spend lot of time to optimize your site for all browsers (especially for IE5.5 IE5) consuming many energy drinks, coffees, tees and other stimulants. And, oh, what should happen to your brain, ouou.
- You can use no CSS no HTML marcup (except <a>) and your site will be almost same in all browsers like IE, Opera, KHTML/WebKIT based, Gecko Based, text browsers Links, Elinks, Lynx, test browser Amaya, Mobile browsers and others.One more thing. Opera/Wii NEVER looks exactly the same as any other browser at all. It does a pretty good job, but is something to be aware of. Of course, if it did look the same, it would be nigh-on impossible to read anything.
Hi,
I'm currently building a website for my music band. So far I got it to work in IE 7 and in Opera 9. When I test it in FF however, the main functionality (the javascript menu) gets stuck behind an invisible layer.
I included in my css an id tag for my background, so that it would stretch to fit the browserwindow. To be able to see text on that background and to be able to scroll (but only the textlayer) I've set a scroller id in my css, with the z-index property (among others). This way anything typed in the scroller will apear in front of the background and will scroll (without the background scrolling with it).
Since the menu is the navigational part of the site, I don't want it to scroll with the text, but just remain fixed. Therefore I put the menuscript outside the <div id="scroller"> tags. First I put the menu before those tags, but then it wouldn't react in opera. Now I put it at the back, after the div and now it works in opera and ie. Now however it seems to have gotten stuck behind the scroller-div ...
I tried to solve this by putting the menuscript in a div, with the style-property z-index:1. Shouldn't it get on top that way? This didn't work. Can anyone help me? Thx
Object detection, Object detection, object detection. This sais it all. Plus Quirks mode helps a lot. But the final bottom line is that you need a lot of js to fix problems in IE. And conditional comments like: | Code: |
| <!-- if IE 6 >DO IE 6 CODE --> |
Or something like this 
I stoped trying to fix IE problems a long time ago. Replaces the hacks with a simple pop-up: "USE ANY other browser". Kiddin', but I'm thinking to do it. | BlueVD wrote: |
Object detection, Object detection, object detection. This sais it all. Plus Quirks mode helps a lot. But the final bottom line is that you need a lot of js to fix problems in IE. And conditional comments like: | Code: | | <!-- if IE 6 >DO IE 6 CODE --> |
Or something like this
I stoped trying to fix IE problems a long time ago. Replaces the hacks with a simple pop-up: "USE ANY other browser". Kiddin', but I'm thinking to do it. |
What if the user is using an even earlier version of IE? I've always used <!--[if lt IE 7]>CODE<![endif]-->.
A good plan for making a site standards-compliant, and with simple changes for <IE7 is this:
| Code: |
<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="main-ie-fix.css" />
<![endif]-->
|
Have two stylesheets, and the second one, main-ie-fix.css, has the little extra fixes that override settings in main.css to make the page look correct in <IE7. | Quote: |
| Your website need support XHTML and W3D.. |
No.
No.
| Quote: |
| It's also nice to place somewhere on your site something like: "This site is best viewed with FireFox". Or something like that. That way they can switch browsers. |
No.
Valid anything is no guarantee at all of cross-browser compatability, especially with IE <7
As mentioned, 'best viewed with' notices make you, the web designer, look like a salivating moron for not being able to even attempt compatability. Use (invalid) CSS and javascript tweaks to create fallback stylesheets and order content sensibly so users in 'unsupported' browsers can at least see your site.I wrote a post on browser compatability a few weeks ago. Here is is http://jabasite.ej.am/?p=12 Its trully impossible to make a layout looks the same in ALL browsers, maybe about:blank...
-The most secure method to make a site looks good in a wide range of broswsers is testing it, firefox IETabs plugin is magic for it (since most people use one of these browsers)...
-The DTD is important too
-Using well know techniques is another thing that helps, if many people use it must work (not for football or politic alignment )
-Validating your css will not made it crossbrowser, but may help you finding some little problems that you don't see...
I am going to do a Project work on Web designing. I would like to have the advice of an experienced person here.
I alredy know html. I need to know which are the important softwares that can be used for generating visualisations on websites inorder to make them nice.
Any comments on this thought will be thankfull...
