CODEWITHSUNDEEP
htmlcss
user1625155
user1625155

Reputation: 521

List Overflowing Into Div

Thank you for any help in advance.

Take a look here: http://www.martialgear.com/martial-arts-gear/sparring-gear.html

Put your mouse over the first product, Padded Weapons Protective Headgear

Note how the entire category section above changes color on hover. This makes me for some reason the ordered list is overlapping the DIV sections above it. What is supposed to happen is only the product section's background switches color.

It works for the 2nd, 3rd, and 4th products and so on.

I have tried various adjustments on the CSS and html but cannot get this right.

Upvotes: 0

Views: 94

Answers (3)

Jim Frenette
Jim Frenette

Reputation: 1669

Also, your Ordered List <ol> is followed directly by a <div>, which is followed by an <li>. The <li> should go directly after the <ol>.

Here is what you have:

<ol class="products-list" id="products-list">
    <div id="product-listing" onclick="location.href='http://www.martialgear.com/martial-arts-gear/sparring-gear/padded-weapons-protective-headgear.html';" style="cursor:pointer;" class="odd">
    <li class="item">

Try changing this to 

<ol class="products-list" id="products-list">
    <li class="item">
    <div id="product-listing" onclick="location.href='http://www.martialgear.com/martial-arts-gear/sparring-gear/padded-weapons-protective-headgear.html';" style="cursor:pointer;" class="odd">

Upvotes: 1

3dgoo
3dgoo

Reputation: 15804

This is occurring because all the elements above the first product are floated and never cleared.

A simple fix is to add this to your css:

#products-list {
    clear: both;
}

Upvotes: 2

specialscope
specialscope

Reputation: 4228

Your entire thing is inside class "item" and you have following code.

.products-list li.item {border-bottom:1px solid #d9ddd3; padding:5px 10px 5px 10px; }
.products-list li.item:hover { background:#EEEEEE; }

So when you are hovering over product you are actually hovering over "item". Remove 

.products-list li.item:hover { background:#EEEEEE; }

And add similar hover to the specific element you want color change on hover.

Upvotes: 0

Related Questions