Gap in product listing

For some reason (I can't for the life of me figure it out) there is a large gap at the start of my product listings between the first listing and it's price. The rest look fine, but the first product displayed always has the issue, see what I'm talking about here:

Any help is greatly appreciated!

  • Han
    • The Crimson Coder

    Hi texaswreckshop,
    Can you try to update 2 CSS IDs in style.css, #rightcolwrap line 130 and 221

    #rightcolwrap {
        float: right;
        width: 225px;
    }
    
    #leftcontent {
        background-color: #E8E8E8;
        background-repeat: repeat-y;
        float: left;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 14px;
        height: auto;
        padding-bottom: 15px;
        padding-left: 20px;
        padding-right: 20px;
        text-indent: 10px;
        white-space: normal;
        width: 620px;
    }

    It should fix the issue. Let us know :slight_smile:

  • Arun Basil Lal
    • New Recruit

    Hello texaswreckshop,

    Welcome to WPMU Dev!

    I am not sure if what @riyaku mentioned would work, but its well worth a try, his fixes usually do!

    For me, it looks more like something to be done regarding the order of the elements on the page. The right-sidebar comes in between the left content. Can you attach and send me the theme as such? I think I am gonna have to edit page.php and re-order some elements.

    Arun Basil Lal

  • Patrick
    • Support Monkey

    Hi texaswreckshop,

    There's actually no need to edit #rightcolwrap in your style.css file. You just need to add the following to #leftcontent around line 130
    float:left;
    @ Arun - Missing floats often cause little layout hassles like this.

    Hope this helps! :slight_smile:

  • aecnu
    • WP Unicorn

    Greetings texaswreckshop,

    Thank you for being a WPMU Dev member!

    Once again pcwriter is spot on with his solution.

    @pcwriter - some rep points sent your way

    Cheers, Joe :slight_smile:

    If this thread is not resolved because the suggested action did not work or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the 'Mark as Not Resolved (re-open)' box below the post area (or else we'll miss it!)

  • rozani
    • Site Builder, Child of Zeus

    Hi texaswreckshop,

    First of all, welcome to WPMU.
    I discover the theme has many CSS issue. Does this theme done by yourself? Its a good start for to understand CSS better.

    I found the #container has width 900px.
    I understand that you are trying to do #leftcontent width 620px and #rightcolwrap width 225px. Logically this sum up to 845px. Where the balance width? The balance should be 55px;
    The balance go to here

    #leftcontent {
    	text-indent: 10px;
    	white-space: normal;
    	padding-right: 20px;
    	padding-left: 20px;
    }

    now the balance total is 50px. Where does the 5px gone? Actually the white-space: normal; is enherit by the browser (maybe consume more than 5px).

    I see the css is totally cramped up. See what i discover

    <div id="container" class="container"><!--ok to without having float-->
    <div id="nav">...</div><!--width:900px, must have float-->
    <div id="top">...</div><!--width:900px, must have float-->
    <div id="stars"></div>...</div><!--width:900px, must have float-->
    <div id="leftconnectedwrap">...</div><!--no idea but must have float-->
    <div id="rightcolwrap">...</div><!--already have float right but no width, from browser specify 225px-->
    <div id="leftcontent">...</div><!--width:620px, must have float-->
    <div id="footer">...</div><!--width:900px, must have float-->
    </div>

    The best way you must try to include reset css from Erice Meyer Reset CSS into your CSS just after the theme description.

    The simplest way to do float in div, just for float one div on left and one div on right by putting only two div under on div. See like below.

    <div id="container" class="container">
    <div id="leftcontent">...</div><!--must put on top, since it float left, don't forget to put float left since #rightcolwrap already float right-->
    <div id="rightcolwrap">...</div><!--float right already mentioned, just specify the width-->
    </div>

    For others, you may try like this example. You may rename the container to something else.

    <div id="container" class="container"><!--width:900px-->
    <div id="nav">...</div><!--width: 100%-->
    </div>

    The best way is to restructure the theme, try using the reset css, you can understand better.
    Good effort for your css skill, try to learn more. Sure many people can help out here.

    Rozani

  • texaswreckshop
    • New Recruit

    Sweet Jesus that was more feedback than I thought I would get, awesome community here!
    @ Rozani, Yeah I did the original design and html+css coding myself and a friend of mine converted it to Wordpress (I'm predominately a print designer but trying hard to learn the web part), thanks for the tips, I would never have expected so much input

    @pcwriter Those fix the issue but then breaks the #footertop div below and floats it to the top.

  • Patrick
    • Support Monkey

    Hi again texaswreckshop,

    You're right, I didn't notice that. The easiest solution is to then float all major elements to ensure they stay where they should be. Simply add
    float:left;
    to #top, #leftcontent, #footer, and #footerbottom.

    I would also suggest reducing the padding-left of #leftcontent div to 10px, and adding padding-right to #rightcolwrap, like so:
    #rightcolwrap { float:right; width:225px; padding-right:10px; }

    Hope this helps! :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.