Paul S
asked on
More compatible website
I have a website that i keep up in my free time http://www.paulscomputerservice.net . If you go there using a browser other than IE it will display a message, because i have found that my site doesn't work well with other browsers. I do now want this. I recommend not using IE to people all the time to fight spyware, yet my site doesn't work on anything else. I want a more compatible website that will work with FireFox, Mozilla, Slim Browser, Netscape, etc..
1) What things should i avoid?
2) why does my site only work on IE?
I think it has something to do with the menu on the left which is an include file. I actually pass the body to the page using
index.php?body=pagetoload. php
so my menu doesn't need to be an include file really. will making that static help? i use alot of css to position stuff, is that not compatible with other browsers?
1) What things should i avoid?
2) why does my site only work on IE?
I think it has something to do with the menu on the left which is an include file. I actually pass the body to the page using
index.php?body=pagetoload.
so my menu doesn't need to be an include file really. will making that static help? i use alot of css to position stuff, is that not compatible with other browsers?
First rule: make sure your site passes W3C validation: validator.w3.org, for both HTML and CSS. IE6 is absolutely chock-full of bugs (as you would expect of a browser that's not been updated in over 3 years), many of which affect CSS. The main killer is the incorrect box model, for which there is a workaround. You'll find plenty of tips for cross-browser CSS development on www.alistapart.com.
I agree with Squinky. But, I did check it out with both IE and FireFox and it all looks the same.
ASKER
it looks close to the same but not exact. the problem is mostly functionality not looks. the menu won't work in netscape and has strange things on firefox. i will get the validator thing.
ASKER
the validator thing said this:
Line 6, column 46: there is no attribute "TYPE"
<LINK REL="STYLESHEET" HREF="style1.css" TYPE="text/css">
what is wrong with that tag?
Line 6, column 46: there is no attribute "TYPE"
<LINK REL="STYLESHEET" HREF="style1.css" TYPE="text/css">
what is wrong with that tag?
ASKER
is this a valid tag?
<div align="justify"></div>
<div align="justify"></div>
ASKER
i thought there check was case sensitive so i changed the case of my code. it still says stuff is wrong when it really isn't
ASKER
netscape in paticular will let you click on my menu once and then it stops working, why?
I ran the validator on it too. Case sensitivity was introduced in XHTML, though it's not really case-sensitivity - the spec is that all tags and attributes should be lower case; anything else is an error.
You should not be linking to a style sheet using a link tag, but a style tag:
<style type="text/css" src="style1.css"></style>
A link tag does not need a type attribute - the server would provide a content type header when the linked item is requested.
Most of the errors it produces are down to the fact that you're using a very old HTML 3.2 DTD. Some of the features you're relying on didn't exist in HTML 3.2. Change it to HTML 4 Transitional at the very least.
Some of the other errors are down to a slight bias in the validator for XHTML which doesn't allow & to appear directly in URLs - it needs to be entity encoded as & for example:
<a href="index.php?body=conta ctme.php&a mp;PHPSESS ID=2fbd00c 45b1000b45 b52802804b 4c">
You can set PHP to use & instead of & as a parameter separator in URLs in your php.ini file, for situations where PHP generates the URL for you (as above).
Problems with your menu system are not directly an HTML problem but a Javascript one. IE and NS have rather different views of the DOM, and many Javascripts will not work on both without modification.
You should not be linking to a style sheet using a link tag, but a style tag:
<style type="text/css" src="style1.css"></style>
A link tag does not need a type attribute - the server would provide a content type header when the linked item is requested.
Most of the errors it produces are down to the fact that you're using a very old HTML 3.2 DTD. Some of the features you're relying on didn't exist in HTML 3.2. Change it to HTML 4 Transitional at the very least.
Some of the other errors are down to a slight bias in the validator for XHTML which doesn't allow & to appear directly in URLs - it needs to be entity encoded as & for example:
<a href="index.php?body=conta
You can set PHP to use & instead of & as a parameter separator in URLs in your php.ini file, for situations where PHP generates the URL for you (as above).
Problems with your menu system are not directly an HTML problem but a Javascript one. IE and NS have rather different views of the DOM, and many Javascripts will not work on both without modification.
ASKER
what is DOM? i am using Dreamweaver 2004, why would it use html 3.2 instead of 4.0?
ASKER
i have a weird issue. when i open a page in a browser and choose view source and then save it as html. I open the file and it doesn't open right. like half the code is missing? i can see the code in the file, but when i try to open the file ti doesn't load it all.
ASKER
it only happens when i view the html using dreamweavers preview button F12 which launches the browser.
ASKER
i change the entire method of my menu. it uses totally different java. i put all my css directly into the page using an include file with the css in it right between the Style tags. still doesn't work in netscape
You can change the DTD in DW by selecting the one you want in Modify -> Document DTD.
DOM is the Document Object Model, which describes how Javascript talks to objects within a web page. the DOM is a W3C standard, but (no surprise here), Microsoft have a slightly different interpretation of it from the standard.
If your page includes any PHP, loading through DW's preview will probably not work at all - PHP scripts will not be run when accessed using a file: protocol in the URL. You need to view it by uploading to a web server, then loading that page. DW's test server setup can be very useful for this. For example, CSS includes done via PHP won't work.
Aside from that, I suggest that you track down a menu script that does work in multiple browsers.
DOM is the Document Object Model, which describes how Javascript talks to objects within a web page. the DOM is a W3C standard, but (no surprise here), Microsoft have a slightly different interpretation of it from the standard.
If your page includes any PHP, loading through DW's preview will probably not work at all - PHP scripts will not be run when accessed using a file: protocol in the URL. You need to view it by uploading to a web server, then loading that page. DW's test server setup can be very useful for this. For example, CSS includes done via PHP won't work.
Aside from that, I suggest that you track down a menu script that does work in multiple browsers.
ASKER
i know about server side scripting. I have a test server setup. if i change the 3.2 to a 4 in my code will that change the way browsers read the code?
Re: if i change the 3.2 to a 4 in my code will that change the way browsers read the code?
Answer: Probably not. If you change your DTD then you must change all your code to reflect that DTD
Browser developers mostly design browsers to read Markup Language they way they think it should be read. That's why you are running into all these inconsistencies.
However, Mozilla based browsers ie. Mozilla itself and Firefox follow the W3C standards more closley. So...what i do is design a site using XHTML/CSS and I use Firefox as I go along. After I get so far along with the site I check it in other browsers to see how different it's looking. And usually all I need is a few more CSS tweaks and it's all starting to look the same.
My suggestion to you would be to follow the tutorials provided at http://www.w3schools.com/
Either use HTML 4.01 strict DTD and CSS
or
XHTML and CSS
Answer: Probably not. If you change your DTD then you must change all your code to reflect that DTD
Browser developers mostly design browsers to read Markup Language they way they think it should be read. That's why you are running into all these inconsistencies.
However, Mozilla based browsers ie. Mozilla itself and Firefox follow the W3C standards more closley. So...what i do is design a site using XHTML/CSS and I use Firefox as I go along. After I get so far along with the site I check it in other browsers to see how different it's looking. And usually all I need is a few more CSS tweaks and it's all starting to look the same.
My suggestion to you would be to follow the tutorials provided at http://www.w3schools.com/
Either use HTML 4.01 strict DTD and CSS
or
XHTML and CSS
ASKER
i will redesign my site from the ground up. but i don't know if i will ever get it to work.
DW will also change markup to match DTDs, and it doesn't do too bad a job. This applies particularly to XHTML. For use in all modern browsers, I use XHTML 1.0 strict. To specify a DTD, you must use exactly the correct syntax, and just changing the number will not work - but just get DW to generate it for you - it's only 1 menu click away.
ASKER
what menu click would that be?
ASKER
ok i took the source code of one of my pages and ran lots of checks on it. I ran the DW validator, The DW Browser check, the W3 CSS check, and the W3 HTML check. It passes all of these tests.
here is the static HMTL page
http://www.paulscomputerservice.net/test.html
this page passes all of the tests, but won't work in Netscape! Why?
here is the static HMTL page
http://www.paulscomputerservice.net/test.html
this page passes all of the tests, but won't work in Netscape! Why?
ASKER
i just spend more time ajusting the CSS. It still won't work. I put this page together a piece at a time. the menu on the left worked until i move the css into this file. I think it as something to do with my position use of CSS, but i don't know here.
ASKER
firefox won't read it either
Well, actually, just to clarify, it shouldn't be <style src="something.css">
You should use the <link> tag but instead of type, you'd have rel="stylesheet"
The other way would be to use
<style type="text/css">
@import url("mydocument.css")
</style>
You should use the <link> tag but instead of type, you'd have rel="stylesheet"
The other way would be to use
<style type="text/css">
@import url("mydocument.css")
</style>
Also, for your <a> and <img> tags with the onmouseout, and onmouseover, I recommend moving the onmouseout and onmouseover into the <img> tag itself. Then, you can change image0.src for example into this.src
ASKER
will moving the mouseover and mouseout to the img tag make it work better or more standard?
Not particularly, but it makes coding a whole heck of a lot easier =)
ASKER
why does it make coding easier?
i am using div tags and css to position the website. i was using tables before, but somebody told me that was old school. Should i switch back to tables since it will probably be more compatible?
i am using div tags and css to position the website. i was using tables before, but somebody told me that was old school. Should i switch back to tables since it will probably be more compatible?
No. Tables are technically more compatible but even NS4 supports CSS to some extent. Unless you're getting flooded with IE3 users, CSS is the way to go. I'm only making a small point in that putting the onmouseover and onmouseout inside the image tag would be easier if you were to move the image, since it wouldn't depend on an outer <div>. Doesn't really matter much, just a small point.
ASKER
oh i see. that is neat. So nobody can really tell me why my site won't work? the first page works fine, but when the menu gets used once it stops working.
ASKER
another guy said that tables might be better
http://oldlook.experts-exchange.com/questions/21136870/CSS-only-works-in-IE-and-not-Navigator.html
http://oldlook.experts-exchange.com/questions/21136870/CSS-only-works-in-IE-and-not-Navigator.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks for the help. I avoided CSS for the layout and used it for style and effect rather than entire page positioning. CSS is just used differently in each browser like you said.