views:

54

answers:

1

So the problem is: I have three column layout page. On the right side there is a commercial that I want to be able to turn off on a certain pages so the content expans and the page has two columns instead of three.

I found a solution using display: table-cell. That works in the biggest browsers but a strange problem occurs only in firefox. When I go to my page the commercial drops down below the content and the content expands. Then when I hit refresh the commercial pops up and everything seems fine.

Can you please help?

Here is the css:

#wrapper{width: 960px; margin: 0 auto;}

#left{float: left; width: 220px; margin: 6px 0 0 5px;}

#content_wrapper{float: left; width: 724px; margin: 6px 0 0 5px;}
    #content{min-height: 400px; min-width: 522px; max-width: 724px; border: solid 1px #ccc; padding: 12px; vertical-align:top; display: table-cell; }
    #right{width: 168px; padding: 0 6px 0 5px; display: table-cell;}
+1  A: 

Internet Explorer does not support table-cell attibute, so if you use Internet explorer and, trying to check at Firefox, they will be difference. Probably firefox is actually working and but IE is not.

No versions of Internet Explorer (including IE8) support the property values "inherit", "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

S.Mark
Hey thanks for the fast reply!When I put in `display: table-cell` it fixes the layout for IE. I found out that IE does´t support the property but the thing is that IE is putting something in there instead of the table-cell property that fixes the layout. Maybe if I found out what that property is I could put in in my code. But I really have been trying.
JBB
IE doesn't support but putting something there mean, even you try to put `display: unknown-cell` it will act same thing? I think you should try to fix in different way though.
S.Mark
Ok. So inserting `display: unknown-cell` did the same thing for both browsers. The layout looks fine in IE but the commercial div is jumping up and down in firefox. So obviously I will have to find some other solution...if you want to know the site is http://klifur.is
JBB
What is the element that you are trying to style? Elements get styled their default values when you feed them rubbish. For example, a `<div>` is a block element so if you do `div {display:utter-rubbish}` then the div will default to `display:block`. We need to know what the element is in order to know what the value is.
slebetman
I am styling div tags.
JBB
Problem solved! Got rid of the `display: table-cell` and put in `display: inline-block` instead. I also had to make some small changes to the template index file.
JBB