Help required - browser compatibility problems

Hi folks,

I'm working on a site using css-p for all the layout and rollovers etc.

I've hit a bit of a brick wall with a couple of elements though and thought
someone here could help me out.

Test page is available at http://www.aoov50.dsl.pipex.com/flowers/test.htm

I've included all the css as inline rather than linked so the source code
should be pretty easy to view.

The navigation buttons (top right) look fine in the windows versions of
Netscape (7.1) and Mozilla Firefox but a complete dogs dinner in IE6.

Also, I've had to put a pixel width on one item, #header width: 298px;
which leaves a 2 pixel gap on the right hand side in NS/MF but looks dandy
in IE6. It _should_ be 300px to make it fit but setting this value throws
everything completely awry in IE6.

For best results should I use seperate stylesheets and browser detect
scripts? I was rather hoping to do away with scripting altogether so I'd
prefer not to have to go down this path but if needs must..

Many thanks in advance for your assistance,

Mik Foggin

--
'Reality,' sa molesworth 2, 'is so unspeakably sordid it make me shudder.'

Mik Foggin <mikf (AT) dsl (DOT) pipex.com> wrote

Hi folks,

I'm working on a site using css-p for all the layout and rollovers etc.

I've hit a bit of a brick wall with a couple of elements though and thought
someone here could help me out.

Test page is available at http://www.aoov50.dsl.pipex.com/flowers/test.htm

I've included all the css as inline rather than linked so the source code
should be pretty easy to view.

The navigation buttons (top right) look fine in the windows versions of
Netscape (7.1) and Mozilla Firefox but a complete dogs dinner in IE6.

Also, I've had to put a pixel width on one item, #header width: 298px;
which leaves a 2 pixel gap on the right hand side in NS/MF but looks dandy
in IE6. It _should_ be 300px to make it fit but setting this value throws
everything completely awry in IE6.

For best results should I use seperate stylesheets and browser detect
scripts? I was rather hoping to do away with scripting altogether so I'd
prefer not to have to go down this path but if needs must..

Many thanks in advance for your assistance,

Mik Foggin

I've been doing some more digging around and ended up screen dumping
various browser screens into Photoshop and comparing pixel sizes.

It appears to me that I'm falling foul of the 'Box Model' problem
which is confusing me as I'm using IE6 and I thought that this
correctly implemented the width/border/padding issue?

eg, the 'title' div tag has a width of 770px with a 1px solid border
and no padding.

If I screen sump from Firefox and NN7.1 the rendered title block has a
width of 772px (1px + 0px + 770px + 0px +1px) wheras IE6 is deplaying
the title block as 770px wide (1px + 0px +668px +0px +1px)

This is the further thrown by some other div elements with borders
within the title.

Have I completely misunderstood the box model issue and do I resolve
this using the Tantek hack or something similar?

Any response to this would be most appreciated.

Thanks,

Mik Foggin

mfoggin (AT) my-deja (DOT) com (Michael Foggin) wrote:

Mik Foggin <mikf (AT) dsl (DOT) pipex.com> wrote


Test page is available at http://www.aoov50.dsl.pipex.com/flowers/test.htm

It appears to me that I'm falling foul of the 'Box Model' problem
which is confusing me as I'm using IE6 and I thought that this
correctly implemented the width/border/padding issue?

IE6 has two rendering modes. In quirks mode it uses the old, broken
box model. In standards mode it uses the correct box model. Which mode
is used is determined by the doctype used in the document. Your
doctype triggers standards mode. But... IE only looks for a doctype on
the first non-empty line of the document, so you xml declaration
throws it into quirks mode instead. Getting rid of the xml declaration
is the easiest solution.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Steve Pugh <steve (AT) pugh (DOT) net> wrote

IE6 has two rendering modes. In quirks mode it uses the old, broken
box model. In standards mode it uses the correct box model. Which mode
is used is determined by the doctype used in the document. Your
doctype triggers standards mode. But... IE only looks for a doctype on
the first non-empty line of the document, so you xml declaration
throws it into quirks mode instead. Getting rid of the xml declaration
is the easiest solution.

Steve

Steve,

many thanks! all becomes clear(ish).

I'll still need to tweak the css to make it work with IE5.x but at
least I can stop pulling my hair out over IE6.

Cheers,

Mik Foggin