Grow your CSS skills. Land your dream job.

IE 6 issues

  • # December 20, 2008 at 9:55 am

    I am working on the following site at FT place of employment – http://www.patchwarehouse.com/index2.html and am experiencing some issues with what looks to be the mainContainer div – width issues. Any help sorting that is appreciated.

    Thanks

    Below is the CSS for that site

    Code:
    @charset “utf-8″;
    /* CSS Document */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    body {
    line-height: 1.3em;
    color: #000;
    background: #00baff url(images/stripe.gif) top left repeat-x;
    }
    ol, ul {
    list-style: none;
    }
    /* tables still need ‘cellspacing=”0″‘ in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: “”;
    }
    blockquote, q {
    quotes: “” “”;
    }
    /*end reset*/

    #wrapper {
    position: relative;
    margin: 0 auto;
    width: 825px;
    margin-top: 1px;
    padding-bottom: 5px;
    }

    #header {
    float: left;
    background: url(images/header-background.gif) repeat-x;
    height: 51px;
    width: 825px;
    }

    .logo {
    float: left;
    width: 420px;
    height: 36px;
    margin: 8px 0 5px 15px;
    }

    .contact {
    float: left;
    width: 250px;
    }

    #navWrap {
    float: left;
    }

    #nav {
    height: 35px;
    width: 825px;
    float: left;
    background: #dcdcda;
    border-bottom: 2px solid #fefdfd;
    }
    #nav ul {

    padding: 0px;
    list-style-type: none;
    }
    #nav ul li {
    float: left;
    }
    #nav ul a {
    text-decoration: none;
    height: 35px;
    float: left;
    line-height: 35px;
    font-family: Arial, Trebuchet MS, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 13px;
    color: #000000;
    padding-right: 17px;
    padding-left: 17px;
    background-image: url(images/nav-divider.gif);
    background-repeat: no-repeat;
    background-position: right center;
    }

    #nav ul .quote a {
    background-image: none;
    }

    #nav ul a:hover, .selected a {
    color: #000000;
    background-position: right center;
    text-decoration: underline;
    color: #00BAFF;
    }
    #home #nav .home a,
    #pricing #nav .pricing a,
    #gallery #nav .gallery a,
    #options #nav .options a,
    #track #nav .track a,
    #quote #nav .quote a {
    color: #000000;
    text-decoration: underline;
    }

    #mainContainer {
    background: #00baff;
    width: 804px;
    padding: 10px;
    border-left: 1px solid #dcdada;
    border-right: 1px solid #dcdada;
    float: left;

    }

    #slideshow {
    width: 823px;
    height: 250px;
    }

    #mainContainer p {
    font-family: Arial, Trebuchet MS, sans-serif;
    font-size: 13px;
    margin-bottom: 15px;
    color: #000;
    }

    #mainContainer h1{
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-transform: normal;
    letter-spacing: -.5px;
    line-height: 1.2em;
    margin-bottom: 10px;
    color:#fff;
    }

    #mainContainer h2{
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-transform: normal;
    letter-spacing: -.5px;
    line-height: 1.2em;
    margin-bottom: 10px;
    color:#000;
    }

    #mainContainer h3{
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-transform: normal;
    letter-spacing: -.5px;
    line-height: 1.2em;
    margin-bottom: 5px;
    color:#fff;
    }

    #pricingGrid {
    float: left;
    width: 390px;
    margin: 0 10px;
    }

    #pricingInfo {
    float: left;
    width: 394px;
    text-align: center;
    }

    #percentageThumbs {
    float: left;
    width: 394px;
    }

    .percentageLeft{
    float: left;
    width: 131px;
    }

    .percentageMiddle {
    float: left;
    width: 132px;
    }

    .percentageRight {
    float: right;
    width: 131px;
    }

    #pricingInfo h2 {
    text-align: center;
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-transform: normal;
    letter-spacing: -.5px;
    line-height: 1.2em;
    margin-bottom: 10px;
    color:#000;
    }

    img.percentages {
    margin: 5px 0 10px 0;
    }

    ul.pricingBullets {
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 13px;
    margin: 10px 0;
    list-style-position: inside;
    list-style-image:url(images/checkmark.gif);
    text-align: center;
    color: #fff;
    }

    ul#items {
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 13px;
    margin: 10px 0;
    list-style-position: inside;
    list-style-image:url(images/checkmark.gif);
    }

    #bullets {
    float: left;
    width: 805px;
    margin-bottom: 15px;
    padding-left: 85px;
    }

    ul#designing-left {
    float: left;
    width: 375px;
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 13px;
    list-style-position: inside;
    list-style-image:url(images/checkmark.png);

    }

    ul#designing-right {
    float: left;
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 13px;
    list-style-position: inside;
    list-style-image:url(images/checkmark.png);
    }

    img.display {
    float: right;
    margin: 10px 0 10px 10px;
    }

    #footerWrapper {
    background: #222322;
    height: 200px;
    border-top: 5px solid #161816;
    clear: both;
    }

    #footerContent {
    position: relative;
    margin: 0 auto;
    width: 825px;
    padding-top: 125px;
    }

    #footerContent p {
    font-family: Arial, Trebuchet MS, sans-serif;
    font-size: 11px;
    color: #fff;
    text-align: center;
    }

    #footerContent a {
    color: #fff;
    text-decoration: underline;
    }

    #footerContent a:hover {
    color: #00baff;
    text-decoration: underline;
    }

    .footerLogo{
    text-align: center;
    margin-bottom: 5px;
    }

    #freequoteContainer {
    float: right;
    margin: 5px 0 10px 10px;
    }

    #contentContainer {
    width: 785px;
    padding-top: 10px;
    }

    #specsContainer {
    float: right;
    width: 390px;
    }

    #formContainer {
    float: left;
    width: 825px;
    background: #00baff;
    border-left: 1px solid #dcdada;
    border-right: 1px solid #dcdada;
    }

    #formContainer p {
    font-family: Arial, Trebuchet MS, sans-serif;
    font-size: 13px;
    margin-bottom: 10px;
    color: #000;
    }

    img.options {
    float: left;
    margin: 0 10px 0px 0;
    }

    #options {
    clear: both;
    height: 110px;
    background: #d9cfcf;
    padding: 10px;
    margin-bottom: 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #7a7777;
    }

    #measurements {
    height: 175px;
    margin-bottom: 15px;
    }

    img.measurements {
    float: left;
    margin: 0 15px 0px 0;
    }

    .freeQuote {
    text-align: center;
    margin-bottom: 10px;
    }

    .freeQuoteFront {
    text-align: center;
    }

    Rob
    # January 4, 2009 at 8:17 am

    what are the problems you are having? did you fix them? it seems to be ok in IE6…

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".