Why does this display differently in IE and Firefox

[Christopher Richards]

Please take a look at the bottom of the page
http://slowdownnow.org/stories.html.

I've been playing about with this for some time. It displays fine in IE6 but
is not centered in Firefox.
div#bottom{
border-top: 1px solid #ccc;
width:799px;
height:25px;
padding-top:5px;
background-color:#ffffff;
text-align:center;
margin:auto auto auto auto;
}

And while I am here, why do I have to specify div heights in pixels for
Mozilla to show the background, but in IE percentages are fine?
Thanks. Christopher

 

[neredbojias]

Without quill or qualm, Christopher Richards quothed:

Please take a look at the bottom of the page
http://slowdownnow.org/stories.html.

I've been playing about with this for some time. It displays fine in IE6 but
is not centered in Firefox.
div#bottom{
border-top: 1px solid #ccc;
width:799px;
height:25px;
padding-top:5px;
background-color:#ffffff;
text-align:center;
margin:auto auto auto auto;
}

You might try width: 100%;

And while I am here, why do I have to specify div heights in pixels for
Mozilla to show the background, but in IE percentages are fine?
Thanks. Christopher

IE is just a better browser.

 

[Steve Pugh]

Please take a look at the bottom of the page
http://slowdownnow.org/stories.html.

I've been playing about with this for some time. It displays fine in IE6 but
is not centered in Firefox.
div#bottom{
border-top: 1px solid #ccc;
width:799px;
height:25px;
padding-top:5px;
background-color:#ffffff;
text-align:center;
margin:auto auto auto auto;
}

It's appearing next to the last floated element.

Add clear: both; to the styles.

And while I am here, why do I have to specify div heights in pixels for
Mozilla to show the background, but in IE percentages are fine?

Depends on the circumstances. Percentage heights don't always work the
way people think they should.Add to that the fact that IE often gets
things wrong. Can you be mores specific about where this is happening?

Steve

 

[Thomas Mlynarczyk]

Also sprach Steve Pugh:

Depends on the circumstances. Percentage heights don't always work the
way people think they should.Add to that the fact that IE often gets
things wrong. Can you be mores specific about where this is happening?

Why specifying a height for div#container? Just drop it. And when you add a
clear:both to the bottom div as suggested, the page will look the same in
IE5, Mozilla and Firefox. And while you're at it: Change the doctype to HTML
Strict, as it validates as that (surprisingly...). You currently have an
XHTML doctype specified.

 

[SpaceGirl]

Without quill or qualm, Christopher Richards quothed:

IE is just a better browser.

mehhehehehhehehheh

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Duende]

While sitting in a puddle neredbojias scribbled in the mud:

IE is just a better browser.

Just what kind of health problem did you have that kept you out of here for
so long?

 

[Christopher Richards]

It's appearing next to the last floated element.

Add clear: both; to the styles.

Can you be mores specific about where this is happening?
www.slowdownow.org/stories.html
Thanks Steve your comment was very helpful.
The clear both centered it. However, now there is a gap at the top of the
bottom div and the bottom of the content div in FireFox. (IE OK) I can close
that gap up by adjusting the height in pixels. BUT if the use enlarges the
text size the background falls short of the text. I may not have time to
work on it today (Sunday), But I'll try to fix it and say how here for
anyone else that may have the same problem.
The height of the content div works fine at 100% in IE but I must specify in
FF.
div#content{
position:relative;
width: 798px;
height:2823px; /*percentage causes problems in Firefox*/
text-align:center;
padding-bottom:5px;
left:0px;

}
div#left_float{
position:relative;
width:500px;
text-align:left;
left:40px;
top:0px;

float:left;
}
div#right_float{
padding-top:30px;
float:right;
width:200px;
height:100%;
padding-left: 15px;
padding-right: 15px;
text-align:left;
}

div#bottom{
border-top: 1px solid #ccc;
width: 799px;
height: 25px;
padding-top: 5px;
background-color: #ffffff;
text-align: center;
margin: auto auto auto auto;
clear: both; /*centers bottom div for Firefox*/
}

 

[Christopher Richards]

Also sprach Steve Pugh:


Why specifying a height for div#container? Just drop it. And when you add
a
clear:both to the bottom div as suggested, the page will look the same in
IE5, Mozilla and Firefox. And while you're at it: Change the doctype to
HTML
Strict, as it validates as that (surprisingly...). You currently have an
XHTML doctype specified.

Thomas,
That's it! Thanks so much. I were going to have a child I would name it
after you. You don't know how much I have been struggling with this. If it
would work in IE5 on the Mac ( I don't have one) and almost all my dreams
would come true.

 

[Christopher Richards]

Please see my reply to Thomas Mlynarczyk. Fixed!

The trouble with these forums is that you can't edit your own post. Darn. I
was looking at IE and thinking it was FF. Working on this with a bad cold.
Wonder why that gap is there in FF? www.slowdownnow.org/stories.html.com

 

[Christopher Richards]

The trouble with these forums is that you can't edit your own post. Darn.

I was looking at IE and thinking it was FF. Working on this with a bad
cold. Wonder why that gap is there in FF?
www.slowdownnow.org/stories.html.com

Here is the fix:
margin-top:0px;/*fix for spacing in Firefox*/
clear: both; /*centers bottom div for Firefox*/

But it doesn't answer why the margin-top needs to be manually set to zero.
Without it in FF there is a transparent gap; the tipoff that it was a margin
problem.

 

[Thomas Mlynarczyk]

Also sprach Christopher Richards:

Here is the fix:
margin-top:0px;/*fix for spacing in Firefox*/
clear: both; /*centers bottom div for Firefox*/

But it doesn't answer why the margin-top needs to be manually set to
zero. Without it in FF there is a transparent gap; the tipoff that it
was a margin problem.

I fixed this by removinh the height specification from the container div.

 

[Thomas Mlynarczyk]

Also sprach Christopher Richards:

Thomas,
That's it! Thanks so much. I were going to have a child I would name
it after you.

There already are quite a number of children named Thomas

You don't know how much I have been struggling with
this. If it would work in IE5 on the Mac ( I don't have one) and
almost all my dreams would come true.

As far as I've heard Microsoft has ceased support for IE/Mac - so can we
both hope that this browser will soon be extinct?

 

[neredbojias]

Without quill or qualm, Duende quothed:

While sitting in a puddle neredbojias scribbled in the mud:


Just what kind of health problem did you have that kept you out of here for
so long?

DRCS. (Digital-Rectal Compulsive Syndrome.)