CODEWITHSUNDEEP
htmlcssinternet-explorer-7
StuBlackett
StuBlackett

Reputation: 3857

IE7 Issue with Lists

I've got an issue with IE7. I've got a div titled "imageOptions" with an Unordered List inside it. In FireFox / IE8 etc. It shows the list as an inline 2 x 2 Unordered Lists. But in IE7 it shows it as a long list (4 Items). How do I achieve the IE8 / FireFox look in IE7? Here is my code (HTML First)

<div class="imageOptions">
  <?php do { ?>
  <ul>
    <li> 
     <a href="#" onclick="MM_swapImage('target','','propertyimages/<?php echo $row_select_property['image_url']; ?>',1)">
     <img src="thumbnail.php?image=propertyimages/<?php echo $row_select_property['image_url']; ?>" alt="Small Image 1" class="topImage" onclick="MM_setTextOfLayer('imageText','','<p><?php echo $row_select_property['image_desc']; ?></p>')" /></a>
    </li>
  <?php } while ($row_select_property = mysql_fetch_assoc($select_property));
</div>

CSS...

.imageOptions {
 clear: both;
 float: right;
 margin: 15px 75px 0;
 width: 185px;
}
.imageOptions ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.imageOptions li {
 float: left;
 padding: 5px;
}

Thanks in advance.

Upvotes: 0

Views: 435

Answers (4)

DoctorLouie
DoctorLouie

Reputation: 2674

Move <ul> to before: <?php do { ?>

Upvotes: 0

Jakob Nilsson-Ehle
Jakob Nilsson-Ehle

Reputation: 64

You're missing a </ul> in the HTML.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

1) Use a CSS reset. The default margin and padding for lists on different browsers vary:

ul, li {
    margin:0;
    padding:0
}

2) Other than, float:left put all your styling on the A tag in the LI and use display:block on your A tag so you can make full use of margins and padding.

See my tutorial: I love lists.

Upvotes: 1

benhowdle89
benhowdle89

Reputation: 37464

you dont close off your <ul>

Upvotes: 1

Related Questions