View Single Post
  #4  
Old 11-12-2012, 11:35 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by Thais Zoe View Post
Thanks Eugene,

But, I don't want to change the appearance of the product description itself. I want to insert more space between the end of the product description and the "You May Also Like" below the description area. Currently they are overlapping.

Here's a link to show you what I mean:http://www.luckyduckliving.com/shop-...89&id=10746676
You don't need to insert extra spacing. Such a display of element is abnormal, and that is what you need to fix, not to add something into that pile.

The elements overlap because of this rule:
Code:
body.page.page-id-1795 #content p, #content ul, #content ol, #content dd, #content pre, #content hr {
margin-bottom: 4px;
height: 0px;
}
which can be found at the line 170 of the source code of http://www.luckyduckliving.com/shop-build-ecwid/

This rule effectively sets the height of the unordered list item in the content of the page equal to zero. So, browser follows that rule and renders the unordered list as an element that has no effective height (the list items from within that list are still showing, because the rule does not tell them to be hidden).

It happened so that the last element in the description of the product you refer to is the unordered list with many items inside it. Despite the fact the items are visible, the list has the effective height of 0 according to the CSS on the page, so the overflowing inner content of the list overlaps with whatever comes next (in that exact case - the related products element).

I don't think you really need such a strange rule that may affect other places on this page, not only the display of related products. I'd suggest to just remove that rule from the <style> tag on that page.