Wed, 2003-12-03 20:37
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
Thu, 2003-12-04 00:02
#1
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
Thu, 2003-12-04 17:20
#2
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:
The CSS-doc is attached.
/Anders
[/]
Fri, 2003-12-05 03:00
#3
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
Mon, 2003-12-08 15:22
#4
Trouble with NN/Mozilla and Opera
Hi,
Thanks for your tips, Tony. The site works much better now. 
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