Grow your CSS skills. Land your dream job.

IE7 Bug

  • # July 28, 2009 at 10:38 am

    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?

    # July 28, 2009 at 11:09 am

    Never had a problem. Can you show us your reset?

    # July 28, 2009 at 1:00 pm
    Code:
    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: “” “”;
    }
    # July 28, 2009 at 1:10 pm

    Everything is there. I can only guess that the problem was in someway connected to how you were styling the lists.

    # July 28, 2009 at 1:16 pm

    Here is the CSS from my page (http://www.cartel-auto.com) as well:

    Code:
    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;}

    # July 28, 2009 at 2:03 pm

    Please, if you’re going to post code then use the code tags, it gets pretty boring editing almost every single post. :?

    There is a much easier way to test it than sifting through your code anyway. Just remove all of the css except the reset and then preview the page in all your browsers.

    # July 28, 2009 at 2:14 pm

    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.

    # July 28, 2009 at 2:43 pm

    Posting code is no problem. Just use the tags provided. That’s what they are there for. ;)

    I’m curious now. Did you try just the reset on your page? Was it different in IE? I’m on a Mac and it’s a major hassle to boot up the pc for anybody’s code but my own.
    I can only repeat, I’ve never had a problem with the reset (I use the same one, slightly modified to suit my own needs) on ul’s or anything else in any browser.

    # July 28, 2009 at 7:34 pm

    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 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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