The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE7 Bug

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #25590

    Good morning all,

    I just wanted to query the brain trust and see if anyone else encountered this error. Last night I was coding a web page and I used Eric Meyer’s reset style sheet. Now about and hour into developing I noticed IE wasn’t rendering my navigation or bullets correctly. It was still adding it’s own format for <ul> but Chrome and Firefox looked perfect. About an hour later and a headache I added margin:0 and padding: 0 to my <ul> and it looked perfect and IE now as well. I was confused though because I used the reset style sheet which Chrome and Firefox render correctly, so I wasn’t sure why IE applied everything from the reset except to <ul>.

    As I was coming into work this morning I wondered if IE did not apply to <ul> which were assigned id’s or classes. Has anyone else encountered this error? If so, can you explain what I did incorrectly?

    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, strong, 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;
    color: black;
    background: white;
    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: “” “”;

    Here is the CSS from my page ( as well:

    body {font-family: Lucida Sans; font-size: small; color: #000000; background-color: #d2d8d9;}

    p, li {font-size: 14px;}

    h6 {font-size: 16px;}
    h5 {font-size: 18px;}
    h4 {font-size: 20px;}
    h3 {font-size: 22px;}
    h2 {font-size: 24px;}
    h1 {font-size: 26px;}

    .clear {clear: both;}
    .clearLeft {clear: left;}
    .clearRight {clear: right;}
    .uppercase {text-transform: uppercase;}

    .lineGray {background-image: url(‘../../images/lineGray.gif’); background-repeat: no-repeat; width: 968px; height: 1px; margin-bottom: 20px;}
    .lineWhite {background-image: url(‘../../images/lineWhite.gif’); background-repeat: no-repeat; width: 968px; height: 1px; margin-bottom: 20px;}

    #pageWrap {width: 1010px; height: 100%; position: relative; margin: 0px auto;}

    #pageHeader {height: 142px; margin: 5px 0px 20px 0px; }

    #navMainWrap {margin-bottom: -7px; }
    #navMain {margin: 0px; padding: 0px; list-style: none;}
    #navMain li {display: inline; font-size: 16px; width: 71px; height: 39px; text-align: center; margin-right: 25px;}
    #navMain li a {display: inline-block; text-decoration: none; width: 71px; height: 39px; padding-top: 7px;}
    #navMain li a:hover {background-image: url(‘../../images/buttonHover.png’); background-repeat: no-repeat;}
    #home #navMain li a:active {background-image: url(‘../../images/buttonActive.png’);}

    #headerWrap {background-image: url(‘../../images/bkgdHeader.png’); background-repeat: no-repeat; width: 967px; height: 278px; margin-bottom: 20px;}
    #headerLeft {float: left; width: 500px; margin: 15px 0px 0px 15px;}
    #listBenefits {list-style: none; margin: 0px; padding: 0px}
    #listBenefits li {color: #ffffff; margin-bottom: 15px; background-image: url(‘../../images/check.png’); background-repeat: no-repeat; height: 24px; background-position: left top; padding-left: 30px;}
    #listBenefits li b {font-size: 20px;}
    #headerRight {width: 368px; float: right; margin: 9px 7px 0px 0px;}

    #contentLeft {width: 600px;}
    #contentLeft h2 {background-image: url(‘../../images/bkgdTitle.png’); background-repeat: no-repeat; height: 64px; margin-left: -7px; padding: 17px 0px 0px 45px;}
    #contentLeft p {margin-bottom: 15px; text-align: justify;}
    #listNeeds {margin: 0px; padding: 0px; list-style: none;}
    #listNeeds li {background-image: url(‘../../images/star.png’); background-repeat: no-repeat; height: 20px; margin-bottom: 15px;}
    #listNeeds li b {padding-left: 25px; line-height: 20px;}

    #contentRight {width: 400px;}

    #footerWrap {background-color: #151515; width: 968px;}


    My apologies wasn’t trying to be an annoyance. I thought it might be easier if you saw my code as well in case I did make a mistake. I am new to forum etiquette and I have learned what not to do here. Thank you for your assistance, I appreciated it.


    Lesson learned.

    I just got home and tested it on IE. For some reason IE reset everything on the reset style sheet except for the ul. At least that is all I have had problems with so far. I apologize I made the thread as an IE7 bug but it is actually IE8 I had this issue in. I forgot I updated a few days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.