IE and Opera vs. Firebird

A

Andrew Cameron

Hi everyone,

I've got a serious problem with a page layout I've made. It works
beautifully in IE and Opera, but doesn't work in Firebird. I've tried
everything I can think of (even giving the background, #shell, a height
attribute which was a total hack and looks wrong) to get the background DIV
to stretch to accomodate the nested DIVs. I asked a friend whose job it is
to design sites and she had no idea either.

If you think you can help, please visit < http://x01.co.uk/pleasehelp/ > for
a description of the problem, screenshots and code. Thanks in advance for
any help.
 
A

Andrew Cameron

Just thought I'd mention that my reply-to address is false because of spam.
For this post, if you want to reply by email, you can contact me at tags
(at) x01 (dot) co (dot) uk.
 
E

Ernest Cline

Andrew Cameron said:
Hi everyone,

I've got a serious problem with a page layout I've made. It works
beautifully in IE and Opera, but doesn't work in Firebird. I've tried
everything I can think of (even giving the background, #shell, a height
attribute which was a total hack and looks wrong) to get the background DIV
to stretch to accomodate the nested DIVs. I asked a friend whose job it is
to design sites and she had no idea either.

If you think you can help, please visit < http://x01.co.uk/pleasehelp/ > for
a description of the problem, screenshots and code. Thanks in advance for
any help.
Click to expand...

A quick look at your code leads me to believe that the problem is probably
your DOCTYPE which is an invalid attempt to hybridize the XHTML1.0
Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it probably is
putting IE 6 into its quirks mode where it emulates the CSS box-model bugs
that are in IE 5 for Windows. Opera intentionally emulates IE 6's behaviour
in this regard which explains why it looks the same.

You should correct the DOCTYPE problem anyway and if you use one of the ones
that puts IE 6 into Standards mode instead of Quirks mode, it should help
you to get your pages to look more like each other in IE 6 and other
browsers. If having it also look the same in IE 5 for Windows is important
for you, you will need to employ the voice-family hack (which makes use of
another of IE 5's CSS bugs) to give that browser different values that
account for IE 5's CSS box-model bugs
 
A

Andrew Cameron

Ernest Cline said:
A quick look at your code leads me to believe that the problem is probably
your DOCTYPE which is an invalid attempt to hybridize the XHTML1.0
Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it probably is
putting IE 6 into its quirks mode where it emulates the CSS box-model bugs
that are in IE 5 for Windows. Opera intentionally emulates IE 6's behaviour
in this regard which explains why it looks the same.
Click to expand...

Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown in <
http://www.w3.org/TR/xhtml1/ >. However, this makes no difference to the
page layout in either browser. I'm not even sure which browser is "wrong",
to be honest. I hope it's Firebird...
 
A

Andrew Cameron

Adrienne said:
You need to go with a Strict doctype, transitional goes into quirks mode.
Click to expand...

Ah, I will do that in future. For the time being, putting a strict doctype
in doesn't change anything in Firebird - check it out at the original URL.

Really confused now. :eek:)
 
B

Beauregard T. Shagnasty

Andrew Cameron pounced upon this pigeonhole and pronounced:
Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown in <
http://www.w3.org/TR/xhtml1/ >. However, this makes no difference to the
page layout in either browser.
Click to expand...

There is something flaky with your doctype. The validator thinks it is
Strict... ? http://validator.w3.org/ (I selected a charset for you.)

<URL:http://validator.w3.org/check?uri=http://x01.co.uk%
2Fpleasehelp%2F&doctype=%28detect+automatically%29&charset=iso-8859-1+%
28Western+Europe%29&ss=1>

(Personally, I'd recommend Strict for new work.)
http://www.w3.org/QA/2002/04/valid-dtd-list.html
I'm not even sure which browser is "wrong",
to be honest. I hope it's Firebird...
Click to expand...

Heh, I'd bet Firebird is right <g>.

Oh, please change your divs.css font size to 100% instead of using px. I'd
rather see my default size than what you think I should. For your
p.bigger, use font-size: 110% and for p.small, use font-size: 90%. Thanks.

You can also remove redundant things like font-family from all but body.
 
E

Ernest Cline

Andrew Cameron said:
Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown in <
http://www.w3.org/TR/xhtml1/ >. However, this makes no difference to the
page layout in either browser. I'm not even sure which browser is "wrong",
to be honest. I hope it's Firebird...
Click to expand...

Well, I did find one other coding mistake, but I don't think it's the cause
of your problem either.

In your CSS file,

#shell #menu {
clear: top;
}

