CODEWITHSUNDEEP
csshtml
spentak
spentak

Reputation: 4727

Webpage has top padding - cant get rid of it

I'm going crazy trying to get rid of this small padding at the top of the webpage. It shows up in all browsers. Here is a picpic

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8" />
<link href="mainpage.css" rel="stylesheet" type="text/css" />
<title>Mobile Development</title>
</head>

<body>
<div id="topnavcontainer">
<ul id="navlist">
    <li id="active"><a href="#" id="current">Services</a></li>
    <li><a href="#">Mobile</a></li>
    <li><a href="#">Cloud</a></li>
    <li><a href="#">Development</a></li>
    <li><a href="#">Our Work</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>  
<div id="bodycontainer">
</div>
</body>
</html>

CSS File mainpage.css

@charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body
{
background: #000000;
font-family: Georgia, Serif;
white-space:nowrap;
}

#topnavcontainer
{
height:5em;
background-color:#0f0f0f;
background-image: url(Images/crosshatch.png);
}

#navlist li
{
display: inline-block;
list-style-type: none;
padding-right: 20px;    
}

#navlist a:link, a:visited, a:hover, a:active
{
color:white;
list-style:none;
text-decoration:none;

}

Upvotes: 2

Views: 6475

Answers (5)

Andres I Perez
Andres I Perez

Reputation: 75379

As other have mentioned, you're not resetting your css styles properly so the default margin of the ul of your menu is displaying that extra margin on top. Here is a quick fix to this problem:

ul#navlist {
   margin:0;
}

Though i highly recommend a reset sheet, with a simple include of this sheet the problem is resolved: http://necolas.github.com/normalize.css/

Upvotes: 0

ant7
ant7

Reputation: 421

Every browser has it's own default CSS rules for the HTML tags. You should use a CSS reset (eg: http://meyerweb.com/eric/tools/css/reset/) to remove the properties set by the browsers' CSS (in your page the ul element has the default CSS properties which defines some margins for it). A rule like:

ul {margin: 0; padding: 0}

should remove the default formatting for the ul element.

Upvotes: 1

Devin Burke
Devin Burke

Reputation: 13820

Your ul and lis that are the links in your navigation bar have top margin that need to be removed.

ul, li {
    margin-top:0;
}

Upvotes: 1

deceze
deceze

Reputation: 522076

ul {
    margin-top: 0;
}

Also, your <meta> tag has borked syntax.

Upvotes: 2

Michael
Michael

Reputation: 4390

set:

* {
margin: 0;
}

html {
margin: 0;
}

body {
margin: 0;
}

Upvotes: 5

Related Questions