HTML CSS Code not working, browser probs!

nickybutler's Avatar, Join Date: Aug 2008
Newbie Member
Hi there everyone, i have the website www.tramoresurfshop.com, as you can see it is not very good for spiders/crawlers/robots due to the fact that i made site using photoshop and spliced the images, thus giving me tables and lots of images and not very much text!

Now im redesigning to make the site more efficient on search engines, by coding the site using html and css and dropping the tables. The new design can be seen here httP://tramoresurfshop.ismysite.co.uk/. Though my site came out perfect in IE7 when i view it in opera and mozilla firefox 3.0 numerous problems occured and the format that the site has in IE7 is lost, can someone please tell me if i have a problem with my code or what i need to do.

Thanks nick!

<qoute>
the index file:

HTML Code:
<!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>

<link href="images\favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>Tramore Surf Shop</title>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- Search Engine Data -->

<META name="title" content="Tramore Surf Shop" />
<META name="description" content="Tramore Surf Shop is an Irish Surf Shop located in 
Tramore, Waterford, Ireland and sells surfboards, wetsuits, kayaks and skateboards."/>
<META name="keywords" content="tramore, waterford, ireland, surfing, surf, shop, surfboards, bodyboards, kayaks, wetsuits, 
surf lessons, surfing lessons, learn to surf, webcam, surf report, ding repair, cafe, skatepark, 
skate shop, surf shop, surfing shop, surf news, irish surf news"/>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="homePage">
<div class="container">
<h1><img src="images/logo0000.jpg" alt="Tramore Surf Shop" title="Tramore Surf Shop" /></h1>
<dl id="headMenu">
<dt>Site Areas</dt>
<dd class="first"><a href="">Forum</a></dd>
<dd><a href="">Gallery</a></dd>
<dd><a href="">Team</a></dd>
<dd><a href="">Surf Lessons</a></dd>
<dd class="last"><a href="">Skate Park</a></dd>
</dl>
</div>
<dl id="mainMenu">
<dt>Main Menu</dt>
<dd class="first"><a href="">Home</a></dd>
<dd><a href="">shop</a></dd>
<dd><a href="">news</a></dd>
<dd><a href="">cafe</a></dd>
<dd><a href="">ding repair</a></dd>
<dd><a href="">about us</a></dd>
<dd class="last"><a href="">contact us</a></dd>
</dl>
<div class="outerBox">
<div class="innerBox">
<img src="images/home0000.jpg" alt="Tramore Surf Shop - Surf, Skate, Street, Paddle &amp; Kite" title="Tramore Surf Shop - Surf, Skate, Street, Paddle &amp; Kite" id="homepageGraphic" />
<div class="container">
<div id="liveCam">
<a href="" title="Live Cam &amp; Surf Report"><img src="images/camera00.jpg" alt="Live Cam &amp; Surf Report" /></a>
</div>
<div id="siteNews">
<h2>Latest News</h2>
<h3>Coming Soon!</h3>
<p>
Coming Soon!
</p>
<h3>Coming Soon!</h3>
<p>
Coming Soon!
</p>
<p id="newsFooter">
Brought to you by Tramore Surf Shop &amp; ISA
</p>
</div>
</div>
<div id="aboutSite">
<p>
Tramore Surf Shop is located in the T-Bay Surf Centre, on the beach in Tramore, Waterford, Ireland. We specialise in selling surf hardware to the local surf community. We stock all main brands in Surfboards, Wetsuits, Kayaks and Skateboards. Our dedicated staff have over 20 years experience in surfing and are here to help you with all your needs. Please drop in and check out our little friendly beach side surf shop and enjoy a nice cuppa tea or coffee from the cafe.
</p>
</div>
<div class="container">
<a href="" title="Gift Vouchers" id="voucherImage"><img src="images/vouchert.jpg" alt="Gift Vouchers" /></a>
<a href="" title="Surf Report" id="reportImage"><img src="images/report00.jpg" alt="New surfboards for sale" /></a>
<a href="" title="Online Shop" id="shopImage"><img src="images/shop0000.jpg" alt="Online Shop" /></a>
</div>
</div>
</div>
<dl id="footMenu">
<dt>Other Site Areas</dt>
<dd class="first"><a href=""> Discussion Forum</a></dd>
<dd><a href="">Team Riders</a></dd>
<dd><a href="">Photo and Video Gallery</a></dd>
<dd><a href="">Surfing Lessons</a></dd>
<dd><a href="">Skate Park</a></dd>
<dd class="last"><a href="">Tramore Information &amp; Safety</a></dd>
</dl>
<p id="copyright">
Copyright Tramore Surf Shop 2008 - All rights reserved
</p>
</div>
</body>
</html>
<!-- This document saved from [url]http://forester.ezri.mine.nu/surfshop/[/url] -->









