cybershot

# September 11, 2008 at 5:23 pm

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/

Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• home

• => Meet Our People
• => Learn About Us
• => Our Goals

Lorem ipsum dolar sit amet,
consectetuer adipiscing elit
Aliquam sed maruis sit
amet diam sagittis

Lorem ipsum dolar sit amet,
consectetuer adipiscing elit
Aliquam sed maruis sit
amet diam sagittis

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.

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.

alt="Valid XHTML 1.0 Transitional" height="31" width="88" />

Site Design By PWDesigns.com © 2008

Business Company. All Rights Reserved.
Terms of Use | Privacy Policy

Code:

/* 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

# September 11, 2008 at 6:51 pm

*{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

# September 11, 2008 at 7:15 pm

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

pab

# September 11, 2008 at 7:28 pm

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

# September 11, 2008 at 7:35 pm

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

# September 11, 2008 at 7:48 pm

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

ANeuby

# September 12, 2008 at 2:12 am

Yes it adds the properties to all elements.