Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Why does this display differently in IE and Firefox

Reply
Thread Tools

Why does this display differently in IE and Firefox

 
 
Christopher Richards
Guest
Posts: n/a
 
      11-21-2004
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


 
Reply With Quote
 
 
 
 
neredbojias
Guest
Posts: n/a
 
      11-21-2004
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.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      11-21-2004
On Sun, 21 Nov 2004 01:31:38 GMT, "Christopher Richards"
<(E-Mail Removed)> wrote:

>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

 
Reply With Quote
 
Thomas Mlynarczyk
Guest
Posts: n/a
 
      11-21-2004
Also sprach Steve Pugh:

>> 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?


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.



 
Reply With Quote
 
SpaceGirl
Guest
Posts: n/a
 
      11-21-2004
neredbojias wrote:
> 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 #
 
Reply With Quote
 
Duende
Guest
Posts: n/a
 
      11-21-2004
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?

--
Avoid reality at all costs.
www.wipkip.biz
 
Reply With Quote
 
Christopher Richards
Guest
Posts: n/a
 
      11-21-2004
> 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?

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*/
}



 
Reply With Quote
 
Christopher Richards
Guest
Posts: n/a
 
      11-21-2004
"Thomas Mlynarczyk" <(E-Mail Removed)> wrote in message
news:cnpsfd$jd$02$(E-Mail Removed)-online.com...
> Also sprach Steve Pugh:
>
>>> 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?

>
> 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.


 
Reply With Quote
 
Christopher Richards
Guest
Posts: n/a
 
      11-21-2004

"Christopher Richards" <(E-Mail Removed)> wrote in
message news:eT8od.24599$(E-Mail Removed) om...
> 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


 
Reply With Quote
 
Christopher Richards
Guest
Posts: n/a
 
      11-22-2004
> 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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
why why why why why Mr. SweatyFinger ASP .Net 4 12-21-2006 01:15 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
Why does C++ program run differently on VxWorks? Allen C++ 5 07-13-2006 09:14 AM
C++ Exception: Why does this program behave differently for pointer and array of pointer Divick C++ 7 09-12-2005 05:49 AM
CSS lists display differently in IE and Netscape Fred Camper HTML 2 08-16-2003 05:25 AM



Advertisments