|
My navigation bar off by a couple of pixels in IE6, but it looks the same in IE7 and Firefox. Can someone help me out? I've posted a couple of pics if that helps along with the HTML and CSS. As you can see in the pictures, the border doesn't really reach the yellow part of the header and the striped background shows through a little bit. I would really appreciate the help!
HTML
<!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=UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="headerwrap">
<div id="header">
<img src="http://www.webmaster-talk.com/images/logo.png" />
</div>
<div id="nav">
<ul>
<li id="currentpage"><a href="index.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentwrap">
<div id="main">
<h1>About Me</h1>
<p>
</p>
</div>
<div id="footer">
<p>
<a href="index.html">Home</a> : <a href="portfolio.html">Portfolio</a> : <a href="contact.html">Contact</a>
</p>
<p>Copyright ©</p>
</div>
</div>
</body>
</html>
CSS
body, html {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
background-image:url(images/body_bg.gif);
}
p {
margin:0px;
padding:0px;
}
h1 {
padding:0px;
margin:0px;
}
#headerwrap {
width:100%;
height:100px;
padding:0px;
margin:0px;
background-image:url(images/header_bg.gif);
background-repeat:repeat-x;
}
#header {
width:850px;
height:65px;
padding:0px;
margin:0px auto;
}
#nav {
height:35px;
width:750px;
margin:0px auto;
padding-right:30px;
text-align:right;
}
li#currentpage a {
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background-color:#2c2c2c;
color:#e1b900;
border-bottom:#2c2c2c solid 2px;
}
li#currentpage a:hover {
background-color:#2c2c2c;
color:#e1b900;
}
#nav ul {
margin:0px;
padding:0px;
list-style:none;
width:750px;
}
#nav ul li {
display:inline;
margin:0px;
padding:0px;
}
#nav a {
font-size:14px;
padding:3px 10px;
line-height:35px;
text-decoration:none;
font-weight:bold;
color:##2c2c2c;
}
#nav a:hover {
color:#2c2c2c;
}
#contentwrap {
width:750px;
padding:0px;
margin:0px auto;
border-right:#b1b1b1 1px solid;
border-bottom:#b1b1b1 1px solid;
border-left:#b1b1b1 1px solid;
color:#ffffff;
}
#main {
padding:15px;
margin:0px;
background-color:#2c2c2c;
font-size:12px;
color:#e9e9e9;
line-height:19px;
}
#main h1 {
font-weight:bold;
font-size:17px;
color:#e1b900;
}
#main a {
text-decoration:none;
color:#e1b900;
}
#main a:hover {
text-decoration:underline;
}
#footer {
text-align:center;
background-color:#2c2c2c;
padding:10px;
margin:0px;
color:#999999;
font-size:11px;
}
#footer a {
text-decoration:none;
color:#999999;
}
#footer a:hover {
text-decoration:underline;
color:#e1b900;
}
/* CONTACT FORM */
div#contactform {
width:400px;
marign:0px auto;
padding:20px;
}
.input {
background-color:#fffded;
color:#797979;
border:#1a1a1a solid 2px;
}
#submitbutton {
border:#1a1a1a solid 2px;
}
textarea:focus, input:focus {
border:#ffe56b solid 2px;
}
Last edited by freeman17; 03-01-2009 at 11:09 PM..
|
