4 replies [Last post]
Anders
Offline
newbie
Last seen: 16 years 3 weeks ago
Joined: 2003-11-20
Posts: 3
Points: 0

Hi,
I'm having some troubles with cross-browser compatibility. I hope some one of you can help me with this.

The site I'm working on looks ok in IE but looks like crap in Netscape and Mozilla. It doesn’t look like I want it to in Opera either, but it’s not as alarmingly bad as in Netscape. Any suggestions on what to do? You can have a look at the work in progress at:
http://ankan.1go.dk/index.html

The CSS-file for the site is attached to this posting.

I get both the HTML and the CSS-file validated correctly in the w3c CSS-validator.

/Anders

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Trouble with NN/Mozilla and Opera

Your Doc Type )<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">) is old, so whatever browser you are using will go into Quirky mode.

Even IE6 will be displaying your site as if it was ie4-5.

Start again with a correct Doc Type

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and also add

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Now you may find that IE6 will not display as well as it did, so go and fix all the problems. What should find is you will then get better results overall in the different browsers

Regards
Day

The only way to learn is to do it yourself

Anders
Offline
newbie
Last seen: 16 years 3 weeks ago
Joined: 2003-11-20
Posts: 3
Points: 0

Trouble with NN/Mozilla and Opera

Hi,
Thanks for the tip Daybreak_0. I rewrote some of the code for the site and it now validates as correct XHTML. The page looks a lot better in Mozilla now, but there are still some issues.

    Why is the page aligned to the left in Mozilla while it's centered in IE? (I want it to be centered.)

    Why won't it work when I try to set the height of a div in %? When I use pixels is works.

    Why is the copyright field at the bottom of the page transparent in Moz. while it has the color i specified in IE?

    The width seems to be rendered differently in different browsers. In my IE (ver. 6.0.2) and Moz 1.5 the padding adds to the width i specify, while in the IE version I tried it in at school it doesn't. Why is this?

Lots of questions there. Hope some one of you can help me answer them.

The site, as it is now, is still found at:

http://ankan.1go.dk/

The CSS-doc is attached.

/Anders
[/]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Trouble with NN/Mozilla and Opera

Hi Anders,
IE is incorrectly centering the page from the text-align:center in body.
To get everything else to center wrap everything in a containing div set it's width and margin-left:auto; margin-right:auto;
You need to leave text-align:center in for IE.
To get 100% height to work you need to specify a height for the containing element.
html, body{height:100%;}Try setting a height for your footer and a width for each of the floats it contains. If that isn't working use a clearing element after the last float.

Older versions of IE and newer versions without a standards doctype calculate the widths incorrectly. There are articles in the Useful CSS links that will help to explain it better.

Hope that helps

Anders
Offline
newbie
Last seen: 16 years 3 weeks ago
Joined: 2003-11-20
Posts: 3
Points: 0

Trouble with NN/Mozilla and Opera

Hi,
Thanks for your tips, Tony. The site works much better now. Laughing out loud I haven't had the opportunity to test it in older browsers jet, so I'll just have to deal with that part later on.

/Anders