stuck Posted July 7, 2010 Report Share Posted July 7, 2010 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! Quote Link to comment Share on other sites More sharing options...
stuck Posted July 7, 2010 Author Report Share Posted July 7, 2010 in otherwords, why is one list item sitting behind the one above it in the list (the one which holds the image.) Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 7, 2010 Report Share Posted July 7, 2010 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? Quote Link to comment Share on other sites More sharing options...
stuck Posted July 7, 2010 Author Report Share Posted July 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
stuck Posted July 7, 2010 Author Report Share Posted July 7, 2010 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?! Quote Link to comment Share on other sites More sharing options...
newseed Posted July 7, 2010 Report Share Posted July 7, 2010 Provide a url to this problem because chances are is that you may have css that are indirectly affecting the list. Quote Link to comment Share on other sites More sharing options...
stuck Posted July 7, 2010 Author Report Share Posted July 7, 2010 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> Quote Link to comment Share on other sites More sharing options...
newseed Posted July 7, 2010 Report Share Posted July 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
stuck Posted July 7, 2010 Author Report Share Posted July 7, 2010 Quote Link to comment Share on other sites More sharing options...
newseed Posted July 7, 2010 Report Share Posted July 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.