Problems with CSS in different browsers

Markus Slaby · Apr 16, 2004

Hello to everyone!

It would be very nice if somebody is able to help me here!

I've made my one website - you can find it here:
http://mynick81.funpic.de/index.html

The IE 6 and Opera 7.1 shows everything in the way I want. But Netscape 7.1
and Mozilla 1.5 don't do that.

I want to create the whole layout with CSS.

I hope somebody can help me find the problem why Netscape and Mozilla don't
show the site in the way I want.

Thanks

Markus

Steve Pugh · Apr 16, 2004

Markus Slaby said:
I've made my one website - you can find it here:
http://mynick81.funpic.de/index.html

The IE 6 and Opera 7.1 shows everything in the way I want. But Netscape 7.1
and Mozilla 1.5 don't do that.

I want to create the whole layout with CSS.

I hope somebody can help me find the problem why Netscape and Mozilla don't
show the site in the way I want.

Your doctype is triggering quirks mode. In this mode IE 6 copies the
errors of IE5, Opera 7 copies the errors of IE6, and Mozilla copies
some errors of older browsers but far fewer than IE or Opera do.

The main error is that IE5 (and hence IE6 and Op7 in Quirks mode)
including padding inside the width whilst the specs and Mozilla (and
IE6 and Op7 if you trigger Standards mode instead) add padding on top
of width.

There are several places in your code where this catches you out, to
give one example:

..column {
padding-right:15px;
}

and then the two columns have width: 70% and width: 30%.

70% + 15px + 30% + 15px is more than 100% so there isn't room to fit
the columns in side by side so the second one drops down below the
first.

Steve

David Dorward · Apr 16, 2004

Markus said:
I've made my one website - you can find it here:
http://mynick81.funpic.de/index.html

You have a DOCTYPE that triggers Quirks mode. This causes some browsers to
get things wrong on purpose.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

Switch to one that induces standards mode.

The IE 6 and Opera 7.1 shows everything in the way I want. But Netscape
7.1 and Mozilla 1.5 don't do that.

I want to create the whole layout with CSS.

I hope somebody can help me find the problem why Netscape and Mozilla
don't show the site in the way I want.

You have syntax errors in your HTML:
http://validator.w3.org/check?verbose=1&uri=http://mynick81.funpic.de/index.html

You use the pt unit on screen, this is a very bad idea:
http://css-discuss.incutio.com/?page=UsingPoints

Markus Slaby · Apr 16, 2004

Hi Steve, hi David,

thanks for your help!

I've changed now the problem with the diffrent modes - but I have still the
problem, that the div-element body don't grow with the content of the
div-element "content".

I have this problem only with Modzilla. The text flows over the
div-element - but the element don't increase with the text.

Has anybody an idea what's the problem is caused by?

Thanks

Markus

Toby A Inkster · Apr 16, 2004

Markus said:
I've changed now the problem with the diffrent modes - but I have still the
problem, that the div-element body don't grow with the content of the
div-element "content".

Your doctype is still wrong.

Currently:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Docking electron desktop app above browsers and other applications.	7	Mar 11, 2022
HTML5 in Firefox and other browsers	1	Aug 24, 2012
Position absolute different in different browsers	9	May 9, 2010
Struct Member Variable Problems	1	Jun 21, 2023
Not just different browsers that sites need testing in?	11	Jul 31, 2012
divs are different in different browsers	7	Jan 21, 2010
Can't solve problems! please Help	0	Sep 26, 2022

Problems with CSS in different browsers

Markus Slaby

Steve Pugh

David Dorward

Markus Slaby

Toby A Inkster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads