Search Engine Optimization > Web Development > browser conflicts
browser conflicts
Posted by Del on February 9th, 2006

Currently digging for possible browser conflicts, heres a good one;
http://www.epmdesigns.net/browser_wars/divs.htm

Open it with IE first as that actualy does what it's told, then firefox and
see the botch up.

del


Posted by David Dorward on February 9th, 2006

Del wrote:

99 times out of 100, when IE and Firefox disagree (and did you test in
Opera? Safari? Konqueror?), it is IE that is wrong.

You have set background-attachment: fixed. This fixes the background image
(and makes any positioning with respect) to the _viewport_. Internet
Explorer mistakenly fixes it to the element to which it is applied.

The width specifies the width of the content. The padding goes around the
content. The border goes around the padding. The margin goes around the
border.

Internet Explorer mistakenly places the padding inside the width specified
for the content.

Internet Explorer 6 _does_ actually get this one right - but only when in
Standards Mode. Your choice of Doctype (HTML 4.0 Transitional with no URL
to the DTD) has caused Microsoft to brand you as "someone who doesn't know
what they are doing" and thus emulate the bug that appeared in earlier
versions of Internet Explorer.

To fix this issue, switch to a Doctype that triggers standard mode. HTML
4.01 Strict with the Doctype is usually a good choice for this.

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

Oh, by the way. "<p>" indicates the start of a paragraph, not the end. (and
"." is a very odd paragraph).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Posted by Alan J. Flavell on February 9th, 2006

On Thu, 9 Feb 2006, Del wrote:

You can't be serious! IE has a long history of doing what it thinks
the author wants, instead of doing what they asked for. Which can seem
rather nice to those authors who don't know what they're doing, but
can be utterly maddening to those who do.

No specific comments on your test page, but, since the result with
Opera 8.5 looks very similar to what I'm seeing on Mozilla, I suppose
it's the usual story.

You don't seem aware of (or don't seem to wish to take advantage of)
Standards mode instead of quirks mode.
http://hsivonen.iki.fi/doctype/ is good, and links to other useful
resources.

Posted by Del on February 10th, 2006


"Alan J. Flavell" <flavell@physics.gla.ac.uk> wrote in message
news:Pine.LNX.4.62.0602091941100.17098@ppepc55.ph. gla.ac.uk...
By that, do you mean setting the DTD as strict rather than transitional? I
tried strict and it was the same.

I just want to be able to fix a no-repeat image to the center of a div area
and keep it fixed to that specific area when scrolling down the browser.
Firefox fixes it to the center of the body, Not the div.

My code:
<style type="text/css">
<!--
body {padding-bottom:100px;font-family:arial, sans-serif;font-weight:bold}

.back1 {width:320px;height:350px;border:2px solid black;padding:10px;
overflow:auto;
margin-left:300px;
background-color:#adf;
background-image:url(wood.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:center center; }
.back2
{width:250px;height:300px;position:relative;left:2 40px;top:-170px;padding:30px;
overflow:auto;
margin-left:300px;
background-color:#f9d;
background-image:url(water.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:center center; }
-->
</style>

How do I get Mozzila & more to achieve what IE thinks I want.

Del



Posted by Del on February 10th, 2006


"David Dorward" <dorward@yahoo.com> wrote in message
news:dsg5lv$6mj$1$8302bc10@news.demon.co.uk...
<SNIP>

They were just there to force overflow scrollbars to test the fixing.

Del



Posted by Andreas Prilop on February 10th, 2006

On Fri, 10 Feb 2006, Del wrote:

This is unrelated to your problem - but remove these pseudo-
comment markers. They are pointless!

--
All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"


Posted by Del on February 10th, 2006


"David Dorward" <dorward@yahoo.com> wrote in message
news:dsg5lv$6mj$1$8302bc10@news.demon.co.uk...
I assumed that when you specify a 300px width for the <div> you were
specifying the width of the area the content sits in as 300px.
I also thought that the whole idea was that padding was internal space,
margin was external space, div box stays 300px wide regardless.


Oh well, strict DTD does tell IE to do it like mozilla does, live with it
Del.



Posted by Stevie D on February 10th, 2006

Del wrote:

That is correct. You have 300px available for text and images. Around
the outside of that, you have padding. Round the outside of the
padding, you have the border. Round the outside of the border, you
have margins.

So the visible box will be more than 300px wide if you have non-zero
padding.

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\\'/ \'///////_____________________________________________

Posted by David Dorward on February 10th, 2006

Del wrote:

Correct.

But then you wouldn't have 300px for the content.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Funbolt.com - Entertainment portal, wallpapers, sexy celebs