homepage Welcome to WebmasterWorld Guest from 54.204.168.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Inline Style work in FF but not IE
mattpone

5+ Year Member



 
Msg#: 4077107 posted 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]

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved