CSS Question: layout fine in IE & Opera, broken in FF

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

CSS Question: layout fine in IE & Opera, broken in FF

Post by patrikG »

Here's a strange one: for once, IE displays this right, but FF has a problem, Opera is fine, Safari (on Windows XP SP2) has the same prob FF has:

The table in the div is breaking out of the layout and I have no clue why:

http://dev.carfreewalks.org/walks/30/fa ... _ambleside

I've removed the table in question (most of it), but it had no effect. The table itself doesn't have a style assigned to it.

The only CSS I that really applies is:

Code: Select all

.content, #content {
	background: url(../graphics/background_content_bottom.jpg) #FFFFFF repeat-x bottom;
	border-left: 2px solid #F0F0F0;
	border-right: 2px solid #F0F0F0;
	line-height: 1.5em;
	margin: 0 160px 5px 160px;
	padding: 0px 10px 10px 10px;
	text-align: justify;
}
and the margin shouldn't really be the culprit as that only applies to the parent-div.

It all looks fine in http://dev.carfreewalks.org/ (but there's no table involved).

Anyone have an idea? Would be most appreciated.

Thanks

patrikG
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Add

Code: Select all

#content table {
float:left;
width:97%;
 }
to your CSS. Then it works in FF (haven't checked IE though)
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

I see that you have both a class and an id called "content". I'm not sure, but I think maybe this isn't allowed in the strict standard. It might be that IE and Opera are lax in enforcing it, while FF is strict. It would be easy to check, just change the one id to a different word.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

it was indeed a simple float:left that floated the layout, thank you matthijs!

I've played around with the layout a bit more and made the menu a bit more interesting:

http://dev.carfreewalks.org/

All nice & dandy, apart from the big gap between the header and the left and right column. I've been trying various things for hours, float, checked for margins, but I simply can't find the cause for it. Note that in FF the middle-column is as it should be, whereas IE goes for the whole gap. Opera displays it just as it should be.
Could be some weird block-element, but for the life of me, I'm stumped.

Thanks!
Post Reply