SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another on CSS and Firefox

    Having happily taken Paul's advice and switched to a fixed width design, it seemed like I was getting there. Save for some text spacing issues and horizontal placement of buttons (neither issue fully addressed so far) my design looks fine in IE6 and Opera7. I guess I should have tried Mozilla Firefox earlier. Virtually everything is missing. Where, oh where have I gone wrong?

    CSS Code:
    html, body {
    background-color: #50519d;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    }
    h1, h2, h3, h4 {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    clear: both;
    }
    div#fullwrap {
    width: 750px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 10px;
    }

    div#header {
    position: absolute;
    width: 750px;
    height: 100px;
    top: 20px;
    left: 0px;
    text-align: center;
    }

    #header img {
    width: 712px;
    height: 70px;
    border-style: ridge;
    border-color: #e6edff;
    border-width: 5px;
    }
    .thinline {
    line-height: 1.2em;
    }

    div#columns {
    position: relative;
    width: 750px;
    top: 110px;
    background-color: #fffae6;
    }

    div#main {
    float: left;
    width: 480px;
    top: 0px;
    left: 0px;
    background-color: #ffe480;
    padding: 10px;
    }

    div#main1 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }

    div#main2 {text-align: left;}

    div#main2-sample1, #main2-sample2, #main2-sample3 {
    float: left;
    width: 130px;
    height: 205px;
    padding-top: 15px;
    background-color: #ffffff;
    border: 1px solid #000000;
    text-align: center;
    margin-left: 2%;
    margin-bottom: 5px;
    display:inline;/*ie fix*/
    }
    div#main2-sample2 {
    background color: #ffc2ff;
    }
    div#main2-sample3 {
    background color: #d6ffff;
    }
    div#main3 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    div#main3 ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: center;
    }
    div#main3 li {
    list-style-type: none;
    display: inline;
    }
    div#main3 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#main3 lia:link {
    color: #000:
    }
    div#main3 lia:visited {
    color: #CCC;
    }
    div#main3 lia:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    div#main4 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    div#main5 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    clear: both;
    }

    div#nav {
    float: right;
    width: 210px;
    top: 0px;
    left: 490px;
    padding: 5px;
    background-color: #fffae6;
    }

    div#nav ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: left;
    }
    div#nav li {
    list-style-type: none;
    }
    div#nav li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#nav lia:link {
    color: #000:
    }
    div#nav lia:visited {
    color: #CCC;
    }
    div#nav lia:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }

    div#footer {
    position: relative;
    width: 720px;
    clear both;
    margin-top: 100px;
    padding: 15px;
    background-color: #fffae6;
    }

    img#flowers{
    float: right;
    width: 200px;
    height:280px;
    margin:5px;
    }

    img#fwlogo{
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 30px;
    }
    img#ftdlogo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 15px;
    }
    img#fpologo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 30px;
    }

    img#main2_im1{
    width: 100px;
    height: 116px;
    }
    img#main2_im2{
    width: 100px;
    height: 116px;
    }
    img#main2_im3{
    width: 100px;
    height: 116px;
    }


    /*CSS for button divs*/
    div#buttonA {
    margin-top: 15px;
    margin-bottom: 30px;
    }
    div#buttonb, div#buttonc, div#buttond, div#buttone {
    float: left;
    margin-top: 15px;
    margin-left: 2%;
    margin-bottom: 30px;
    }
    div#buttone {
    clear: both;
    }
    div#buttonA ul, div#bottonc ul, div#bottond ul, div#bottone ul, {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 30px;
    }
    div#buttonb ul {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 30px;
    }
    div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    list-style-type: none;
    height: 30px;
    margin: 5px;
    text-align:center;
    }
    div#buttonA li {
    width: 180px;
    }
    div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    width: 400px;
    }
    div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a {
    text-decoration: none;
    display: block;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:link, div#buttonb li a:link, div#buttonc li a:link, div#buttond li a:link, div#buttone li a:link {
    color: #000000;
    font-weight: bold;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited {
    color: #000000;
    font-weight: normal;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #414e80;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }
    div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #717a9f;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }



    HTML:
    <!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>Flower delivery in Canada by Floraworld, the all-Canadian online order service</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Description" content="Flower delivery in Canada and beyond. Order online or by phone (1-888-ROSE-888) to send flowers through FloraWorld, a Canadian company with a proven network of local florists affiliated with FTD, Teleflora and Grower Direct. Same day delivery on early orders. Aeroplan points or CAA discounts on eligible orders. Fresh flowers, roses, arrangements and gifts. Satisfaction Guaranteed" />
    <meta name="Keywords" content="Flower delivery in Canada, online order, 1-888-ROSE-888, send flowers, Canadian, florist, FTD, Teleflora, Grower Direct, Aeroplan, CAA, roses, arrangements, gifts" />
    <meta name="Robots" content="all" />
    <link rel="stylesheet" type="text/css" href="floraca-style.css" />
    </head>

    <body>
    <div id="fullwrap">
    <div id="header"><img alt="floraworld 1-888-rose-888" src="images/FWca_header3.gif" />
    </div>

    <div id="columns">
    <div id="main">
    <div id="main1">
    <h2>Flower Delivery in Canada</h2>
    <h3>Let Floraworld Deliver Your Floral Message</h3>
    <img id="flowers" src="images/covermain.jpg" alt="flowers delivered" />

    <p>Send flowers<br />
    across Canada, the USA, and worldwide<br />
    through our network of selected<br />
    local FTD and Teleflora florists.</p>
    <p>Floraworld offers/p>
    <p>&nbsp &nbsp -- easy, secure online ordering</p>
    <p>&nbsp &nbsp -- fast, reliable floral delivery<br />
    &nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p>
    <p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br />
    &nbsp &nbsp &nbsp &nbsp with every eligible order</p>
    <p>&nbsp &nbsp -- the freshest roses and other <br />
    &nbsp &nbsp &nbsp &nbsp cut flowers in exquisite bouquets <br />
    &nbsp &nbsp &nbsp &nbsp and arrangements</p>
    <br />
    <br />
    <p>Select one of the Favourites on this page or<br />
    see a wider selection in our main catalogue.</p>
    <br />
    <br />
    </div>

    <div id="main2">
    <h2>Popular Selections for Delivery in Canada</h2>
    <div id="main2-sample1"><img id="main2_im1" src="images/tnB18-3226.jpg" alt="FTD Basket of Stars Bouquet" />
    <p>Basket of Stars Bouquet</p>
    <p>$73.95 (CDN)</p>
    </div>

    <div id="main2-sample2"><img id="main2_1m2" src="images/tnB20-3266.jpg" alt="FTD Pink Opulence Bouquet" />
    <p>Pink Opulence Bouquet</p>
    <p>$69.95 (CDN)</p>
    </div>

    <div id="main2-sample3"><img id="main2_im3" src="images/tnC4-3085.jpg" alt="FTD Many Thanks Bouquet" />
    <p>Many Thanks Bouquet</p>
    <p>$112.95 (CDN)</p>
    </div>

    <br />

    <div id="buttonb">
    <ul>
    <li><a href="link1.html">View the Entire FloraWorld Catalogue</a></li>
    </ul>
    </div>
    <br />
    <br />
    </div>

    <div id="main3">
    <h2>Canadian Flower Delivery</h2>
    <h3>Favourite Places to Send Flowers in Canada</h3>
    <ul>
    <li><a href="link1.html">Victoria, British Columbia</a></li>
    <li><a href="link2.html">Vancouver BC</a></li>
    <li><a href="link3.html">Kelowna BC</a></li>
    </ul>
    <ul>
    <li><a href="link4.html">Edmonton, Alberta</a></li>
    <li><a href="link5.html">Calgary, Alberta</a></li>
    <li><a href="link6.html">Regina, Saskachewan</a></li>
    </ul>
    <ul>
    <li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
    <li><a href="link8.html">Winnipeg, Manitoba</a></li>
    <li><a href="link9.html">Toronto, Ontario</a></li>
    </ul>
    <ul>
    <li><a href="link10.html">Ottawa, Ontario</a></li>
    <li><a href="link11.html">Montreal, Quebec</a></li>
    <li><a href="link12.html">Moncton, New Brunswick</a></li>
    </ul>
    <ul>
    <li><a href="link13.html">Saint John, New Brunswick</a></li>
    <li><a href="link14.html">Halifax, Nova Scotia</a></li>
    <li><a href="link15.html">Charlottetown, PEI</a></li>
    </ul>
    <ul>
    <li><a href="link16.html">St. Johns, Newfoundland</a></li>
    <li><a href="link17.html">Yellowknife, NWT</a></li>
    <li><a href="link18.html">Whitehorse, Yukon</a></li>
    </ul>
    <ul>
    <li><a href="link19.html">All Other Canadian Locations</a></li>
    </ul>

    <div id="buttonc">
    <ul>
    <li><a href="link1.html">&nbsp &nbsp ORDER FLOWERS NOW &nbsp &nbsp</a></li>
    </ul>
    </div>
    </div>
    <br />
    <br />
    <br />
    <div id="main4">
    <br />
    <br />
    <h2>U.S.A. Flower Delivery</h2>
    <h3>Popular Places to Send Flowers in the United States</h3>
    <div id="buttond">
    <ul>
    <li><a href="link1.html">For Flower Delivery in the USA, CLICK HERE</a></li>
    </ul>
    </div>
    </div>

    <div id="main5">
    <br />
    <br />
    <h2>International Flower Delivery</h2>
    <h3>Popular Places to Send Flowers around the World</h3>
    <div id="buttone">
    <ul>
    <li><a href="link1.html">To Order Flowers for International Delivery, CLICK HERE</a></li>
    </ul>
    <br />
    <br />
    </div>
    </div>

    </div>

    <div id="nav">
    <br />
    <br />
    <img id="fwlogo" src="images/flora_logo.gif" alt="FloraWorld" />
    <br />
    <div id="buttonA">
    <ul>
    <li><a href="link1.html">Order Flowers Now</a></li>
    </ul>
    </div>

    <h4>Flower Occasions</h4>
    <ul>
    <li><a href="link31.html">Anniversary Flowers</a></li>
    <li><a href="link32.html">Birthday Flowers</a></li>
    <li><a href="link33.html">Congratulations Flowers</a></li>
    <li><a href="link34.html">Get Well Flowers</a></li>
    <li><a href="link35.html">New Baby Flowers</a></li>
    <li><a href="link36.html">Sympathy Flowers</a></li>
    <li><a href="link37.html">Funeral Flowers</a></li>
    <li><a href="link38.html">Christmas Arrangements</a></li>
    <li><a href="link39.html">Easter/Passover Flowers</a></li>
    <li><a href="link40.html">"I Love You" Flowers</a></li>
    <li><a href="link41.html">Mothers Day Flowers</a></li>
    <li><a href="link42.html">Valentines Day Flowers</a></li>
    </ul>
    <br />
    <img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" />
    <img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" />
    <br />
    <h4>Useful Flower Facts<br /> & More</h4>
    <ul>
    <li><a href="link1.html">Flower Care</a></li>
    <li><a href="link2.html">Flower Holidays</a></li>
    <li><a href="link3.html">Meaning of Roses and Flowers</a></li>
    <li><a href="link5.html">Monthly Flower Charts</a></li>
    <li><a href="link6.html">Monthly Birth Stones</a></li>
    <li><a href="link8.html">Flower Reminder Service</a></li>
    </ul>
    <br />
    <br />
    </div>
    </div>
    <div id="footer">
    <p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp &nbsp |&nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp; Site Map &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp|&nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp Contact Us</p>
    </div>
    </div>
    </body>
    </html>


    I see from recent posts that I am not the only one having Firefox problems.
    I now realize the value of testing early in Firefox and hereby undertake to change my ways
    Thanks for any and all help.
    regards,
    Cam

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ehm, nice long code, lol the link to the real site would be much more helpful...

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I apologize for the long batch of code; especially to those on dial-up.
    If I had a site to post it on, don't you think I would have done so?
    Happily, that will be rectified within the next few weeks.
    Cam

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well dial-up is not the problem, reading it IS

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    overall messy code

    well your code is all quite messy, if it was correct it would not display right things in any browser... well i corrected it so it works in mozilla, but the thing is you could have used validator and done it yourself.. AND it is completely different in every browser so you will have a lot work to do... and use validator next time please...

    here goes the css code, just copy it
    HTML Code:
    body {
    background-color: #50519d;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    }
    h1, h2, h3, h4 {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    clear: both;
    }
    div#fullwrap {
    width: 750px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 10px;
    }
    
    div#header {
    position: absolute;
    width: 750px;
    height: 100px;
    top: 20px;
    left: 0px;
    text-align: center;
    }
    
    #header img {
    width: 712px;
    height: 70px;
    border-style: ridge;
    border-color: #e6edff;
    border-width: 5px;
    }
    .thinline {
    line-height: 1.2em;
    }
    
    div#columns {
    position: relative;
    width: 750px;
    top: 110px;
    background-color: #fffae6;
    }
    
    div#main {
    float: left;
    width: 480px;
    top: 0px;
    left: 0px;
    background-color: #ffe480;
    padding: 10px;
    }
    
    div#main1 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    
    div#main2 {text-align: left;}
    
    div#main2-sample1, #main2-sample2, #main2-sample3 {
    float: left;
    width: 130px;
    height: 205px;
    padding-top: 15px;
    background-color: #ffffff;
    border: 1px solid #000000;
    text-align: center;
    margin-left: 2%;
    margin-bottom: 5px;
    display:inline;/*ie fix*/
    }
    div#main2-sample2 {
    background-color: #ffc2ff;
    }
    div#main2-sample3 {
    background-color: #d6ffff;
    }
    div#main3 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    div#main3 ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: center;
    }
    div#main3 li {
    list-style-type: none;
    display: inline;
    }
    div#main3 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#main3 li a:link {
    color: #000;
    }
    div#main3 li a:visited {
    color: #CCC;
    }
    div#main3 li a:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    div#main4 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    div#main5 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    clear: both;
    }
    
    div#nav {
    float: right;
    width: 210px;
    top: 0px;
    left: 490px;
    padding: 5px;
    background-color: #fffae6;
    }
    
    div#nav ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: left;
    }
    div#nav li {
    list-style-type: none;
    }
    div#nav li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#nav li a:link {
    color: #000;
    }
    div#nav li a:visited {
    color: #CCC;
    }
    div#nav li a:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    
    div#footer {
    position: relative;
    width: 720px;
    clear: both;
    margin-top: 100px;
    padding: 15px;
    background-color: #fffae6;
    }
    
    img#flowers{
    float: right;
    width: 200px;
    height:280px;
    margin:5px;
    }
    
    img#fwlogo{
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 30px;
    }
    img#ftdlogo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 15px;
    }
    img#fpologo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 30px;
    }
    
    img#main2_im1{
    width: 100px;
    height: 116px;
    }
    img#main2_im2{
    width: 100px;
    height: 116px;
    }
    img#main2_im3{
    width: 100px;
    height: 116px;
    }
    
    
    /*CSS for button divs*/
    div#buttonA {
    margin-top: 15px;
    margin-bottom: 30px;
    }
    div#buttonb, div#buttonc, div#buttond, div#buttone {
    float: left;
    margin-top: 15px;
    margin-left: 2%;
    margin-bottom: 30px;
    }
    div#buttone {
    clear: both;
    }
    div#buttonA ul, div#bottonc ul, div#bottond ul, div#bottone ul {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 30px;
    }
    div#buttonb ul {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 30px;
    }
    div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    list-style-type: none;
    height: 30px;
    margin: 5px;
    text-align:center;
    }
    div#buttonA li {
    width: 180px;
    }
    div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    width: 400px;
    }
    div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a {
    text-decoration: none;
    display: block;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:link, div#buttonb li a:link, div#buttonc li a:link, div#buttond li a:link, div#buttone li a:link {
    color: #000000;
    font-weight: bold;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited {
    color: #000000;
    font-weight: normal;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #414e80;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }
    div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #717a9f;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Xerxos... thanks for your patience. I will set your code side-by-side with minbe so I can learn from my mistakes. I did try to run the css through Top Style 3, but must be doing something wrong, I couldn't get it to tell me anything that I understood. I will try it again and check around for other validators. FYI, my code (messy as it certainly is) looked rock solid in both IE6 and Opera7, and at first glance yours does the same. I can see that there is still some fiddling to do at the bottom of the page so that the right side column extends to the bottom and the footer is constrained to the same width as the header and body. That will be my morning task... now I"m off to pick up my daughter from soccer practise.
    I thank you once again for your work; it's given me a real leap forward.
    regards,
    Cam

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well just launch the on-site validator provided by W3C... the problem was mainly because of the mis-types... like color: #000: instead of color: #000; and so on... and the important one was with the clear: both; in the footer

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Xerxos..
    Thanks for the tip re:W3C validator. I now have it bookmarked.
    I'm glad you mentioned the color: 000; and clear: both; glitches.
    I caught all the other typos on my first pass through old/new code
    last night but had missed those ones.
    Can you offer any insight into the remaining Firefox anomaly; i.e. in Firefox the fotter does not clear but overlaps the bottom of the last content DIV and the right side DIV comes up short. These problems do not show in IE6 or Opera7. Thanks again... Cam

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah sure, just give me some time (I have to go away now)... well, Paul will maybe answer the questions before I do

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi camm,

    Do you have the updated code you are using so we can work on the same version

    When you post your code, post it inside code tags :
    e.g.
    (code)
    code goes here
    (/code)

    except change those round brackets for the big straight brackets "["

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, Paul ...here we go:

    first, the CSS
    Code:
    body {
        background-color: #50519d;
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    		text-align: center;
    		margin: 0;
        padding: 0;
    }
    h1, h2, h3, h4 {
    	 text-align: center;
    	margin-top: 0px;
    	padding-top: 0px;
    	clear: both;
    }
    div#fullwrap {
      width: 750px;
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	top: 10px;
    }
    div#header {
       position: absolute;
       width: 750px;
       height: 100px;
       top: 20px;
       left: 0px;
       text-align: center;
    }
    #header img {
    width: 712px;
    height: 70px;
    border-style: ridge;
    border-color: #e6edff;
    border-width: 5px;
    }
    .thinline {
    line-height: 1.2em;
    }
    div#columns {
    position: relative;
    width: 750px;
    top: 110px;
    background-color: #fffae6;
    }
    div#main {
    	float: left;
      width: 480px;
      top: 0px;
      left: 0px;
      background-color: #ffe480;
      padding: 10px;
    }
    div#main1 {
        margin-left: 1px;
        margin-top: 1px;
        margin-right: 1px;
        margin-bottom: 1px;
    }
    div#main2 {text-align: left;}
    div#main2-sample1, #main2-sample2, #main2-sample3 {
    float: left;
    width: 130px;
    height: 205px;
    padding-top: 15px;
    background-color: #ffffff;
    border: 1px solid #000000;
    text-align: center;
    margin-left: 2%;
    margin-bottom: 5px;
    display:inline;/*ie fix*/
    }
    div#main2-sample2 {
    background color: #ffc2ff;
    }
    div#main2-sample3 {
    background color: #d6ffff;
    }
    div#main3 {
       margin-left: 1px;
       margin-top: 1px;
       margin-right: 1px;
       margin-bottom: 1px;
    		}
    div#main3 ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: center;
    }
    div#main3 li {
    list-style-type: none;
    display: inline;
    }
    div#main3 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#main3 li a:link {
    color: #000;
    }
    div#main3 li a:visited {
    color: #CCC;
    }
    div#main3 li a:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    div#main4 {
       margin-left: 1px;
       margin-top: 1px;
       margin-right: 1px;
       margin-bottom: 1px;
    }
    div#main5 {
       margin-left: 1px;
       margin-top: 1px;
       margin-right: 1px;
       margin-bottom: 1px;
       clear: both;
    }
    div#nav {
    	 float: right;
       width: 210px;
       top: 0px;
       left: 490px;
       padding: 5px;
       background-color: #fffae6; 
    }
    div#nav ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: left;
    }
    div#nav li {
    list-style-type: none;
    }
    div#nav li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#nav li a:link {
    color: #000;
    }
    div#nav li a:visited {
    color: #CCC;
    }
    div#nav li a:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    div#footer {
       position: relative;
       width: 720px;
       clear: both;
       margin-top: 100px;
       padding: 15px;
    	 background-color: #fffae6;
    }
    img#flowers{
    float: right;
    width: 200px;
    height:280px;
    margin:5px;
    }
    img#fwlogo{
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 30px;
    }
    img#ftdlogo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 15px;
    }
    img#fpologo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 30px;
    }
    img#main2_im1{
    width: 100px;
    height: 116px;
    }
    img#main2_im2{
    width: 100px;
    height: 116px;
    }
    img#main2_im3{
    width: 100px;
    height: 116px;
    }
    /*CSS for button divs*/
    div#buttonA {
    margin-top: 15px;
    margin-bottom: 30px;
    }
    div#buttonb, div#buttonc, div#buttond, div#buttone {
    float: left;
    margin-top: 15px;
    margin-left: 2%;
    margin-bottom: 30px;
    }
    div#buttone {
    clear: both;
    }
    div#buttonA ul, div#bottonc ul, div#bottond ul, div#bottone ul, {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 30px;
    }
    div#buttonb ul {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 30px;  
    }
    div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    list-style-type: none;
    height: 30px;
    margin: 5px;
    text-align:center;
    }
    div#buttonA li {
    width: 180px;
    }
    div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    width: 400px;
    }
    div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a {
    text-decoration: none;
    display: block;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:link, div#buttonb li a:link, div#buttonc li a:link, div#buttond li a:link, div#buttone li a:link {
    color: #000000;
    font-weight: bold;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited {
    color: #000000;
    font-weight: normal;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #414e80;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }
    div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #717a9f;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }
    and here is the html:
    Code:
    <!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>Flower delivery in Canada by Floraworld, the all-Canadian online order service</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Description" content="Flower delivery in Canada and beyond. Order online or by phone (1-888-ROSE-888) to send flowers through FloraWorld, a Canadian company with a proven network of local florists affiliated with FTD, Teleflora and Grower Direct.  Same day delivery on early orders. Aeroplan points or CAA discounts on eligible orders. Fresh flowers, roses, arrangements and gifts. Satisfaction Guaranteed" />
    <meta name="Keywords" content="Flower delivery in Canada, online order, 1-888-ROSE-888, send flowers, Canadian, florist, FTD, Teleflora, Grower Direct, Aeroplan, CAA, roses, arrangements, gifts" />
    <meta name="Robots" content="all" />
    <link rel="stylesheet" type="text/css" href="floraca-style.css" />
    </head>
    
    <body>
    <div id="fullwrap">
    <div id="header"><img alt="floraworld 1-888-rose-888" src="images/FWca_header3.gif" />
    </div>
    
    <div id="columns">
    <div id="main">
    <div id="main1">
    <h2>Flower Delivery in Canada</h2>
    <h3>Let Floraworld Deliver Your Floral Message</h3>
    <img id="flowers" src="images/covermain.jpg" alt="flowers delivered" />
    
    <p>Send flowers<br />
    across Canada, the USA, and worldwide<br />
    through our network of selected<br />
    local FTD and Teleflora florists.</p>
    <p>Floraworld offers:</p>
    <p>&nbsp &nbsp -- easy, secure online ordering</p>
    <p>&nbsp &nbsp -- fast, reliable floral delivery<br />
    &nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p>
    <p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br />
    &nbsp &nbsp &nbsp &nbsp with every eligible order</p>
    <p>&nbsp &nbsp -- the freshest roses and other <br />
    &nbsp &nbsp &nbsp &nbsp cut flowers in exquisite bouquets <br />
    &nbsp &nbsp &nbsp &nbsp and arrangements</p>
    <br />
    <br />
    <p>Select one of the Favourites on this page or<br />
    see a wider selection in our main catalogue.</p>				
    <br />
    <br />
    </div>
    
    <div id="main2">
    <h2>Popular Selections for Delivery in Canada</h2>
    <div id="main2-sample1"><img id="main2_im1" src="images/tnB18-3226.jpg" alt="FTD Basket of Stars Bouquet" />
    <p>Basket of Stars Bouquet</p>
    <p>$73.95 (CDN)</p>
    </div>
    
    <div id="main2-sample2"><img id="main2_1m2" src="images/tnB20-3266.jpg" alt="FTD Pink Opulence Bouquet" />
    <p>Pink Opulence Bouquet</p>
    <p>$69.95 (CDN)</p>
    </div>
    
    <div id="main2-sample3"><img id="main2_im3" src="images/tnC4-3085.jpg" alt="FTD Many Thanks Bouquet" />
    <p>Many Thanks Bouquet</p>
    <p>$112.95 (CDN)</p>
    </div>
    
    <br />
    
    <div id="buttonb">
    <ul>
    <li><a href="link1.html">View the Entire FloraWorld Catalogue</a></li>
    </ul>
    </div>
    <br />
    <br />
    </div>
    
    <div id="main3">
    <h2>Canadian Flower Delivery</h2>
    <h3>Favourite Places to Send Flowers in Canada</h3>
    <ul>
    <li><a href="link1.html">Victoria, British Columbia</a></li>
    <li><a href="link2.html">Vancouver BC</a></li>								
    <li><a href="link3.html">Kelowna BC</a></li>
    </ul>
    <ul>
    <li><a href="link4.html">Edmonton, Alberta</a></li>
    <li><a href="link5.html">Calgary, Alberta</a></li>
    <li><a href="link6.html">Regina, Saskachewan</a></li>
    </ul>
    <ul>
    <li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
    <li><a href="link8.html">Winnipeg, Manitoba</a></li>
    <li><a href="link9.html">Toronto, Ontario</a></li>
    </ul>
    <ul>
    <li><a href="link10.html">Ottawa, Ontario</a></li>
    <li><a href="link11.html">Montreal, Quebec</a></li>
    <li><a href="link12.html">Moncton, New Brunswick</a></li>
    </ul>
    <ul>
    <li><a href="link13.html">Saint John, New Brunswick</a></li>
    <li><a href="link14.html">Halifax, Nova Scotia</a></li>
    <li><a href="link15.html">Charlottetown, PEI</a></li>
    </ul>
    <ul>
    <li><a href="link16.html">St. Johns, Newfoundland</a></li>
    <li><a href="link17.html">Yellowknife, NWT</a></li>
    <li><a href="link18.html">Whitehorse, Yukon</a></li>
    </ul>						
    <ul>
    <li><a href="link19.html">All Other Canadian Locations</a></li>
    </ul>		
    
    <div id="buttonc">  
    <ul>
    <li><a href="link1.html">&nbsp &nbsp ORDER FLOWERS NOW &nbsp &nbsp</a></li>
    </ul>
    </div>
    </div>
    <br />
    <br />
    <br />
    <div id="main4">
    <br />
    <br />
    <h2>U.S.A. Flower Delivery</h2>
    <h3>Popular Places to Send Flowers in the United States</h3>
    <div id="buttond">
    <ul>
    <li><a href="link1.html">For Flower Delivery in the USA, CLICK HERE</a></li>
    </ul>
    </div>
    </div>
    
    <div id="main5">
    <br />
    <br />						
    <h2>International Flower Delivery</h2>
    <h3>Popular Places to Send Flowers around the World</h3>
    <div id="buttone">
    <ul>
    <li><a href="link1.html">To Order Flowers for International Delivery, CLICK HERE</a></li>
    </ul>
    <br />
    <br />
    </div>
    </div>	
    
    </div>
    
    <div id="nav">
    <br />
    <br />
    <img id="fwlogo" src="images/flora_logo.gif" alt="FloraWorld" />
    <br />
    <div id="buttonA">
    <ul>
    <li><a href="link1.html">Order Flowers Now</a></li>
    </ul>
    </div>
    
    <h4>Flower Occasions</h4>
    <ul>
    <li><a href="link31.html">Anniversary Flowers</a></li>
    <li><a href="link32.html">Birthday Flowers</a></li>
    <li><a href="link33.html">Congratulations Flowers</a></li>
    <li><a href="link34.html">Get Well Flowers</a></li>
    <li><a href="link35.html">New Baby Flowers</a></li>
    <li><a href="link36.html">Sympathy Flowers</a></li>
    <li><a href="link37.html">Funeral Flowers</a></li>
    <li><a href="link38.html">Christmas Arrangements</a></li>
    <li><a href="link39.html">Easter/Passover Flowers</a></li>
    <li><a href="link40.html">"I Love You" Flowers</a></li>
    <li><a href="link41.html">Mothers Day Flowers</a></li>
    <li><a href="link42.html">Valentines Day Flowers</a></li>	
    </ul>
    <br />
    <img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" />
    <img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" />
    <br />
    <h4>Useful Flower Facts<br /> & More</h4>
    <ul>
    <li><a href="link1.html">Flower Care</a></li>
    <li><a href="link2.html">Flower Holidays</a></li>
    <li><a href="link3.html">Meaning of Roses and Flowers</a></li>
    <li><a href="link5.html">Monthly Flower Charts</a></li>
    <li><a href="link6.html">Monthly Birth Stones</a></li>
    <li><a href="link8.html">Flower Reminder Service</a></li>
    </ul>
    <br />
    <br />				
    </div>
    </div>	
        <div id="footer">
    <p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp 
      &nbsp &nbsp &nbsp &nbsp &nbsp; Site Map &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp 
      &nbsp &nbsp &nbsp &nbsp &nbsp; Contact Us</p>
        </div>
    </div>
    </body>
    </html>
    To reiterate: having made corrections to the CSS following Xerxos' suggestions, I have identified the following outstanding problems:

    1. in Firefox the footer does not clear but overlaps the bottom of the last content DIV and the right side DIV comes up short.
    2. the two boxes don't seem to meet in Firefox.

    Neither of these problems show in IE6 or Opera7.

    As well (just so you know that I know ) I still haven't sorted out the centering of the buttons in the main column.
    Look forward to your input...
    regards,
    Cam

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've tidied the code up so that the footer stays below the content in firefox and the background encompasses the columns.

    I've also made ie6 put its right column next to the left column as it was miles below it. I've left the minor alterations for you to sort out

    Code:
    <!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>Flower delivery in Canada by Floraworld, the all-Canadian online order 
    service</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Description" content="Flower delivery in Canada and beyond. Order online or by phone (1-888-ROSE-888) to send flowers through FloraWorld, a Canadian company with a proven network of local florists affiliated with FTD, Teleflora and Grower Direct.  Same day delivery on early orders. Aeroplan points or CAA discounts on eligible orders. Fresh flowers, roses, arrangements and gifts. Satisfaction Guaranteed" />
    <meta name="Keywords" content="Flower delivery in Canada, online order, 1-888-ROSE-888, send flowers, Canadian, florist, FTD, Teleflora, Grower Direct, Aeroplan, CAA, roses, arrangements, gifts" />
    <meta name="Robots" content="all" />
    <style type="text/css">
    body {
    	background-color: #50519d;
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
     text-align: center;
     margin: 0;
    	padding: 0;
    }
    h1, h2, h3, h4 {
     text-align: center;
     margin-top: 0px;
     padding-top: 0px;
     clear: both;
    }
    div#fullwrap {
    	width: 750px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     margin-top: 20px;
    }
    div#header {
       width: 750px;
       height: 100px;
       text-align: center;
    }
    #header img {
    width: 712px;
    height: 70px;
    border-style: ridge;
    border-color: #e6edff;
    border-width: 5px;
    }
    .thinline {
    line-height: 1.2em;
    }
    div#columns {
    position: relative;
    width: 750px;
    margin-top: 10px;
    background-color: #fffae6;
    }
    div#main {
      float: left;
      width: 480px;
      background-color: #ffe480;
      padding: 10px;
    }
    div#main1 {
    	margin-left: 1px;
    	margin-top: 1px;
    	margin-right: 1px;
    	margin-bottom: 1px;
    }
    div#main2 {text-align: left;}
    div#main2-sample1, #main2-sample2, #main2-sample3 {
    float: left;
    width: 130px;
    height: 205px;
    padding-top: 15px;
    background-color: #ffffff;
    border: 1px solid #000000;
    text-align: center;
    margin-bottom: 5px;
    display:inline;/*ie fix*/
    }
    div#main2-sample2 {
    background color: #ffc2ff;
    }
    div#main2-sample3 {
    background color: #d6ffff;
    }
    div#main3 {
       margin-left: 1px;
       margin-top: 1px;
       margin-right: 1px;
       margin-bottom: 1px;
      }
    div#main3 ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: center;
    }
    div#main3 li {
    list-style-type: none;
    display: inline;
    }
    div#main3 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#main3 li a:link {
    color: #000;
    }
    div#main3 li a:visited {
    color: #CCC;
    }
    div#main3 li a:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    div#main4 {
       margin-left: 1px;
       margin-top: 1px;
       margin-right: 1px;
       margin-bottom: 1px;
    }
    div#main5 {
       margin-left: 1px;
       margin-top: 1px;
       margin-right: 1px;
       margin-bottom: 1px;
       clear: both;
    }
    div#nav {
      float: right;
       width: 210px;
       padding: 5px;
       background-color: #fffae6; 
    }
    div#nav ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    text-align: left;
    }
    div#nav li {
    list-style-type: none;
    }
    div#nav li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#nav li a:link {
    color: #000;
    }
    div#nav li a:visited {
    color: #CCC;
    }
    div#nav li a:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }
    div#footer {
       position: relative;
       width: 720px;
       clear: both;
       margin-top: 10px;
       padding: 15px;
     background-color: #fffae6;
    }
    img#flowers{
    float: right;
    width: 200px;
    height:280px;
    margin:5px;
    }
    img#fwlogo{
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 30px;
    }
    img#ftdlogo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 15px;
    }
    img#fpologo{
    margin-left: 25px;
    margin-right: 35px;
    margin-bottom: 30px;
    }
    img#main2_im1{
    width: 100px;
    height: 116px;
    }
    img#main2_im2{
    width: 100px;
    height: 116px;
    }
    img#main2_im3{
    width: 100px;
    height: 116px;
    }
    /*CSS for button divs*/
    div#buttonA {
    margin-top: 15px;
    margin-bottom: 30px;
    }
    div#buttonb, div#buttonc, div#buttond, div#buttone {
    float: left;
    margin-top: 15px;
    margin-left: 2%;
    margin-bottom: 30px;
    }
    div#buttone {
    clear: both;
    }
    div#buttonA ul, div#bottonc ul, div#bottond ul, div#bottone ul, {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 30px;
    }
    div#buttonb ul {
    margin: 0px;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 30px;  
    }
    div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    list-style-type: none;
    height: 30px;
    margin: 5px;
    text-align:center;
    }
    div#buttonA li {
    width: 180px;
    }
    div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
    width: 400px;
    }
    div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a {
    text-decoration: none;
    display: block;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:link, div#buttonb li a:link, div#buttonc li a:link, div#buttond li a:link, div#buttone li a:link {
    color: #000000;
    font-weight: bold;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited {
    color: #000000;
    font-weight: normal;
    background-color: #839dff;
    border-style: solid;
    border-bottom-color: #717a9f;
    border-right-color: #6276bf;
    border-left-color: #c1ceff;
    border-top-color: #cbebff;
    }
    div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #414e80;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }
    div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #717a9f;
    border-style: solid;
    border-right-color: #c1ceff;
    border-bottom-color: #cbebff;
    border-top-color: #717a9f;
    border-left-color: #6276bf;
    }
    .clearer{
     clear:both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="fullwrap"> 
      <div id="header"><img alt="floraworld 1-888-rose-888" src="images/FWca_header3.gif" /> 
      </div>
      <div id="columns"> 
    	<div id="main"> 
    	  <div id="main1"> 
    		<h2>Flower Delivery in Canada</h2>
    		<h3>Let Floraworld Deliver Your Floral Message</h3>
    		<img id="flowers" src="images/covermain.jpg" alt="flowers delivered" /> 
    		<p>Send flowers<br />
    		  across Canada, the USA, and worldwide<br />
    		  through our network of selected<br />
    		  local FTD and Teleflora florists.</p>
    		<p>Floraworld offers:</p>
    		<p>&nbsp &nbsp -- easy, secure online ordering</p>
    		<p>&nbsp &nbsp -- fast, reliable floral delivery<br />
    		  &nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p>
    		<p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br />
    		  &nbsp &nbsp &nbsp &nbsp with every eligible order</p>
    		<p>&nbsp &nbsp -- the freshest roses and other <br />
    		  &nbsp &nbsp &nbsp &nbsp cut flowers in exquisite bouquets <br />
    		  &nbsp &nbsp &nbsp &nbsp and arrangements</p>
    		<br />
    		<br />
    		<p>Select one of the Favourites on this page or<br />
    		  see a wider selection in our main catalogue.</p>
    		<br />
    		<br />
    	  </div>
    	  <div id="main2"> 
    		<h2>Popular Selections for Delivery in Canada</h2>
    		<div id="main2-sample1"><img id="main2_im1" src="images/tnB18-3226.jpg" alt="FTD Basket of Stars Bouquet" /> 
    		  <p>Basket of Stars Bouquet</p>
    		  <p>$73.95 (CDN)</p>
    		</div>
    		<div id="main2-sample2"><img id="main2_1m2" src="images/tnB20-3266.jpg" alt="FTD Pink Opulence Bouquet" /> 
    		  <p>Pink Opulence Bouquet</p>
    		  <p>$69.95 (CDN)</p>
    		</div>
    		<div id="main2-sample3"><img id="main2_im3" src="images/tnC4-3085.jpg" alt="FTD Many Thanks Bouquet" /> 
    		  <p>Many Thanks Bouquet</p>
    		  <p>$112.95 (CDN)</p>
    		</div>
    		<br />
    		<div id="buttonb"> 
    		  <ul>
    			<li><a href="link1.html">View the Entire FloraWorld Catalogue</a></li>
    		  </ul>
    		</div>
    		<br />
    		<br />
    	  </div>
    	  <div id="main3"> 
    		<h2>Canadian Flower Delivery</h2>
    		<h3>Favourite Places to Send Flowers in Canada</h3>
    		<ul>
    		  <li><a href="link1.html">Victoria, British Columbia</a></li>
    		  <li><a href="link2.html">Vancouver BC</a></li>
    		  <li><a href="link3.html">Kelowna BC</a></li>
    		</ul>
    		<ul>
    		  <li><a href="link4.html">Edmonton, Alberta</a></li>
    		  <li><a href="link5.html">Calgary, Alberta</a></li>
    		  <li><a href="link6.html">Regina, Saskachewan</a></li>
    		</ul>
    		<ul>
    		  <li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
    		  <li><a href="link8.html">Winnipeg, Manitoba</a></li>
    		  <li><a href="link9.html">Toronto, Ontario</a></li>
    		</ul>
    		<ul>
    		  <li><a href="link10.html">Ottawa, Ontario</a></li>
    		  <li><a href="link11.html">Montreal, Quebec</a></li>
    		  <li><a href="link12.html">Moncton, New Brunswick</a></li>
    		</ul>
    		<ul>
    		  <li><a href="link13.html">Saint John, New Brunswick</a></li>
    		  <li><a href="link14.html">Halifax, Nova Scotia</a></li>
    		  <li><a href="link15.html">Charlottetown, PEI</a></li>
    		</ul>
    		<ul>
    		  <li><a href="link16.html">St. Johns, Newfoundland</a></li>
    		  <li><a href="link17.html">Yellowknife, NWT</a></li>
    		  <li><a href="link18.html">Whitehorse, Yukon</a></li>
    		</ul>
    		<ul>
    		  <li><a href="link19.html">All Other Canadian Locations</a></li>
    		</ul>
    		<div id="buttonc"> 
    		  <ul>
    			<li><a href="link1.html">&nbsp &nbsp ORDER FLOWERS NOW &nbsp &nbsp</a></li>
    		  </ul>
    		</div>
    	  </div>
    	  <br />
    	  <br />
    	  <br />
    	  <div id="main4"> <br />
    		<br />
    		<h2>U.S.A. Flower Delivery</h2>
    		<h3>Popular Places to Send Flowers in the United States</h3>
    		<div id="buttond"> 
    		  <ul>
    			<li><a href="link1.html">For Flower Delivery in the USA, CLICK HERE</a></li>
    		  </ul>
    		</div>
    	  </div>
    	  <div id="main5"> <br />
    		<br />
    		<h2>International Flower Delivery</h2>
    		<h3>Popular Places to Send Flowers around the World</h3>
    		<div id="buttone"> 
    		  <ul>
    			<li><a href="link1.html">To Order Flowers for International Delivery, 
    			  CLICK HERE</a></li>
    		  </ul>
    		  <br />
    		  <br />
    		</div>
    	  </div>
    	</div>
    	<div id="nav"> 
    	  <img id="fwlogo" src="images/flora_logo.gif" alt="FloraWorld" /> <br />
    	  <div id="buttonA"> 
    		<ul>
    		  <li><a href="link1.html">Order Flowers Now</a></li>
    		</ul>
    	  </div>
    	  <h4>Flower Occasions</h4>
    	  <ul>
    		<li><a href="link31.html">Anniversary Flowers</a></li>
    		<li><a href="link32.html">Birthday Flowers</a></li>
    		<li><a href="link33.html">Congratulations Flowers</a></li>
    		<li><a href="link34.html">Get Well Flowers</a></li>
    		<li><a href="link35.html">New Baby Flowers</a></li>
    		<li><a href="link36.html">Sympathy Flowers</a></li>
    		<li><a href="link37.html">Funeral Flowers</a></li>
    		<li><a href="link38.html">Christmas Arrangements</a></li>
    		<li><a href="link39.html">Easter/Passover Flowers</a></li>
    		<li><a href="link40.html">"I Love You" Flowers</a></li>
    		<li><a href="link41.html">Mothers Day Flowers</a></li>
    		<li><a href="link42.html">Valentines Day Flowers</a></li>
    	  </ul>
    	  <br />
    	  <img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" /> <img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" /> 
    	  <br />
    	  <h4>Useful Flower Facts<br />
    		& More</h4>
    	  <ul>
    		<li><a href="link1.html">Flower Care</a></li>
    		<li><a href="link2.html">Flower Holidays</a></li>
    		<li><a href="link3.html">Meaning of Roses and Flowers</a></li>
    		<li><a href="link5.html">Monthly Flower Charts</a></li>
    		<li><a href="link6.html">Monthly Birth Stones</a></li>
    		<li><a href="link8.html">Flower Reminder Service</a></li>
    	  </ul>
    	  <br />
    	  <br />
    	</div>
    	<br class="clearer" />
      </div>
      <div id="footer"> 
    	<p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp 
    	  &nbsp &nbsp &nbsp &nbsp &nbsp; Site Map &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp 
    	  &nbsp &nbsp &nbsp &nbsp &nbsp; Contact Us</p>
      </div>
    </div>
    </body>
    </html>
    Hope that helps.

    paul

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul...
    I'm just working on my first coffee of the day. When the mist has cleared, I'll have a look. As they say somewhere: "you da man, man!"
    best,
    Cam

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul.. Just to confirm: it now looks smooth in IE6, Firefox and Opera7. I will go over the code to learn the lessons. Much appreciated.
    Cam


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •