CSS: Strange Bottom Margin/Whitespace added to <ul>

AHHH! I asked a question regarding whitespace in my HTML file, and it was answered here: Strange Bottom Margin/Whitespace added to <ul> a couple days ago. But now I am now having the same issue with a second page I have created using very much of the code from the original file. Slight differences in the layout, but the sidebar has not been altered in HTML, nor CSS. However, now there is whitespace in my BLOGROLL div and I still don't know WHY this happens. Without the WHY I can't fix on my own, I can just follow given instructions for the specific instance. Any help and a nudge to a good explanation of why this is happening would be helpful.

I have a in my sidebar that is being displayed with additional whitespace at the bottom, about 150px of whitespace that is not defined in the CSS anywhere that I can locate. It seems that as I add paragraphs in my main content section, these p's push my Blogroll div further and further down the sidebar. I am wondering if I have a conflicted rule defined in my CSS but can not f开发者_运维问答ind that either. I'm pulling my hair out here because this seems like it should be straight forward to fix, but Margin-bottom: 0, Padding-bottom: 0, defined height, nothing seems to work to fix it and Firebug does not even show the whitespace as Margin or Padding. The error only seems to surface when I add paragraphs in my main content section.

Any help or advice would be greatly appreciated.

Here are snippets of my CSS and HTML along with a link to the site itself.

www.niagarathistle.com/clients/weekendhousewife/post.html

Tried to post my code, but kept getting errors saying I was posting images. There wer no images posted, and even deleted all the img tags in my HTMl and all url calls in my CSS - still got the error. SOOO, if anyone willing to answer my question ca't view the source code at the URL above and the CSS at www.niagarathistle.com/clients/weekendhousewife/css/styles.css, let me know and I will be happy to forward a text file or try to post again.

---

Just above your blogroll div is an <hr> tag that is being cleared with the following rule on line 114 of styles.css

clear: both;

This is clearing the float on your main content div so it's pushing everything below the <hr> underneath your content_container div. You should be able to fix this by either removing the <hr>, removing the clear:both; or specifically setting clear:none; on that <hr>

I would suggest adding the following rule below line 114:

#sidebar hr {clear:none;}

---

Once again a floating problem. Following solution works on both sites.

css changes: remove the clear: left and the float: left from the css definition for fieldset, fieldset ol li fieldset.

fieldset, fieldset ol li fieldset {
    background-color: transparent;
    border: medium none;
    margin: 0 0 15px;
    padding: 0;
    position: relative;
    width: 100%;
}

html changes: remove the div with the class "clearfix" in the div with the id "blogroll".

<div id="blogroll">
    <h3>Blogging Friends</h3>
    <div class="ribbon_fold_bottomright"></div>
    <form action="">
        <fieldset>
            <select onchange="window.open(this.value,'','');" name="friendsblogs" size="1">
                <option value="">Select Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
                <option value="(BLOG URL)">Friend's Blog</option>
            </select>
        </fieldset>
    </form>
</div>