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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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>