Forums

cybershot

For the life of me I cannot figure out what is wrong. I have been working on this for 24 hours. I have built a site. Not for any reason. Just trying to design to sharpen my skills and start building them. The site looks the way I want almost. In I.E 7 it looks good but every other browser it adds white space to the top of the browser. check it in i.e 7. that's how it's suppose to look. Now look in opera or google chrome and you see the white space at the top. I added an unordered list with the list style of inline. When I do that, the white space pops up. I Don't get it. I can't figure out why. It only does it with the list. That's where I want my nav to go. I need a fresh pair of eyes please.

http://www.photobyiris.com/templates/template-1/


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<title>Business Template</title>
<link href=\"stylesheet.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>

<body>

<div id=\"wrapper\">
<div id=\"nav\">
	<ul>
		<li>home</li>
	</ul>
</div> <!--End Nav -->
 <div id=\"header\">
 
 </div> <!--END Header -->

<div id=\"searchbox\">
	<div id=\"box\">
	<form action=\"#\">
		<input size=\"25\" name=\"search\" /><input type=\"submit\" value=\"submit\" />
	</form>
	</div>
</div> <!--END Searchbox -->

<div class=\"clear\"></div><!--Clearing the floats. Do not Remove -->

<div id=\"latestNews\">
	<ul>
		<li> <a href=\"#\"> => Meet Our People</a></li>
		<li> <a href=\"#\"> => Learn About Us</a></li>
		<li> <a href=\"#\"> => Our Goals</a></li>
	</ul>
	<img src=\"images/Latest_news.jpg\" alt=\"Latest News\" />
	<p>Lorem ipsum dolar sit amet,
consectetuer adipiscing elit
   Aliquam sed maruis sit 
amet diam sagittis</p>

<p>Lorem ipsum dolar sit amet,
consectetuer adipiscing elit
   Aliquam sed maruis sit 
amet diam sagittis</p>
</div> <!--END Latest News -->

<div id=\"maincontent\">
<img src=\"images/welcome.jpg\" alt=\"Our Company\" style=\"margin:10px 0\" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas purus ante, eleifend non, scelerisque vitae, semper a, felis. Proin elit libero, luctus eu, tempus id, faucibus ut, dui. Nunc feugiat. Donec pulvinar feugiat purus. Nulla volutpat odio non pede. Nulla faucibus turpis at lorem. Duis malesuada egestas diam. Aenean libero. Vivamus nisl arcu, interdum et, varius eu, lobortis pretium, nisi. Morbi erat nunc, sagittis eget, elementum a, consequat imperdiet, enim. Cras luctus felis id diam. Morbi justo nunc, suscipit eget, feugiat sed, dignissim nec, quam. Suspendisse potenti. Nullam ut orci sit amet mauris interdum sodales. Vestibulum blandit dictum ante. </p>
<a href=\"#\"><img src=\"images/readMore.jpg\" alt=\"Read More\" style=\"float:right; margin:10px 5px;\" /></a>
</div> <!--END Maincontent -->

<div id=\"maincontent2\">
<img src=\"images/OurMission.jpg\" alt=\"Our Mission\" style=\"margin:10px 0;\" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas purus ante, eleifend non, scelerisque vitae, semper a, felis. Proin elit libero, luctus eu, tempus id, faucibus ut, dui. Nunc feugiat. Donec pulvinar feugiat purus. Nulla volutpat odio non pede. Nulla faucibus turpis at lorem. Duis malesuada egestas diam. Aenean libero. Vivamus nisl arcu, interdum et, varius eu, lobortis pretium, nisi. Morbi erat nunc, sagittis eget, elementum a, consequat imperdiet, enim. Cras luctus felis id diam. Morbi justo nunc, suscipit eget, feugiat sed, dignissim nec, quam. Suspendisse potenti. Nullam ut orci sit amet mauris interdum sodales. Vestibulum blandit dictum ante. </p>
<a href=\"#\"><img src=\"images/readMore.jpg\" alt=\"Read More\" style=\"float:right; margin:10px 5px;\"  /></a>
</div> <!--END Maincontent2 -->

