HTML CSS Code not working, browser probs!

Discussion in 'Web Design, HTML And CSS' started by nickybutler, Aug 5, 2008.

  1. nickybutler

    nickybutler New Member

    Joined:
    Aug 5, 2008
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    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:
    <!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:
    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 a moderator: Aug 5, 2008
  2. kosstr12

    kosstr12 New Member

    Joined:
    Aug 13, 2008
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Tell us what the problems are. I'm not psychic.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice