CODEWITHSUNDEEP
csshtml
jediderek
jediderek

Reputation: 319

CSS: Remove whitespace at top(already made reset margin/padding)

I'm having a little trouble figuring out why I have about 10px of whitespace at the top of my html file. In CSS, I made the margin and padding 0 in "body" but it still is there. Any help? Thanks!

Update: So I found out that removing the !doctype html at the top removes the white space with google chrome browser but not with firefox. But from my research, you need the !doctype html to tell the browser that its html5 so I don't know where to go from here.

<!doctype html>
<html>
<head>
    <title>Personal WebSite</title>


    <style>

    html body{
        margin:0;
        padding:0;
    }


     #topbar {
     background-color:#0876BB;
     width:100%;
     height:40px;
     color:#343436;
    }

    #derek{
      float:left;
      font-size: 1.3em;
      padding-left:100px;
      padding-top:5px;
      font-weight:bold;
    }

    #Menu{
      padding-right: 30px;
    }
        #Menu li{
            float:right;
            font-size: 1.3em;
            font-weight: bold;
            display:inline;
            margin:5px 10px 0px 0px;

            cursor:pointer;
        }
            li:hover{
              color:red;
            }

    .break{
      clear:both;
    }

    #title{
      position:absolute;
    }
    img{
      position:relative;
      opacity:0.6;
      height:100%;
      width:100%;
    }


    </style>

    <body>
        <div id="topbar">

            <div id="derek">Derek</div>

            <div id="Menu">
                 <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Portfolio</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>

        <div class="break"></div>

        <div id="title">
        <h1>Web Development</h1>
        <img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
        </div>


    </body>


    </head>
    </html>

Upvotes: 1

Views: 1904

Answers (2)

Des Horsley
Des Horsley

Reputation: 1888

The margin on your ul is causing the grief.

I've updated the css to remove the margin

To trouble shoot this, I just removed elements until I found the block of html that was causing the issue. 

html body{
        margin:0;
        padding:0;
    }


     #topbar {
     background-color:#0876BB;
     width:100%;
     height:40px;
     color:#343436;
    }

    #derek{
      float:left;
      font-size: 1.3em;
      padding-left:100px;
      padding-top:5px;
      font-weight:bold;
    }

    #Menu{
      padding-right: 30px;
    }
        #Menu ul {
        margin : 0;
        }
        #Menu li{
            float:right;
            font-size: 1.3em;
            font-weight: bold;
            display:inline;
            margin:5px 10px 0px 0px;

            cursor:pointer;
        }
            li:hover{
              color:red;
            }

    .break{
      clear:both;
    }

    #title{
      position:absolute;
    }
    img{
      position:relative;
      opacity:0.6;
      height:100%;
      width:100%;
    }
<!doctype html>
<html>
<head>
    <title>Personal WebSite</title>
    <body>
        <div id="topbar">
            <div id="derek">Derek</div>

            <div id="Menu">
                 <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Portfolio</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>

        <div class="break"></div>

        <div id="title">
        <h1>Web Development</h1>
        <img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
        </div>


    </body>


    </head>
    </html>

Upvotes: 0

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

The ul from your head, you need to add margin-top: 0; he is the cause of your top margin

Upvotes: 1

Related Questions