HI,
The gaps are caused by the image which needs to be display block. The page is totally broken in firefox because you need to clear the float navcontainer.
This should fix those issues
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Template - Two Column Fixed Width with Header & Footer</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<!--
Web Site: www.ssi-developer.net
Comments: Copyright 2003 www.ssi-developer.net
Licence: Creative Commons - Non-commercial Share-Alike
-->
<style type="text/css">
/* Layout Stylesheet */
body {
margin:20px;
color: #333333;
text-align:center;
padding:0;
background-image: url(http://www.enhance.ie/inprogress/nac...mages/back.gif);
}
#outer {
text-align:left;
width:762px;
margin:auto;
}
#hdr {
height:72px;
color: #333333;
width: 764px;
}
#navcontainer
{
margin: 0px;
padding: 0px;
height: 22px;
width: 761px;
border-top-width: 0;
border-right-width: 0px;
border-bottom-width: 0;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #302A68;
border-right-color: #302A68;
border-bottom-color: #302A68;
border-left-color: #302A68;
}
#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { float: left; }
#navcontainer ul li a
{
text-decoration: none;
background: url(http://www.enhance.ie/inprogress/nac.../top_nav_1.jpg) no-repeat top left;
font-size: 9px;
float: left;
height: 22px;
width: 95px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 22px;
}
#navcontainer li a:hover
{
background: url(http://www.enhance.ie/inprogress/nac.../top_nav_2.jpg) no-repeat left top;
color: #000000;
}
#navbott{
height: 37px;
}
#bodyblock {
position:relative;
width:759px;
padding:0;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #34246B;
border-left-color: #34246B;
background-color: #FFFFFF;
background: url(http://www.enhance.ie/inprogress/nac...2_nav_back.gif) 0 0;
}
#l-col {
float:left;
width:147px;
}
#navlist_left {
width: 147px;
float: left;
line-height: 29px;
}
#navlist_left p {
font-size: 12px;
height: 29px;
}
#navlist_left ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
}
#navlist_left li {
margin: 0;
height: 29px;
}
#navlist_left a {
display: block;
background-image: url(http://www.enhance.ie/inprogress/nac...left_nav_1.gif);
background-repeat: no-repeat;
height: 29px;
line-height:29px;
}
#navlist_left a:link, #navlist a:visited {
text-decoration: none;
font-size: 12px;
text-align: left;
height: 29px;
}
#navlist_left a:hover, #navlist a:active {
background-image: url(http://www.enhance.ie/inprogress/nac...left_nav_2.gif);
background-repeat: no-repeat;
color: #0099CC;
height: 29px;
}
#cont {
width:611px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
float: left;
}
#ftr {
height:25px;
margin:0;
width: 762px;
float: left;
}
/* Presentation Stylesheet */
h3, p {
margin:0;
padding:15px;
}
h4 {
margin:0;
padding: 5px 0;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000066;
text-decoration: none;
}
.header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #0099CC;
text-decoration: none;
}
.text_bigger {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000066;
text-decoration: none;
}
.text_left_nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #34246B;
text-decoration: none;
padding-left: 18px;
display: block;
line-height: -34px;
}
#navbott img,#l-col img{display:block;}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
</style>
</head>
<body>
<div id="outer">
<div id="hdr"><a href="#"><img src="http://www.enhance.ie/inprogress/nac...logo_solid.gif" width="167" height="72" border="0" /></a><img src="http://www.enhance.ie/inprogress/nac...ress_solid.gif" width="594" height="72" /></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" style="font-size: 9px; text-align:center;">ABOUT US </a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">LOCATION</a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">OPENING TIMES</a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">PRICES</a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">SPECIAL OFFERS</a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">BOOKINGS</a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">EVENTS</a></li>
<li><a href="#" style="font-size: 9px; text-align:center;">CAFÉ</a></li>
</ul>
</div>
<div id="navbott"><img src="http://www.enhance.ie/inprogress/nac...2_nav_bott.jpg" alt=" " width="761" height="37" />
</div>
<div id="bodyblock">
<div id="l-col"><img src="http://www.enhance.ie/inprogress/nac.../lev_2_who.jpg" alt="Who are you?" width="147" height="31" />
<div id="navlist_left">
<ul>
<li><a href="#" class="text_left_nav">Day Out </a></li>
<li><a href="#" class="text_left_nav">Group</a></li>
<li><a href="#" class="text_left_nav">Birthday Party </a></li>
</ul>
<img src="http://www.enhance.ie/inprogress/nac...lev_2_what.jpg" alt="What are you looking for?" width="147" height="39" />
<ul>
<li><a href="#" class="text_left_nav">Wild Waters</a></li>
<li><a href="#" class="text_left_nav">Competition Pool </a></li>
<li><a href="#" class="text_left_nav">Gym</a></li>
<li><a href="#" class="text_left_nav">Swimming Lessons </a></li>
<li><a href="#" class="text_left_nav">Membership</a></li>
</ul>
<img src="http://www.enhance.ie/inprogress/nac...2_features.jpg" alt="Features" width="147" height="39" />
<ul>
<li><a href="#" class="text_left_nav">Accessibility</a></li>
<li><a href="#" class="text_left_nav">Virtual Tour </a></li>
<li><a href="#" class="text_left_nav">Finnie's Kids Club </a></li>
</ul>
</div>
</div>
<div id="cont">
<p class="header">Groups</p>
<p class="text">The National Aquatic Centre offers hours of fun in Europe’s
largest indoor water park and pool complex where the weather is tropical
all year round.</p>
<p class="text">We also offer host a wide variety of activities in the competition
pool such as international swimming and diving training camps. Our Aquatics
Department can organise accommodation and trasportation as part of an
integrated package.</p>
<p class="text"><strong>Our Leisure Pool offers extreme thrills, raging
water adventures and loads of fun. Rides include:</strong></p>
<div>
<ul>
<li class="text">Master Blaster (Water roller coaster)</li>
<li class="text">Flow Rider (Surfing Machine)</li>
<li class="text">Wave Pool</li>
<li class="text">Lazy River</li>
<li class="text">Bubble Pool</li>
<li class="text">Pirates Ship</li>
<li class="text">Dark Hole Flume (water slide)</li>
<li class="text">Green Giant Flume</li>
</ul>
</div>
<p class="text">Our Competition and Diving Pools meet International competition
standards, and is open to everybody. With a 50m pool, diving pool with
moveable floors and a comprehensive Academy of Swimming, the competition
waters in the NAC must be seen.</p>
<p class="text"> We are one of the biggest attractions for schools, social
clubs and youth clubs. Providing a wide range of programmes and activites,
why not contact our sales office for information on prices and availability.
You need to have a group of over 20 to make a group booking. A special
group rate of €8.50 per person applies.</p>
<div>
<ul>
<li class="text"> Swim hats are compulsory.</li>
<li class="text">Under eights accompanied by adults. </li>
<li class="text">Max of two kids with one adult. </li>
<li class="text">€1 coin for lockers - refundable. </li>
<li class="text">Safety briefing will be given to kids on arrival. </li>
</ul>
</div>
<p class="text_bigger"><strong>To book, please phone: 01 64 64 364 or 01
64 64 367</strong><br />
</p>
</div>
<div class="clearer"></div>
</div>
<div id="ftr"><img src="http://www.enhance.ie/inprogress/nac...bott_solid.gif" width="761" height="25" /></div>
</div>
</body>
</html>
Note that your navbott img is 1 pixel out. You will need to redraw it to match the layout below.
Hope that helps.
Paul
Getting nowhere fast! Please help.
Bookmarks