The CSS File


HTML Code:
body {
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.76em;
background-color: #2a2a2a;
color: #eeeeee;
background-image: url('images/back0000.jpg');
}

h1 {
float: left;
margin: 0;
}

a {
color: #1a6cbf;
text-decoration: none;
}

a:hover {
color: #ffffff;
text-decoration: underline;
}

a img {
border: 0;
}

dl, dl dd {
margin: 0;
padding: 0;
}

dl dt {
position: absolute;
left: -200em;
}

div.container {
overflow: hidden;
width: 100%;
}

div.outerBox {
border: 1px solid #aaaaaa;
padding: 0.5em;
}

div.innerBox {
border: 1px solid #666666;
padding: 0.5em;
}

div#homePage {
width: 63.2em;
margin: 0 auto;
}

dl#headMenu {
float: right;
margin-top: 2.4em;
font-size: 0.96em;
}

dl#headMenu dd {
float: left;
}

dl#headMenu dd a {
display: block;
padding: 0 0.5em;
border-right: 1px solid #aaaaaa;
}

dl#headMenu dd.last a {
border-right: 0;
padding-right: 0;
}

dl#mainMenu {
width: 100%;
overflow: hidden;
margin: 0.5em 0;
}

dl#mainMenu dd {
width: 14.27%;
float: left;
}

dl#mainMenu dd a {
display: block;
text-align: center;
font-weight: bold;
color: #ffffff;
border: 1px solid #666666;
background-color: #212121;
padding: 0.16em;
margin: 0 0.25em;
text-transform: lowercase;
}

dl#mainMenu dd a:hover {
color: #eeeeee;
border: 1px solid #eeeeee;
text-decoration: none;
background-color: #1a6cbf;
}

dl#mainMenu dd.first a {
margin-left: 0;
}

dl#mainMenu dd.last a {
margin-right: 0;
}

div#liveCam {
float: left;
width: 27em;
margin-top: 0.5em;
}

div#siteNews {
position: relative;
background-color: #212121;
margin-left: 27.2em;
margin-top: 0.5em;
border: 1px solid #666666;
height: 20.7em;
padding: 0.5em;
}

div#siteNews h2 {
margin: 0;
}

p#newsFooter {
position: absolute;
bottom: 0.5em;
right: 0.5em;
font-weight: bold;
margin: 0;
color: #666666;
font-size: 0.96em;
}

div#aboutSite {
margin: 0.25em 0;
border: 1px solid #666666;
background-color: #212121;
padding: 0 0.5em;
}

dl#footMenu {
width: 100%;
overflow: hidden;
text-align: center;
margin-top: 0.4em;
}

dl#footMenu dd {
display: inline;
}

dl#footMenu dd a {
padding: 0 0.5em;
border-right: 1px solid #aaaaaa;
font-size: 1.1em;
}

dl#footMenu dd.last a {
white-space: nowrap;
border-right: 0;
}

p#copyright {
color: #e3a866;
text-align: center;
}

#homepageGraphic {
display: block;
margin: 0 auto;
}

#voucherImage, #reportImage, #shopImage {
display: block;
float: left;
padding-right: 0.2em;
height: 152px;
background-position: bottom left;
background-repeat: no-repeat;
}

#voucherImage {
background-image: url('images/vouchers.jpg');
}

#reportImage {
background-image: url('images/report_s.jpg');
}

#shopImage {
padding-right: 0;
background-image: url('images/shop_sha.jpg');
}


</qoute>

Last edited by shabbir; 5Aug2008 at 13:00.. Reason: Code block
0
kosstr12's Avatar, Join Date: Aug 2008
Newbie Member
Tell us what the problems are. I'm not psychic.