Grow your CSS skills. Land your dream job.

[Solved] Margin apears without being put into the CSS

  • # July 21, 2010 at 12:03 pm

    Ok, i have a problem (obviously :lol: ).
    The thing is that on my layout i see a margin which i didn’t declare anywhere in the css document.

    I have a main div (wrapper), which is centered and has padding 20px both on left and right side… But, on the right side i see 40px of extra space, and Chrome’s Inspect Element Tool on the Computed style shows a margi of 40px.

    Maybe the div clear is causing problems… Can you check it out and suggest a solution. Here is the page code, as well as the css.

    Page:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    CSS:

    Code:
    /*
    Theme Name: Nesto
    Version: 1.0
    Author: The2MD
    Author URI:
    Tags: blue, gray, fixed-width
    Description: Simple portfolio theme, first version.
    */

    * {
    font-family: arial;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
    vertical-align: baseline;
    white-space: normal;
    }

    ul {
    list-style-type: none;
    }

    ol {
    list-style-type: decimal;
    }

    .clear {
    clear:both
    }

    body {
    background: #333;
    }

    .wrapper {
    background:url(images/noise.png);
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding-top:100px;
    padding-left:20px;
    padding-right:-80px;
    }

    .header {
    width:960px;
    float:left;
    }

    .header-logo {
    background:url(images/logo.png) top right no-repeat;
    width:648px;
    height:100px;
    float:left;
    }

    .menu {
    background:#35b5f7;
    width:648px;
    float:left;
    clear:left;
    }

    ul.menu {
    padding:0px;
    }

    ul.menu li, ul.menu li a {
    display:inline;
    color:#fff;
    font-weight:bolder;
    text-transform:uppercase;
    letter-spacing:-2px;
    font-size:40px;
    margin-right:3px;
    }

    ul.menu li a:hover{
    background:#333;
    }

    .menu-shadow {
    background:url(images/menushadow1.png) center no-repeat;
    height:27px;
    }

    .header-right {
    background:url(images/t.png) center no-repeat;
    float:right;
    margin:0px;
    width:300px;
    height:219px;
    }

    .header-right:hover {
    background:url(images/t-over.png) center no-repeat;
    }

    .content-wrapper {
    width:960px;
    float:left;
    }

    .content {
    background:url(images/darknoise.png);
    float:left;
    width:648px;
    height:300px;
    }

    .sidebar {
    background:url(images/darknoise.png);
    float:right;
    width:300px;
    height:300px;
    }

    .footer {
    background:url(images/darknoise.png);
    float:left;
    margin-top:15px;
    width:960px;
    height:300px;
    }

    # July 21, 2010 at 12:11 pm

    Do you have a link to the page?

    # July 21, 2010 at 12:25 pm

    http://gleforu.com/djb/index.html

    Also, one more question, regarding the ul. Why isn’t the whole are covered with gray on hover (thin blue line stays)…

    # July 21, 2010 at 4:05 pm

    Make your wrapper width 960px instead of 1000px.

    On the <li>, instead of display: inline; try float: left;. That seems to take care of the little border on top.

    # July 21, 2010 at 6:35 pm

    The solution to the first problem was to reduce the width of the wrapper from 100px to 960px…

    And the float:left thingy also helped ;) Thanks…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".