Menu
Hi all,
I’ve just built my first ever website after a month of learning HTML.
the website is: [url]www.nomadspool.co.uk
The problem I have is that when the site is viewed on IE6 or IE7 the navigation bar is all messed up as the text doesn’t appear to fit the container and there are big gaps between each link and on IE6 the website doesn’t appear to be centered in the middle in middle of the page, but it does when viewed in IE9 or on an iPhone.
Does anyone have any suggestions for a newbie?
I’ll paste the CSS & HTML below.
Here’s the CSS:
[code]body {
margin-top: 20px;
margin-bottom: 20px;
background-color: #99FF66;
font: 10pt verdana, ariel, georgia, sans-serif;
}
p {
font: 9pt verdana, ariel, georgia, sans-serif;
}
div#container {
margin-left: auto;
margin-right: auto;
width:900px;
border: none;
}
#footer {
width: 900px;
height: 19px;
padding-top: 5px;
padding-botton: 5px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-color: #222222;
font-size: 9px;
clear: both;
color: white;
}
#header {
width: 900px;
height:100px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 18px;
margin-top: 0px;
border: 0px solid;
background: url(../images/nomadsheader900.jpg);
}
#nav {
margin-left:20px;
margin-right:18px;
width:150px;
float:left;
}
#content {
float:left;
margin-bottom: 20px;
padding: 6px;
background-color: #FFFFDB;
width:660px;
float:left;
border: none;
}
#nav a {
text-decoration: none;
}
#content a {
text-decoration: none;
font-weight: bold;
}
#nav ul {
list-style: none;
padding: 0px;
}
#nav ul li {
border-bottom: 1px solid #ffffff;
}
#nav ul li a:link, #nav ul li a:visited {
font-size: 10pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 3px;
background-color: #628794;
color: #ffffff;
}
#nav ul li a:hover, #nav ul li a:active {
font-size: 10pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 3px;
background-color: #FFD540;
color: #000000;
}
#nav ul ul {
margin: 0px;
padding: 0px;
}
#nav ul ul li {
border-bottom: none;
}
#nav ul ul li a:link, #nav ul ul li a:visited {
font-size: 8pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 18px;
background-color: #628794;
color: #ffffff;
}
#nav ul ul li a:hover, #nav ul ul li a:active {
font-size: 8pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 18px;
background-color: #FFD540;
color: #000000;
}
Here’s the HTML for the home page:
[code]<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>The Waterloo Nomads Pool Team</title>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css” /> </head>
<body>
<div id=”container”>
<div id=”header”></div>
<div id=”nav”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”theteam/theteam.html”>The Team</a></li>
<li><a href=”fixtures/fixtures.html”>Fixtures</a></li>
<li><a href=”#”>Results</a>
<ul>
<li><a href =”results/results.html”>» 2010 / 2011</a>
<li><a href =”results/matchresults.html”>» 2011</a>
<li><a href =”results/playerstats2011.html”>» Player Stats</a>
</ul>
</li>
<li><a href=”#”>Achievements</a></li>
<li><a href=”blog/blog.html”>Blog</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”links/links.html”>Links</a></li>
</ul>
</div>
<div id=”content”>
<h1>Welcome !</h1>
<hr />
<p style=”color: red;”><strong>Latest News: – Thu 5th May:</strong>
<br>
Nomads bag their 2nd win of the season at home against the Sportsman.<br>
Check out the <a href=”results/matchresults.html”>results</a> and the <a href=”blog/blog.html”>blog</a> for the match report & highlights.</p>
<hr>
<p>This is the official home of The Waterloo Nomads pool team
based in Stockport. The place to be to find out everything Nomad
related, whether you’re interested in how we are doing this season,
find out more about the team and the players, or even if you’re
looking to find out more about our team achievements or the
(rather eventful!) history of the team.</p>
<p>Please use the navigation on the left to find you’re way around
the site.</p>
</div>
<div id=”footer”>© nomadspool.co.uk (2011)</div>
</body>
</html>
Many thanks for your help in advance.
Dave