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

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.


<!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>

Paul