Firefox problem: Intermittent sidebar fall down

Discussion in 'CSS' started by eches, Mar 24, 2008.

  1. #1
    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 :)

    [​IMG]

    <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):
     
    eches, Mar 24, 2008 IP
  2. eches

    eches Well-Known Member

    Messages:
    250
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #2
    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.
     
    eches, Mar 24, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    wd_2k6, Mar 25, 2008 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    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.
     
    drhowarddrfine, Mar 25, 2008 IP
  5. eches

    eches Well-Known Member

    Messages:
    250
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #5
    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/
     
    eches, Mar 25, 2008 IP