Stylesheets - CSS Layout fails in Firefox ONLY

Author

CSS Layout fails in Firefox ONLY

hiazle

2006-08-18, 6:34 pm

I have a Page that has one left div with id "sidebar", floats left and
has a fixed width of 140px, then another div with id "content", a left
margin of 160px, and a fixed width of 570px.

Here is the CSS:

#news{
background-image: url(images/body-repeat-news.gif);
width: 730px;
padding: 15px;
}
#news #sidebar{
width: 140px;
}
#news #content{
margin-left: 160px;
width: 570px; /* Weird Opera Bug */
width: expression("565px"); /* Fix IE bug where object gets pushed
down */
}

The page looks fine in IE and Opera, but in firefox it loads properly
"SOMETIMES".

Here is a link to the page http://www.hiazle.com/news

Please note: all content on this page is "automatically" generated so,
it appears that Firefox loads properly if there is no delay in
generating page content. I'm not sure if that's the case.

All help will be appreciated.

Jim Moe

2006-08-18, 6:34 pm

hiazle wrote:
> I have a Page that has one left div with id "sidebar", floats left and
> has a fixed width of 140px, then another div with id "content", a left
> margin of 160px, and a fixed width of 570px.
>
I do not have an exact solution. But...
This is almost always a width problem especially since you are using a
fixed width for the content area. FF and IE handle widths differently
(although IE is usually the cramp). Increase the main content size, or set
it to 100%.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

hiazle

2006-08-18, 10:45 pm

Jim Moe wrote:
> I do not have an exact solution. But...
> This is almost always a width problem especially since you are using a
> fixed width for the content area. FF and IE handle widths differently
> (although IE is usually the cramp). Increase the main content size, or set
> it to 100%.
>
> --
> jmm (hyphen) list (at) sohnen-moe (dot) com
> (Remove .AXSPAMGN for email)

Hi Jim,

If you check the CSS comments I included, you'll notice that I had to
specify a width because Opera would force the content area to be bigger
than it's container [Very weird]. and IE also failed to handle the
width of the block and push it down, so I had to specify a width which
is 5px smaller (using "EXPRESSION")

Jim Moe

2006-08-19, 6:40 pm

hiazle wrote:
> Jim Moe wrote:
>
> If you check the CSS comments I included, you'll notice that I had to
> specify a width because Opera would force the content area to be bigger
> than it's container [Very weird]. and IE also failed to handle the
> width of the block and push it down, so I had to specify a width which
> is 5px smaller (using "EXPRESSION")
>
Setting the width(s) to 99% helps IE a lot. Or even 99.9%.
Using percentages to specify the horizontal spacing makes the design
more fluid and workable in more browsers. Do not use px or ems for
container margins and padding, use %.
Another option is to float the main content area as well. You would need
to remove the 160px left margin.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Stan R.

2006-08-21, 6:46 pm

hiazle wrote:
> I have a Page that has one left div with id "sidebar", floats left and
> has a fixed width of 140px, then another div with id "content", a left
> margin of 160px, and a fixed width of 570px.
>
> Here is the CSS:
>
> #news{
> background-image: url(images/body-repeat-news.gif);
> width: 730px;
> padding: 15px;
> }
> #news #sidebar{
> width: 140px;
> }
> #news #content{
> margin-left: 160px;
> width: 570px; /* Weird Opera Bug */
> width: expression("565px"); /* Fix IE bug where object gets pushed
> down */
> }
>
> The page looks fine in IE and Opera, but in firefox it loads properly
> "SOMETIMES".
>
> Here is a link to the page http://www.hiazle.com/news
>
> Please note: all content on this page is "automatically" generated so,
> it appears that Firefox loads properly if there is no delay in
> generating page content. I'm not sure if that's the case.
>
> All help will be appreciated.

And in Mozilla 1.8b it gets pushed all down to just after the level of
where the menu ends (but still in it's own column.)

And in Opera 8 the center column doesn't show at all! Only the orange
horizonal line shows. andAnd the bacground (as seen on the let and right
shoulders (or gutters) of the page are not aligned with the small bit of
the same background around the boarder of the main area.

NS 7.2 I get the same result as FF 1.5.0.6

NS 4, you don't wanna know :-)

--
Stan