Webpage has top padding - cant get rid of it
I'm going crazy trying to get r开发者_开发问答id of this small padding at the top of the webpage. It shows up in all browsers. Here is a pic
<!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;
}
set:
* {
margin: 0;
}
html {
margin: 0;
}
body {
margin: 0;
}
ul {
margin-top: 0;
}
Also, your <meta> tag has borked syntax.
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;
}
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.
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/
加载中,请稍侯......
精彩评论