PDA

View Full Version : Can't get my website started because of hiccup RIGHT at the beginning!!


lenglain
09 Aug 2010, 12:04 PM
Hello everyone.

My website needs a header and a navbar. I figured I would make one "header" div inside of which there would be a logo DIV, and under that the navbar UL fitting nicely into the wrapping header div. Is that the wrong way to go about this? regardless, why won't the code do what I need it to do?!! I am unable to even get started with my site because of this silly problem right at the beginning.

Any help is much appreciated thanks!

I am unable to even get started with my site because of this silly problem right at the beginning.


INTERNET EXPLORER 8
http://farm5.static.flickr.com/4100/4875516229_2954cc519f_b.jpg

FIREFOX

http://farm5.static.flickr.com/4079/4875516157_013bfc72a2_z.jpg

AND THIS IS THE CODE:

HTML (This is the entirety of the contents of my 'index.php' file):

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />



<div id="topheader"><div id="logo"></div> <ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>


</ul></div>



CSS

body {
margin: 0 0 20px 0;
padding: 0;
color:#FFFFFF;
}

#page {
background-color: white;
margin: 0px;
padding: 0;
width: 100%;
border: 1px solid #959596;
}

#topheader {
background-color:#FFFFFF;
padding: 0px;
height: auto;
width: 800px;
margin: 0px auto;
border:#333333 1px solid;
font-size:18px;
font-weight:lighter;
color:#999999;

}


#logo {

background: #73a0c5 url('images/logo.jpg') no-repeat;
height: 90px;
border: solid 1px #FF0000;
width: 800px;;
margin: auto;
}


#nav {
list-style:none;
margin: auto;
width:800px;
border: solid 3px #00FF00;

}


#nav li {
list-style:none;
display:inline;
padding: 0 0 0 25px;
margin: auto;
border: solid 1px #FF0000;


}


Any help is much appreciated!
Wickham
09 Aug 2010, 03:10 PM
To make IE7, IE8 and Firefox the same you need to make several edits:-
Add a doctype, html and body tags
Remember that a divs total width is the basic width plus side margin, side padding and side borders.
Your container div #topheader is 800px so the TOTAL width of the other divs needs to be 800px.
Add padding: 0; to #nav for the ul tag
You don't need auto for the margin for #nav or #logo if the total width is designed to fit exactly (but it does no harm).
Try this html


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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="keywords" content="Wickham" />
<meta name="description" content="Test items" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="leng-styles.css" type="text/css"

media="screen" />
<title>Test</title>
</head>

<body>

<div id="topheader">
<div id="logo"></div>
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
</div>

</body>
</html>


and this CSS (I changed the css file url from PHP to my filename):-


body {
margin: 0 0 20px 0;
padding: 0;
color:#FFFFFF;
}

#page {
background-color: white;
margin: 0px;
padding: 0;
width: 100%;
border: 1px solid #959596;
}

#topheader {
background-color: pink;/*#FFFFFF;*/
padding: 0px;
height: auto;
width: 800px;
margin: 0px auto;
border:#333333 1px solid;
font-size:18px;
font-weight:lighter;
color:#999999;

}


#logo {

background: #73a0c5 url('images/logo.jpg') no-repeat;
height: 90px;
border: solid 1px #FF0000;
width: 798px; /*800px;*/
margin: 0; /*auto;*/
}


#nav { padding: 0;
list-style:none;
margin: 0; /*auto;*/
width:794px; /*800px;*/
border: solid 3px #00FF00;

}


#nav li {
list-style:none;
display:inline;
padding: 0 0 0 25px;
margin: auto;
border: solid 1px #FF0000;

}