Hello, I got a problem with firefox display (usually only happen in IE6) when I'm working on a wordpress theme. The sidebar sometimes fall down and sometimes it is OK in Firefox (3 occurences in 5 times browser refresh). Here is the screenshot and below is the codes used. I already check with Opera, Safari and IE6. It appears OK. Does anybody has this kind problem previously? Thanks in advance <div id="c_wrapper"> <div id="container"> </div> <div id="sidebar"> </div> </div> Code (markup): #c_wrapper { margin-left:2px; width: 925px; display: table; /*fix for Firefox, Safari, Opera*/ background:url(images/container.jpg) repeat-y; clear:both; } #container{ float:left; width: 490px; padding-left:16px; padding-right:18px; text-align:justify; border:1px solid red; } .sidebar{ float: right; width: 358px; background: #44494d; margin: 0 0 0 0px; background:1px solid #FFF; border:1px solid red; } Code (markup):
I know the root cause: it's the "display:table". The problem is if I remove that line, there's no background image at all in firefox (i.e. background:url(images/container.jpg) repeat-y; is not functioning). Please enlighten me with that. thanks in advance.
Forget about the display:table; what does this Fix in FF , Opera and Safari? The background: url(rgrgrg); should work in FF check that you are doing it correctly, i'll try and look into it later if you cannot solve it yourself.
Does setting any kind of height for for the sidebar and see if it goes away. For all images, make sure you have dimensions for the images. Without dimensions, FF first puts the image where it goes but doesn't have any idea of how big the image is. But once you refresh, it has already saved the image size and will adjust the page.
Hello guys thanks for your replies Actually I had already found the solution. I'm not good at explaining the problem, anyway here is the excerpt from the page that I found. Solution reference http://www.seungpyo.com/stacksandpiles/2007/09/05/css-column-layouts-faux-column-fix/