1. Home
  2. Forums Index
  3. Browser Side / CSS 6:27 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Inline Style works ok in FF but not IE?

         

mattpone

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:27 pm May 1, 2026