Link to home
Start Free TrialLog in
Avatar of Paul S
Paul SFlag for United States of America

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?
Avatar of Marcus Bointon
Marcus Bointon
Flag of France image

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.
Avatar of Nezzo
Nezzo

I agree with Squinky. But, I did check it out with both IE and FireFox and it all looks the same.
Avatar of Paul S

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.
Avatar of Paul S

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?
Avatar of Paul S

ASKER

is this a valid tag?

<div align="justify"></div>
Avatar of Paul S

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
Avatar of Paul S

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 &amp; for example:

<a href="index.php?body=contactme.php&amp;PHPSESSID=2fbd00c45b1000b45b52802804b4c">

You can set PHP to use &amp; 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.
Avatar of Paul S

ASKER

what is DOM? i am using Dreamweaver 2004, why would it use html 3.2 instead of 4.0?
Avatar of Paul S

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.
Avatar of Paul S

ASKER

it only happens when i view the html using dreamweavers preview button F12 which launches the browser.
Avatar of Paul S

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.
Avatar of Paul S

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
Avatar of Paul S

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.
Avatar of Paul S

ASKER

what menu click would that be?
Avatar of Paul S

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?
Avatar of Paul S

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.
Avatar of Paul S

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>
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
Avatar of Paul S

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 =)
Avatar of Paul S

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?
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.
Avatar of Paul S

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 CERTIFIED SOLUTION
Avatar of Zyloch
Zyloch
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Paul S

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.