| Inline Style work in FF but not IE
|
mattpone
msg:4077109 | 6:03 pm on Feb 9, 2010 (gmt 0) |
Probably a simple CSS tweak needed but I cant see the wood for the trees at the moment - I'm trying to get these divs to line up horizontal so I have three sets of three images, it works perfectly in FF but IE just wont play ball - I've tried various "display: inline;" styles but no joy - please help!
<<<<HTML CODE>>>>
<div id="gallery">
<div id="gallery1" >
<ul>
<li><a href="javascript:ShowContent('gallery3','gallery1')"><img src="http://www.example.com/images/left-arrow.png" /></a></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.comphoto2.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Private Swimming Pool</td></tr></table></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.comphoto6.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Four Poster Bed</td></tr></table></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.comphoto4.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Satellite TV & DVD</td></tr></table></li>
<li><a href="javascript:ShowContent('gallery2','gallery1')"><img src="http://www.example.com/images/right-arrow.png" /></a></li>
</ul>
</div>
<div id="gallery2" >
<ul>
<li><a href="javascript:ShowContent('gallery1','gallery2')"><img src="http://www.example.com/images/left-arrow.png" /></a></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.com/photo1.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Beautiful Views</td></tr></table></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.com/photo5.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Modern Kitchen</td></tr></table></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.com/photo13.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Barbecue Area</td></tr></table></li>
<li><a href="javascript:ShowContent('gallery3','gallery2')"><img src="http://www.example.com/images/right-arrow.png" /></a></li>
</ul>
</div>
<div id="gallery3" >
<ul>
<li><a href="javascript:ShowContent('gallery2','gallery3')"><img src="http://www.example.com/images/left-arrow.png" /></a></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.com/photo3.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Al Fresco Dining</td></tr></table></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.com/photo8.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Large Double Room</td></tr></table></li>
<li><table width="203" height="134"><tr><td align="center"><img src="http://example.com/photo12.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">En-Suite Facilities</td></tr></table></li>
<li><a href="javascript:ShowContent('gallery1','gallery3')"><img src="http://www.example.com/images/right-arrow.png" /></a></li>
</ul>
</div>
</div>
<<<<CSS>>>>
#gallery {
margin: 0;
}
#gallery li{
display: inline-table;
margin: 0 10px 0 11px;
list-style-type: none;
vertical-align: middle;
}
#gallery li table {
background: url('http://example.com/images/gallery-background.png') no-repeat top center;
}
#gallery1, #gallery2, #gallery3, {
display: inline;
/*border-style: solid;
background-color: white;
padding: 5px;*/
} [edited by: limbo at 9:21 am (utc) on Feb 10, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]
|
|