<div class=\"clear\"></div><!--Clearing the floats. Do not Remove -->

<div id=\"footer\">
 <div id=\"creator\">

    <a href=\"http://validator.w3.org/check?uri=referer\"><img
        src=\"http://www.w3.org/Icons/valid-xhtml10-blue\"
        alt=\"Valid XHTML 1.0 Transitional\" height=\"31\" width=\"88\" /></a>

 Site Design By <a href=\"#\">PWDesigns.com &copy; 2008</a>

 </div>
 
 <div id=\"siteinfo\">
 Business Company. All Rights Reserved.<br />
 <a href=\"#\">Terms of Use</a> | <a href=\"#\">Privacy Policy</a>
 
</div> <!--END Footer -->
  
   
  

</div> <!--END Wrapper -->
</body>
</html>


/* background color: #423ef6; */
body { margin:0; padding: 0; font-family:\"Arial Narrow\", \"Arial Rounded MT Bold\"; background-color:#7c97f8;}

#wrapper { margin: 0 auto; width: 800px;  border: thin solid #000000; background-color:#ffffff; }
#nav {  border-bottom:solid 3px #ffffff; background-image:url(images/headerSlice.jpg); }
#nav ul li { color: #000000; display:inline; text-decoration:none; }
#header { background-image: url(images/Header.jpg); float: left; height: 147px; width: 348px; }
	
#searchbox { background-color:#423ef6; height: 147px; width: 452px; float:left; }
#searchbox #box { margin:25px 0 0 150px; padding:10px 0 10px 10px; height:30px; width: 256px; background:url(images/search_box.jpg); }

.clear { clear:both; }

#latestNews { float:left; width: 180px;  background:url(images/people.jpg) no-repeat; background-position: top; border-right:solid 3px #423ef6; margin: 5px 0; }
#latestNews ul  { padding-top:110px;  list-style:none; line-height:20px;}
#latestNews ul li a:link, a:visited, a:hover, a:active { color:black; font-size:14px; text-decoration: none}
#latestNews img, p { padding:0 0 0 35px; }

#maincontent { width: 590px; float:left; border-bottom:solid 3px #423ef6; margin-left:5px; }
#maincontent p { margin: 0 0 10px 5px; padding:0 0 10px 5px;}
#maincontent2 { width: 590px; float:left;  }
#maincontent2 p { margin: 0 0 10px 5px; padding:0 0 10px 5px;}

#footer { width: 800px; height:40px; background-color: #423ef6; }
#footer img { border:0; }
#footer #creator { color:#FFFFFF; padding: 5px; float:left; }
#footer #creator a:link, a:visited, a:hover, a:active { color:#FFFFFF;  }
#footer #siteinfo { float:right; color:#FFFFFF; text-align:center;}
#footer #siteinfo a:link, a:visited, a:hover, a:active { color:#FFFFFF; text-decoration:none; }

pab

*{margin:0; padding:0;}

i added this to your page to see if it would work, and it fixed it, but you might have to tweak other stuff

cybershot

You added that where to the page. I have that already on the body in my css.

pab

above the body tag

* {margin:0; padding:0;}

body { margin:0; padding: 0; font-family:"Arial Narrow", "Arial Rounded MT Bold"; background-color:#7c97f8;}

cybershot

I see. Thanks. but i just found another way. For some reason. It didn't like the code the way it was. So I had to seperate the rules. I created another set of rules for the li tag and put the list-style:none there. and that solved the problem. I don't know why but it did. All is good now.

cybershot

what does this * do anyway? does that mean it is for all rules?

ANeuby

Yes it adds the properties to all elements.

treehouse : what would you like to learn today?

Forums

help