Jump to content

Recommended Posts

Posted

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!

Posted

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?

Posted

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.

Posted

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>

Posted

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.

Posted

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.

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...