List item acting strange

HTML & CSS
1

Hi,
I am working on a and the li is acting strange.As it is, the li should be floating to each other which it does but one li don’t let anything float next to it. there isn’t any clear property. What is wrong?

2

Hey nofel

If you’re talking about the list items in the products-grid, then what I’m saying should apply.

The problem is that you are trying to float items that are belonging to different lists together.

Your HTML code goes like this:

<ul class="products-grid">
    <li class="first"></li>></li>
    <li></li>
    <li></li>                           <!-- Note that this is the 3rd item in your list, but it's at the far right column -->
    <li class="last"></li>></li>  <!-- This item is the hanging one that seems to "not float" -->
</ul>

<!-- The problem lies between these two lines. You have closed off the unordered list and opened a new one. -->
<ul class="products-grid">
    <li class="first"></li>></li>
    <li></li>
    <li></li>
    <li class="last"></li>></li>
</ul>

There are two ways to fix this problem

  1. Make sure your lists are only 3 item wide (If you don’t want to change anything else)
  2. Do not create separate uls. Instead, place all of your li into one single ul.

Hope this helps.

3

HI,

As correctly mentioned above you have 4 items in a ul so every ul will start on a new line leaving one orphaned list item. You need then all in one list or as mentioned above put them three across only.

You have a big issue with your images in that some are over 1300k!!! That’s more than the whole css, html, js, images and other resources for most whole small sites. That thumbnail image should be about 2k in size not 1300k+. You have similar images of much to large a file size. Make your thumbnail images smaller in your paint package and optimise them down to a few k each and your page will load in a flash .:slight_smile:

4

Thanks zell and paul, i will look into it. paul can you remove the hyperlink. i don’t want site to be indexed.

Off Topic:

its been a long time paul, how you been

5

Ok removed this time but just obfuscate a little in future (e.g. mysitexxxdotxxxcom ) and then people can still work out the link but search engines won’t :slight_smile:

Off Topic:

Off Topic:

its been a long time paul, how you been

Fine thanks and still here :slight_smile: Hope you are well also A little busy at the moment though.

6

I tried but i don’t see any code, maybe its dynamic as its magento. is there a css hack which can make it display none? like if i use nth-child? will it do?

7

Why would you want to hide the 4th item? No one will see it then.

You could use nth-child or more simply last-child if you always have 4 items but it seems strange to hide your content.

8

my bad, i was wrong. i mean to say clear 4th item.anyhow i was able to style it with different thing and i fixed it, though i couldn’t find extra pair of li that you pointed out. here is what it look like now (genuinelyjanestudiosdotammarworxdotcom/retail-store)