By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Help required - browser compatibility problems

P: n/a
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.'
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Mik Foggin <mi**@dsl.pipex.com> wrote in message news:<Xn********************@195.129.110.205>...
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
Jul 20 '05 #2

P: n/a
mf*****@my-deja.com (Michael Foggin) wrote:
Mik Foggin <mi**@dsl.pipex.com> wrote in message news:<Xn********************@195.129.110.205>...

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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<6c********************************@4ax.com>. ..
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
Jul 20 '05 #4

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<6c********************************@4ax.com>. ..
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
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.