CSS issue on my website, can someone help?

Question

Hi,

I need some help sorting out a CSS issue with my website, I have tried everything I can think of but none worked the way that I wanted.

You can view the issue I have here: http://dev.michaelcarrano.com/blog.html

You will notice the tabs are floating instead of being connected to the content part below it.

Here is a link to the CSS file: dev.michaelcarrano.com/css/general.css

Any help?

Answer 1

In the first #container ul.menu li, add margin-top: 8px;. And remove margin-top:1px; from the second #container ul.menu li.

Answer 2

OK, so a number of changes should be made. The main problem is your <span class="clear"></span> is actually taking up vertical space.

So, first delete <span class="clear"></span> entirely so your HTML should be:

<ul class="menu"> ... </ul>
<div class="content"> ...

Next, in your CSS, add these rules (You should add them in the existing blocks if they exist):

div.content {
  clear: left
}

ul.menu {
  position: relative;
  float: left;
  width: 100%
}

#container #search {
  float: none;
  position: absolute;
  right: 0;
  bottom: 0;
}

Answer 3

You can solve this changing one simple attribute:

#container ul.menu li#search
{
    margin: -5px 0px -10px;
}

Answer 4

In addition to the other suggestions, you should consider setting a more specific DOCTYPE. It helps make your site render more consistently in different browsers. See Fix Your Site With the Right DOCTYPE!