Hi,
I'm have a problem with defining the height of of two different div's (one
containing text and another containing a picture) on a site I'm designing.
Basically, the height appears to be the same on IE 6, Firefox PR 1 and
opera 7.54. However, it seems to be different for the two on the mac ie 5.2
and safari.
The URL is here:
http://beta.jonathanpurcell.co.uk/pr...g=2&key=11&p=2
and the revelant CSS: http://beta.jonathanpurcell.co.uk/css/designs/css
The HTML is as follows:
<div class="Cell">
<div class="TextFram e">
<div class="propText "></div>
<h2 style="margin:0 ;padding:0;text-align:center;"> dharma Kid </h2>
<div class="clear"></div>
</div>
</div>
<div class="Cell">
<div class="Frame">
<div class="propPict ure"></div>
<a href="javascrip t:openWindow('a nImage);" border="0" alt="Click Image to
see larger Picture"/></a>
<div class="clear"></div>
<div class="Caption" > </div>
</div>
</div>
and the CSS
..gallery {
text-align: center;
width: 600px
}
..gallery img {
border: 0;
}
..gallery div.Cell {
float: left;
clear: none;
padding: 0 0 15px 0;
margin: 0;
text-align: center;
width: 200px;
}
..gallery div.Frame {
border: 1px solid #1f3543;
background: #f0f8f2;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 15px 0 0 0;
width: 187px;
width/* */:/**/185px;
width: /**/185px;
}
..gallery div.TextFrame {
border: 1px solid #1f3543;
background: #f0f8f2;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 0 15px 15px 15px;
text-align: left;
width: 187px;
width/* */:/**/155px;
width: /**/155px;
}
..gallery div.propText {
float:left;
width:1px;
height: 173px;
height/* */:/**/172px;
height: /**/172px;
}
..gallery div.propPicture {
float:left;
width:1px;
height: 155px;
height/* */:/**/154px;
height: /**/154px;
}
Any help would be appreciated.
W Dean