top is not a valid value of the clear property. For what you have in your
sample, the default value of none should work fine and a look at the DOM
inspector in Mozilla shows that is what is being generated for theis
element. I think you may have found a bug in Mozilla.

A potential fix, altho I make no guarentees would be the following:

<body>
<div id="shell">
<div id="banner"></div>
<div id="menu"></div>
<div id="content"></div>
</div>
</body>

Then use:

#shell, #banner {
margin-left: auto;
margin-right: auto;
}

Instead of the <center> element to center things. It may be that Mozilla's
bug is a result of the use of <center>, in which case this may avoid your
problem. At the very least, this will get you one step close to a Strict as
opposed to a Transitional DOCTYPE, which based on your earlier DOCTYPE I am
assuming is of interest to you.
 
A

Andrew Cameron

Ernest Cline said:
Well, I did find one other coding mistake, but I don't think it's the cause
of your problem either.

In your CSS file,

#shell #menu {
clear: top;
}
Click to expand...

That was me getting frantic and trying loads of silly things and forgetting
to take them out :eek:)
top is not a valid value of the clear property. For what you have in your
sample, the default value of none should work fine and a look at the DOM
inspector in Mozilla shows that is what is being generated for theis
element. I think you may have found a bug in Mozilla.
Click to expand...

Oh dear. Turns out I may have to just define a height for #shell, or
possibly use tables. Not sure which because I don't like the idea of
either.
A potential fix, altho I make no guarentees would be the following:
Click to expand...
Instead of the <center> element to center things. It may be that Mozilla's
bug is a result of the use of <center>, in which case this may avoid your
problem.
Click to expand...

Well, w3c's validator complains less, but Firebird now aligns the whole site
to the left and does the same as before. I may have to "hack" this one...
 
A

Andrew Cameron

Ernest Cline said:
I think you may have found a bug in Mozilla.
Click to expand...

A thought about this... if it's a bug, then it's a bug in XHTML, because a
friend of mine got the same thing happening on IE for Mac. Should I be able
to do what I want to do? It's not, complex, right? Somebody must have done
it before me or at least tried and failed.
 
A

Anne Marie Denley

Andrew Cameron said:
Hi everyone,

I've got a serious problem with a page layout I've made. It works
beautifully in IE and Opera, but doesn't work in Firebird. I've tried
everything I can think of (even giving the background, #shell, a height
attribute which was a total hack and looks wrong) to get the background DIV
to stretch to accomodate the nested DIVs. I asked a friend whose job it is
to design sites and she had no idea either.

If you think you can help, please visit < http://x01.co.uk/pleasehelp/ > for
a description of the problem, screenshots and code. Thanks in advance for
any help.
Click to expand...
Hi,
I think it is because you are floating both the menu and content divs are
floating
and thus not taking up any space in the shell div. In order to make a
container
div actually contain floated items there must be non-floated items at the
start and
end of the container div. You have the banner at the start and so you need
something
at the end. If you don't want to add any content then you can use a spacer
div.

<div class="spacer">&nbsp;</div>

div.spacer { clear:both; }

hope this helps,
AM
 
A

Andrew Cameron

Anne Marie Denley said:
Hi,
I think it is because you are floating both the menu and content divs are
floating
and thus not taking up any space in the shell div. In order to make a
container
div actually contain floated items there must be non-floated items at the
start and
end of the container div. You have the banner at the start and so you need
something
at the end. If you don't want to add any content then you can use a spacer
div.
Click to expand...

Of course! There's nothing holding them down! How simple, and yet how easy
to forget when just building what needs to be seen, not what needs to be
there.

Thank you so so so much, Anne. I had people (myself included) tearing their
hair out over this one and it was so simple. Thank you again, you have made
my day.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

floating problem, when opening favorites in ie or left-bar in opera 0
iframe in ie & ff & Chrome & Opera 5
div question IE/Opera vs. FireFox/Safari who's right? 2
Any Idea for IE and Opera - Its working with Firefox ... 27
Opera mirror margins bug 7
Browser testing, FF, IE, Opera...Nestcape? 2
Problem in Opera but not in IE and FF 3
Comparisons of IE, Opera and Firefox on DOM (Javascript/CSS) support(Opera wins) 24

Members online

No members online now.
Total: 41 (members: 0, guests: 41)
Robots: 190

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,043
Latest member
CannalabsCBDReview

Latest Threads

Top