homepage Welcome to WebmasterWorld Guest from 54.205.205.47
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Inline Style works ok in FF but not IE?
mattpone




msg:4077732
 4:53 pm on Feb 10, 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="/images/left-arrow.png" /></a></li>
<li><table width="203" height="134"><tr><td align="center"><img src="/photo2.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="/photo6.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="/photo4.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="/images/right-arrow.png" /></a></li>
</ul>
</div>
<div id="gallery2" >
<ul>
<li><a href="javascript:ShowContent('gallery1','gallery2')"><img src="/images/left-arrow.png" /></a></li>
<li><table width="203" height="134"><tr><td align="center"><img src="/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="/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="/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="/images/right-arrow.png" /></a></li>
</ul>

</div>
<div id="gallery3" >
<ul>
<li><a href="javascript:ShowContent('gallery2','gallery3')"><img src="images/left-arrow.png" /></a></li>
<li><table width="203" height="134"><tr><td align="center"><img src="/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="/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="/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="/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('images/gallery-background.png') no-repeat top center;
}

#gallery1, #gallery2, #gallery3, {
display: inline;
/*border-style: solid;
background-color: white;
padding: 5px;*/
}

 

rocknbil




msg:4077892
 8:25 pm on Feb 10, 2010 (gmt 0)

Before doing anything else, get your HTML right and validated [validator.w3.org].

This is "illegal"

<li><table width="203" height="134"><tr><td align="center"><img src="/photo2.jpg" /></a></td></tr><tr><td style="font-family:Georgia, serif; font-size:11px; text-align:center">Private Swimming Pool</td></tr></table></li>

Can't put a table inside a list item. From looking at it, I cant' see why you even need to. Plus there's broken links.

<li><a href="SOME-URL.html"><img src="/photo2.jpg" /></a><br>
Private Swimming Pool</li>

Which is still not "perfect" but it's better.

Unrelated, but in the interest of accessibility, while you're at it: JAVASCRIPT: IS NOT A URL. What you should do here,

<a href="alternate_content.html" onclick="ShowContent('gallery3','gallery1');return false">

The return false prevents the page from navigating to alternate_content.html, but if JS is disabled, users can still access your content. An example of a non-JS user that is very important to you: a search engine spider.

Fix the validation first, if that makes the problem go away, sweet, but it will certainly pare it down to specific issues that can be fixed.

mattpone




msg:4078185
 8:47 am on Feb 11, 2010 (gmt 0)

Thanks very much for your response!

I'm not sure why I used tables now! I do have a background graphic for each photo so need to amend with a new li class in the css first.

mattpone




msg:4078207
 10:16 am on Feb 11, 2010 (gmt 0)

Ok, I've cleaned up my very messy code and made sure everything now validates but I'm still stuck with getting my list items to display inline in IE7, I'm trying to get a button, then three images then another button, all in line horizontally but in IE7 they still stack up vertically - (I'll worry about the javascript bits later, but many thanks for that also!)
Works fine in Chrome 5.0, FF 3.5.7 and IE8...

<<<HTML>>>>
<div class="clearfloat"></div>
</div>
<div id="gallery">
<div id="gallery1" >
<ul>
<li><a href="javascript:ShowContent('gallery3','gallery1')"><img src="left-arrow.png" alt="left arrow" /></a></li>
<li class="thumbnail"><img src="photo2.jpg" alt="villa with swimming pool" /><br />Private Swimming Pool</li>
<li class="thumbnail"><img src="photo6.jpg" alt="mallorca villa" /><br />Four Poster Bed</li>
<li class="thumbnail"><img src="photo4.jpg" alt="alcudia villa with satellite tv" /><br />Satellite TV &amp; DVD</li>
<li><a href="javascript:ShowContent('gallery2','gallery1')"><img src="right-arrow.png" alt="right arrow" /></a></li>
</ul>
</div>
<div id="gallery2" >
<ul>
<li><a href="javascript:ShowContent('gallery1','gallery2')"><img src="left-arrow.png" alt="left arrow" /></a></li>
<li class="thumbnail"><img src="photo1.jpg" alt="villa with beautiful views" /><br />Beautiful Views</li>
<li class="thumbnail"><img src="photo5.jpg" alt="villa with american kitchen" /><br />Modern Kitchen</li>
<li class="thumbnail"><img src="photo13.jpg" alt="villa with bbq" /><br />Barbecue Area</li>
<li><a href="javascript:ShowContent('gallery3','gallery2')"><img src="right-arrow.png" alt="right arrow" /></a></li>
</ul>
</div>
<div id="gallery3" >
<ul>
<li><a href="javascript:ShowContent('gallery2','gallery3')"><img src="left-arrow.png" alt="left arrow" /></a></li>
<li class="thumbnail"><img src="photo3.jpg" alt="bonaire villa for rent" /><br />Al Fresco Dining</li>
<li class="thumbnail"><img src="photo8.jpg" alt="villa with large rooms" /><br />Large Double Room</li>
<li class="thumbnail"><img src="photo12.jpg" alt="villa with ensuite" /><br />En-Suite Facilities</li>
<li><a href="javascript:ShowContent('gallery1','gallery3')"><img src="right-arrow.png" alt="right arrow" /></a></li>
</ul>

</div>
</div>

<<<<CSS>>>>

#gallery li {
display: inline-block;
margin: 0 10px 0 11px;
list-style-type: none;
vertical-align: middle;
}

#gallery ul {
display:inline;
}

.thumbnail {
width: 203px;
height: 134px;
text-align: center;
font-size: 0.9em;
background: url('gallery-background.png') no-repeat top center;
}

mattpone




msg:4078323
 1:45 pm on Feb 11, 2010 (gmt 0)

Finally sorted it! Purely by trial and error but now have two separate style sheets:

<<<IE.CSS>>>

#gallery li {
display: inline;
margin: 0 10px 0 11px;
list-style-type: none;
vertical-align: middle;
}

.thumbnail {
display: inline-block;
width: 203px;
height: 134px;
text-align: center;
font-size: 0.9em;
background: url('images/gallery-background.png') no-repeat top center;
}

.arrow {
display: inline-block;
width: 35px;
height: 35px;
}

<<<Main CSS>>>

#gallery li {
display: inline-block;
margin: 0 10px 0 11px;
list-style-type: none;
vertical-align: middle;
}

#gallery ul {
display:inline;
}

.thumbnail {
width: 203px;
height: 134px;
text-align: center;
font-size: 0.9em;
background: url('images/gallery-background.png') no-repeat top center;
}

.arrow {
width: 35px;
height: 35px;
}

Hope it might help someone else at some point? Many thanks

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved