List items and images in IE

[stuck 0]

Two list items. The top item contains a button. The last item in the list is a link.

The problem i have is the last item (link) sits behind the button of the list element above it in the list.

 

This is an IE issue. The list looks fine in all other browsers.

 

This is the HTML: (the whole thing sits inside a form, hence the input src)

 

<ul>

<li><input type="image" id="button" src="/ui/buttons/add.gif" width="160" height="40" alt="Add" title="Add" /></li>

<li class="rent"><a href="/rent">Rent</a></li>

</ul>

 

I have tried using display: block on li but to no avail.

I can add a bottom-margin to the top list item (button) to push the link down from behind it, but it is doing the same for other browsers so the link ends up sitting miles below the button in other browsers.

 

I know there must be an easy solution but i can't somehow put my finger on it. Pls help!

[stuck 0]

in otherwords, why is one list item sitting behind the one above it in the list (the one which holds the image.)

[Andrea 21]

Try adding a line-height to your li, big enough to clear the button. Haven't tried it, but seems like it should work. Do you have the page up somewhere, where we can see the whole thing?

[stuck 0]

thanks but i tried line height. what this does move the list item even further down in the other browsers which already show it as i would like. plus line-height effectively is creating space above and below and so everything underneath the list is being shunted down too.

[stuck 0]

It baffles me!

I hate IE!!

 

The list items have a class of block.

So what if one of them happens to hold an image.

Why does IE do this?!

[newseed 13]

Provide a url to this problem because chances are is that you may have css that are indirectly affecting the list.

[stuck 0]

no url but here's my css:

 

#price { float: left; width: 100%; padding-bottom:40px;}

#price li { margin: 0.4em 0; padding: 0; display: block; }

#price li label { margin: 0.4em 0; text-align: left; display: inline; float: none; position: static; }

#price li label#item-quantity { width: auto; text-align: left; float: none; display: inline; }

#price li input#quantity-top { width: auto; }

#price li.item-button { /*margin-bottom: 2.5em;*/ }

#price li input#add-item-to-basket { }

#price li.rent{ /*line-height: 4em;*/ }

 

And this is the markup:

 

<ul id="price">

<li><strong>£359.00</strong></li>

<li>£421.82 inc VAT</li>

<li>Availability: 278 in stock<br />

47 next day from supplier<br />

0 in 2–3 days

</li>

<li><label for="quantity-top" id="item-quantity">Quantity</label> <input name="quantity" id="quantity-top" size="2" value="1" maxlength="3" type="text" /><input type="hidden" name="code" id="code" value="" /></li>

<li class="item-button"><input type="image" id="add-item-to-basket" src="/ui/buttons/add-to-basket-large.gif" width="160" height="40" alt="Add to Basket" title="Add to Basket" />

</li>

<li class="rent"><a href="/rent">Rent</a></li>

</ul>

[newseed 13]

Looks the same to me in all browsers. You didn't attached an image for that button.

 

As I said before, it could be some other css that is not related to that list but is indirectly affecting it. I would suggest you upload the page in question and provide a screenshot of what it should look like.

 

Otherwise, not much else I can do.

[stuck 0]

 

[newseed 13]

Again, I don't see this issue based what little code you have given us.

 

If you can't upload this to a site then provide the entire rendered html code along with all your css. Again, there could be some other css styles that could be indirectly affecting your list.