Hi. I am trying to make it so that the top of my website is the actual top and there is no space up at the top. I implemented the following code, but it doesn't seem to want to work: body { background-color:#999999; margin:0; padding:0; } HTML: There is space between the top of my header and the top of the browser. Is there soemthing else i have to do to fix this?
Yep I suggest the global reset also, but if that's the only problem that you have, you can just add topmargin="0" to <body>
He is already specifying margin and padding for body in his CSS so there is no need for topmargin. And since he is having trouble fixing the space between header and body he will have more trouble with the global reset. Hades: Just check the margin/padding of your header. Post your HTML with CSS or a link for more help.
Yeah the whole reset didn't work. Here is the thing: It also seems as though my H1 is really small. Not really sure why. I think it's cause i didn't include it in the "h1 a" section, but i don't know. @charset "utf-8"; /* CSS Document */ /**** Miscelaneous ****/ body { background-color:#999999; margin:0; padding:0; } p { margin:0; padding:0; } h1 { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:24px; margin:0; padding:0; } h1 a, a:active, a:hover, a:visited { color:#FFFFFF; margin:0; padding:0; text-decoration:none; } h2 { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:16px; margin:0; padding:0; color:#FFFFFF; } h3 { color:#FFFFFF; font-size:16px; margin:0 0 0 16px; padding:0; line-height:26px; vertical-align:middle; } li { margin:0; pading:0; } ul { margin:0; padding:0; } /* Clear Div */ .clear { clear:both; } /* Bottom Nav Spacer */ .space { margin:0 0 9px; } /**** Main Wrapper ****/ #wrapper { width:840px; margin:0 auto 0 auto; } /**** Header ****/ #header { width:840px; height:99px; border-bottom:1px solid #FFFFFF; background: url(images/header.gif) repeat-y; margin:0; margin:0; } #logo { float:left; width:146px; height:53px; background:url(images/logo.gif); margin:20px 10px 0 9px; display:inline; /** Avoid Double Float Bug **/ } #title { float:inherit; margin:23px 0; } /**** Main Navigation ****/ #main-menu { background-color:#333333; height:26px; width:840px; } #main-menu a, a:active, a:hover, a:visited { color:#FFFFFF; margin-left:36px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none; font-weight:bold; line-height:26px; vertical-align:middle; } /**** Flash Banner ****/ #banner { width:840px; height:120px; background:url(images/banner.gif) no-repeat; } /**** Content Wrapper ****/ #c-wrapper { background:url(images/content-wrapper.gif) repeat-y; width:840px; float:left; } /**** Sidebar Navigation ****/ #sidebar { float:left; width:209px; background:#333333; } /*////// Tree Menu CSS //////*/ .arrow { display:inline; float:left; background:url(images/arrow.gif) no-repeat; width:8px; height:9px; margin-top:7px; margin-left: 5px; } .menutitle{ cursor:pointer; margin:4px auto 0 auto; background-color:#f73433; color:#fff; width:184px; padding:3px; text-align:center; font-weight:bold; } .menutitle a { color:#fff; } .submenu { width:190px; background-color:#ffffcd; list-style:none; margin: 0 auto 0 auto; } .submenu a { float:left; margin: 3px 0 0 9px; font-size:11px; color:#000000; } .submenu a:active { font-weight:bold; } /**** Content ****/ #content { float:right; width:631px; background:#f6f8e5; margin-top:-26px; } #bcec-title { /* The black bar with the bcec title */ width:631px; height:26px; background:#000000; } HTML:
for starters you have margin: 0 twice in your header css, take one out. I've come back to see if I can help again but still, without seeing the html page we can only guess at the problem.
This is as much as i can show of the site: <body> <div id="wrapper"> <div id="header"> <div id="logo"></div> <div id="title"> <h1><a href="index.php">Title</a></h1> <h2>Title</h2> </div> </div> <div id="main-menu"> <a href="#" class="menu-links"></a> <a href="#" class="menu-links"></a> <a href="#" class="menu-links"></a> <a href="#" class="menu-links"></a> <a href="#" class="menu-links"></a> <a href="#" class="menu-links"></a> <a href="#" class="menu-links"></a> </div> <div id="banner"></div> <div id="c-wrapper"> <div id="sidebar"> <!-- Keep all menus within masterdiv--> <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div> <span class="submenu" id="sub1"> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="space"></div> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div> <span class="submenu" id="sub2"> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="space"></div> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="space"></div> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div> <span class="submenu" id="sub4"> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="arrow"></div><a href="hot.htm">What's hot</a><div class="clear"></div> <div class="space"></div> </span> </div> </div> <div id="content"> <div id="bcec-title"><h3>title</h3></div> </div> </div> </div> </body> HTML:
Based on your markup and CSS, I would assume its this.. I'd swap the top 23 pixel margin for padding. I could make a better guess if I saw the actual page though
The overflow did the trick, but the <h1> is still too small. It's much smaller than what <h2> is , and i have h1 set to be larger than h2, so wth?
#main-menu a, a:active, a:hover, a:visited to #main-menu a, #main-menu a:active, #main-menu a:hover, #main-menu a:visited which might be the problem with the h1, if it's active/visited (at least unless I missed something).