Professional Web Applications Themes

CSS woes - Macromedia Dynamic HTML

After one hurdle, it's on to the next for IE6/7. The site below looks great (so far) in all the browsers I care to support except IE. 1. The image and copy within the green area (Div id Thumbs) is flush with top margin. Padding on the actual image isn't been seen in IE. 2. The "Shop By Category" background doesn't extend to the full width of the containing div. These two were working earlier and when I added the Unordered List for the thumbnails, I must have changed something or created something that is interfering. link: http://www.leetilford.com/ghm/of/outdoorFurniture.html Here's the ...

Sponsored Links
  1. #1

    Default CSS woes

    After one hurdle, it's on to the next for IE6/7.

    The site below looks great (so far) in all the browsers I care to support
    except IE.

    1. The image and copy within the green area (Div id Thumbs) is flush with top
    margin. Padding on the actual image isn't been seen in IE.

    2. The "Shop By Category" background doesn't extend to the full width of the
    containing div.

    These two were working earlier and when I added the Unordered List for the
    thumbnails, I must have changed something or created something that is
    interfering.

    link: http://www.leetilford.com/ghm/of/outdoorFurniture.html

    Here's the css followed by the HTML:


    body {
    font: .75em Helvetica, Arial, Verdana, sans-serif;
    background-color:#333333;
    margin:0;
    padding:0;
    }

    #container {
    position:relative;
    margin:0;
    padding:0;
    width:1000px;
    height:700px;
    background-color:#fff;
    }

    #branding {
    position:absolute;
    background:url(/images/headerDev.jpg);
    top: 0;
    left: 0;
    width: 1000px;
    height: 100px;
    overflow:visible;

    }

    /* Root = Horizontal, Secondary = Vertical */
    ul#navmenu-h {
    position:absolute;
    margin: 0px;
    padding: 0px;/*This padding chunks it to the right */
    top:35px;
    left:210px;
    width: 80%; /*For KHTML*/
    list-style: none;
    z-index:4;
    overflow: visible;
    }

    ul#navmenu-h li {
    margin: 0;
    padding: 5px;
    float: left; /*For Gecko*/
    display: inline;
    list-style: none;
    position: relative;
    }

    ul#navmenu-h ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
    }

    ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
    clear: both;
    display: block;
    font: 1px/0px serif;
    content: ".";
    height: 0;
    visibility: hidden;
    }
    /*below controls rollovers, trans and lines */
    ul#navmenu-h ul li {
    background-image:url(150x30.png);
    border-bottom-width:2px;
    border-bottom-style:solid;
    border-bottom-color:white;
    width: 150px;
    float: left; /*For IE 7 lack of compliance*/
    display: block !important;
    display: inline; /*For IE*/
    }
    s/*below controls rollovers, trans and lines for greenhouse menu only */
    {
    background-image:url(150x30.png);
    border-bottom-width:2px;
    border-bottom-style:solid;
    border-bottom-color:white;
    width: 118px;
    float: left; /*For IE 7 lack of compliance*/
    display: block !important;
    display: inline; /*For IE*/
    }

    /* Root Menu */
    ul#navmenu-h a {
    padding: 0 4px; /*spreads links out*/
    float: none !important; /*For Opera*/
    float: left; /*For IE*/
    display: block;
    background:transparent;
    font-family:Helvetica, Arial, Verdana, sans-serif;
    font-weight:bolder;
    color:#FFF;
    line-height: 1.75em;
    text-decoration: none;
    height: auto !important;
    height: 1%; /*For IE*/
    }

    ul#navmenu-h a.main {
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #FFF;
    }

    ul#navmenu-h a.ghm {
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #FFF;
    }



    /* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,
    ul#navmenu-h li:hover a,
    ul#navmenu-h li.iehover a {
    background:transparent;

    color:#000066;
    }

    /* 2nd Menu */
    ul#navmenu-h li:hover li a,
    ul#navmenu-h li.iehover li a {
    float: none;
    background:transparent;
    color:#000066;

    }

    /* 2nd Menu Hover Persistence */
    ul#navmenu-h li:hover li a:hover,
    ul#navmenu-h li:hover li:hover a,
    ul#navmenu-h li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover a {
    background:#000066;
    line-height: 1.75em;
    color: #FFF;
    }

    #navmenu-h li a.last {
    border: none;
    }

    #navmenu-h li a.current {
    color:#000033;
    }


    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu-h li:hover ul ul,
    ul#navmenu-h li:hover ul ul ul,
    ul#navmenu-h li.iehover ul ul,
    ul#navmenu-h li.iehover ul ul ul {
    display: none;
    }

    ul#navmenu-h li:hover ul,
    ul#navmenu-h ul li:hover ul,
    ul#navmenu-h ul ul li:hover ul,
    ul#navmenu-h li.iehover ul,
    ul#navmenu-h ul li.iehover ul,
    ul#navmenu-h ul ul li.iehover ul {
    display: block;
    }



    #nav2container {
    position:absolute;
    left:0;
    top:100px;
    font-size: 1em;
    text-align: left;
    text-indent: 10px;
    margin-left:10px;
    padding:0;
    background-color:#FFF;
    }


    #nav2list
    {
    background-color:#fff;
    padding-left: 0;
    margin-left: 0;
    padding-right: 10px;
    border-right-width: thin;
    border-bottom-width: thin;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    }

    #nav2list li
    {
    list-style: none;
    margin: 0;
    }

    #nav2list li a {
    text-decoration: none;
    color: #333333;
    line-height: 2em;
    }

    #nav2list .category {
    color: #FFFFFF;
    background-color:#578B55;
    padding-top:10px;
    height: 20px;

    }

    .last {
    border-bottom-color: #666666;
    padding-bottom: 1em;
    }

    #nav2List li hr {
    text-indent: -20px;
    }

    #brandBottom {
    color:#CCC;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    padding-bottom: 1.25em;
    }

    #brandBottom a{
    color: #333333;
    text-decoration: none;
    }



    #header{
    position:absolute;
    top: 0;
    left: 0;
    width:1000px;
    height:100px;
    background-image:url(images/headerDev.jpg);
    z-index: 5;
    overflow: visible;
    }

    #mainContent {
    position:absolute;
    left: 200px;
    top: 100px;
    width:800px;
    height:442px;
    background-color:#fff;
    z-index: 1;
    }

    #intro {
    position:absolute;
    left: 25px;
    top: 25px;
    width:650px;
    height:184px;
    font-family:Georgia, Times, serif;
    font-weight:bold;
    text-align:center;
    color:#fff;
    line-height:1.5em;
    background:#669966;
    padding: 0px;
    }

    #intro img {
    float:left;
    padding-left: 15px;
    }

    #intro h1 {
    font-size: 2em;
    color:#fff;
    }


    #thumbs {
    position:absolute;
    left: 25px;
    top: 220px;
    width:700px;
    height:190px;
    font-size:11px;
    background:#FFF;
    margin:0;
    padding:0;
    }

    #thumbs ul { position:relative;
    list-style-type:none;
    margin:0 0 0 -10px;
    padding: 0;
    width:100%;
    }

    #thumbs li {
    float:left;
    margin:0;
    padding:0;
    width:115px;
    }

    #thumbs a:link {
    text-decoration: none;
    color:#000066;
    border:none;
    }

    #thumbs h4 {
    margin: 0 10px;
    font-size:100%;
    }

    #thumbs img {
    display: block;
    }

    #footer {
    position:absolute;
    left: 0;
    top: 542px;
    width:1000px;
    height:150px;
    background-repeat:no-repeat;
    background-image: url(/images/footerTemplate.jpg);
    z-index: 10;
    visibility: visible;
    padding-top:75px;
    padding-left:10px;
    }
    #footer .tag {
    font-size:1em;
    color:#CCCCCC;
    }



    <!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">
    <link href="ghmMain.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; cht=UTF-8" />
    <title>The Greenhouse Mall</title>

    </head>

    <body>
    <div id="container">

    <div id="header">

    <div id="branding">

    <ul id="navmenu-h" name="navmenu-h">
    <li><a href="#" class="main">Outdoor Furniture</a>
    <ul>
    <li><a href="#">Wrought Iron</a></li>
    <li><a href="#">Cast Aluminum</a></li>
    <li><a href="#">Exotic Woods</a></li>
    <li><a href="#">Contemporary Aluminum</a></li>
    <li><a href="#">Woven/Wicker</a></li>
    <li><a href="#">Moasic Tables</a></li>
    <li><a href="#">Shop by Brand</a></li>
    </ul>
    </li>
    <li><a href="#" class="main">Greenhouses</a>
    <ul id="specialjack">
    <li><a href="#">Glass</a></li>
    <li><a href="#">Polycarbonate</a></li>
    <li><a href="#">Fiberglass</a></li>
    </ul>
    </li>

    <li><a href="accessories.html" class="main">Accessories</a>
    <ul>
    <li><a href="#">Umbrellas</a></li>
    <li><a href="#">Artifical Plants</a></li>
    <li><a href="#">Throw Pillows</a></li>
    <li><a href="#">Coolers</a></li>
    <li><a href="#">Benches/Gliders</a></li>
    <li><a href="#">Swings</a></li>
    <li><a href="#">Wall Art</a></li>
    <li><a href="#">Protective Covers</a></li>
    <li><a href="#">Miscellaneous</a></li>
    </ul>
    </li>


    <li><a href="#" class="main">FAQs</a></li>
    <li><a href="#" class="last">Contact Us</a></li>
    </ul>
    </div>
    </div>





    <div id="nav2container">
    <h3>Outdoor Furniture</h3>
    <ul id="nav2list">
    <li class="category">SHOP BY CATEGORY</li>
    <li><a href="wroughtIron.html">Wrought Iron</a></li>
    <li><a href="castAluminum.html">Cast Aluminum</a></li>
    <li><a href="exoticWoods.html">Exotic Woods</a></li>
    <li><a href="contemporaryAluminum.html">Contemporary Aluminum</a></li>
    <li><a href="wovenWicker.html">Woven/Wicker</a></li>
    <li><a href="umbrellas.html">Umbrellas/Shade Equipment</a></li>
    <li class="last"><a href="mosaicTables.html">Mosaic Tables</a></li>
    </ul>
    <div id="brandBottom"><a href="brand.html">SHOP BY BRAND</a></div>
    </div>




    <div id="mainContent">
    <div id="intro">
    <h1><img src="images/outdoorFurniture/ofMainPic.jpg" width="314"
    height="150" />Outdoor Furniture</h1>
    <p>We specialize in the finest outdoor furniture <br />
    that will provide years of enjoyment. <br />
    Whether you choose traditional or modern <br />
    styles, you can expect high quality <br />
    and lasting beauty. </p>
    </div>




    <div id="thumbs">
    <ul>
    <li>
    <h4><a href="#" title="WroughtIron">Wrought Iron<img
    src="images/outdoorFurniture/withumb.jpg" border=0 alt=""/></a></h4>
    </li>

    <li>
    <h4><a href="#" title="Cast Aluminum">Cast Aluminum<img
    src="images/outdoorFurniture/castathumb.jpg" border=0 alt=""/></a></h4>
    </li>

    <li>
    <h4><a href="#" title="Exotic Woods">Exotic Woods<img
    src="ima
    Sponsored Links
    CanonBoy Guest

  2. #2

    Default Re: CSS woes

    I cannot see the webpages from my location. Is the server is down?
    yupieyi Guest

  3. #3

    Default Re: CSS woes

    Sorry, I've since fixed the issue. Thanks
    CanonBoy Guest

  4. #4

    Default Re: CSS woes

    what was the problem?
    Jonbon999 Guest

  5. #5

    Default Re: CSS woes

    I had an unordered list and a header above it all (as a list item) with a
    background color. The problem was that the background color behind the header
    wasn't reaching to the full width of the unordered list. They were both wrapped
    in a div so the UL width was fine but the header width would not reach the full
    width of the containing div.

    I can only guess now because it's been awhile that I was specifying the width
    of the containing div instead of the UL so when I made a special class for the
    header and used li .category it worked.



    CanonBoy Guest

  6. #6

    Default Re: CSS woes

    Glad to see you have resolved this issue
    sickest4u Guest

Similar Threads

  1. Pagination woes
    By Glenn_Holland@adobeforums.com in forum Adobe Acrobat Macintosh
    Replies: 1
    Last Post: November 6th, 05:28 AM
  2. WSE 2 woes
    By Mark A. Deal in forum ASP.NET Web Services
    Replies: 0
    Last Post: March 9th, 07:52 PM
  3. PDF woes
    By Ken Kehl in forum Macromedia Freehand
    Replies: 0
    Last Post: April 1st, 02:46 AM

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
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139