My header on my website is all messed up with the links appearing incorrectly. I suspect it's an issue with style.css, so I attempted to modify the style.css file but had no luck. I have very limited experience with .css and cannot seem to figure out how to resolve this problem. Here is an image of my website:
Below is the HTML code snippet:
<!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">
<head>
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" href="includes/style.css" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<h1></h1>
<h2></h2>
</div>
<div id="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="calculator.php">Calculator</a></li>
<li><a href="lotto.php">Lotto Numbers</a></li>
<li><a href="craps.php">Craps</a></li>
</ul>
</div>
<div id="content"><!-- Start of the page-specific content. -->
<!-- Script 3.2 - header.html -->
And here is the CSS code excerpt:
/*
Author : Christopher Robinson
Email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3e352f342e29322d35382f1d38393a6e733e32732836">[email protected]</a>
Website : http://www.edg3.co.uk/
*/
* {
border: 0;
margin: 0;
padding: 0;
}
/* general */
a {
color: #777;
text-decoration: none;
}
a:hover {
color: #333;
text-decoration: none;
}
/* body */
body {
background: #ffffff;
color: #555;
font: 0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
}
/* header */
#header {
border-bottom: 1px solid #999;
height: 80px;
margin: 0 auto;
width: 751px;
}
#header h1 {
color: #888;
font-size: 300%;
letter-spacing: -3px;
text-align: right;
padding: 5px;
margin-bottom: -20px;
}
#header h2 {
color: #CCC;
font-size: 200%;
letter-spacing: -2px;
text-align: right;
}
/* navigation */
#navigation {
background: #fafafa;
border-right: 1px solid #999;
margin: 0 auto;
width: 750px;
height: 40px;
list-style: none;
}
#navigation li {
border-left: 1px solid #999;
float: left;
width: 187px;
list-style: none;
}
#navigation a {
color: #555;
display: block;
line-height: 40px;
text-align: center;
}
#navigation a:hover {
background: #e3e3e3;
color: #555;
}
#navigation .active {
background: #e3e3e3;
color: #777;
}
/* content */
#content {
height: auto;
margin: 0 auto;
padding: 0 0 20px;
width: 751px;
}
#content h1 {
border-bottom: 1px dashed #999;
font-size: 1.8em;
padding: 20px 0 0;
}
#content p {
padding: 20px 20px 0;
}
/* footer */
#footer {
border-top: 1px solid #999;
height: 50px;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 751px;
}
/* Added by Larry Ullman: */
.error, .ad {
font-weight: bold;
color: #C00
}
input, select, .input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border: 1px dotted #004080;
}
I tried integrating your code into my file but it didn't solve the issue. The fourth link seems to be causing the problem and I can't seem to fix it.