Jump to content
Stef's Coding Community
stuck

List items and images in IE

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...