SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Dundalk
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display: table-cell causing problems in safari

    Hi

    I'm not sure if this is the right forum to post in, as I'm not too sure what the cause of my problem is, but I'm sure it can be moved later if its in the wrong one.

    Anyway, I have a div that has display: table-cell applied to it so that it will expand and contract vertically as its content does. The problem happens when the div contracts. Safari is not refreshing the screen for the area which was covered by the div, but should now be uncovered. The only way I can get it to refresh is by scrolling the affected area off the screen and back on, or minimising safari. You can see an example here: http://www.kingram.ie/template.asp?file=news.

    The page has a few accordion sections in it. Click on the grey bars to open and close sections. If you open a section and then close it, you'll be able to see the problem.

    It only happens in safari 1.0.3 on mac osX. In safari 1.2, ie5/mac, ie6/win, opera 7, mozilla 1.5 and firefox there is no problem. Here is the css for the div.

    .mainContent {
    left:0px;
    top:18px;
    width:798px;
    background-color: #E7E5E4;
    border: 1px solid white;
    overflow: hidden;
    }

    /* commented backslash hack \*/
    .mainContent {
    display: table-cell;
    min-height: 100%;
    }
    /* hack over */

    Hopefully someone has come across this before. I've found nothing after looking everywhere I know to look, and I'm quickly running out of hair.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have safari so I'm not going to be much help but perhaps I can give you something to try. I have read that display table-cell is a bit buggy before safari 1.1.1 so you could try using this min-height hack instead.

    It just floats a 0px spacer to the side of the div to hold the page open. Its pretty simple so should work without problem although it is a bit of a hack. (You may have to give the float a 1px width but 0px seems to work on the browsers I've tested on pC.)

    As I said I don't have safari so theres no guarantees.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
    background:#ffffcc;
    width:40%;
    min-height:300px;
    }
    /* mac hide \*/
    * html #outer{height:300px;}
    /* end mac hide*/
    html>body #minheight{
    float:right;
    width:0px;
    height:300px;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
    <div id="minheight"></div>
    <p>Some text to wrap : Some text to wrap : Some text to wrap : Some text to 
    	wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some text 
    	to wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some 
    	text to wrap : Some text to wrap : Some text to wrap : Some text to wrap : 
    	Some text to wrap : Some text to wrap : </p>
    <p>Some text to wrap : Some text to wrap : Some text to wrap : Some text to 
    	wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some text 
    	to wrap : Some text to wrap : Some text to wrap : Some text to wrap : Some 
    	text to wrap : Some text to wrap : Some text to wrap : Some text to wrap : 
    	Some text to wrap : Some text to wrap : </p>
    <div class="clearer"></div>
    </div>
    </body>
    </html>
    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •