Welcome to WebmasterWorld Guest from 54.163.25.166

Forum Moderators: not2easy

Message Too Old, No Replies

Inline Style works ok in FF but not IE?

     
4:53 pm on Feb 10, 2010 (gmt 0)

New User from GB 

5+ Year Member

joined:June 7, 2006
posts: 36
votes: 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;*/
}
8:25 pm on Feb 10, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 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.
8:47 am on Feb 11, 2010 (gmt 0)

New User from GB 

5+ Year Member

joined:June 7, 2006
posts: 36
votes: 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.
10:16 am on Feb 11, 2010 (gmt 0)

New User from GB 

5+ Year Member

joined:June 7, 2006
posts: 36
votes: 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;
}
1:45 pm on Feb 11, 2010 (gmt 0)

New User from GB 

5+ Year Member

joined:June 7, 2006
posts:36
votes: 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
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members