Grow your CSS skills. Land your dream job.

What IE bug is this called?

  • # January 8, 2010 at 9:07 pm

    Hi!

    I am a CSS newbie, I code the css from scratch, it works perfectly fine on firefox and safari, etc. But IE is not working well.
    the sample site is: http://mm.strangeorange.com

    Do any know knows what’s this problem called?

    Here is the code:
    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    CSS

    Code:
    body{
    font-size: 100%;
    font-family: “Verdana”, sans-serif;
    font-weight: normal;
    text-decoration: none;
    color: #333333;
    background: url(images/bg.png) repeat-x top #f4f3f3;
    margin: 0;
    padding: 0;
    }

    #page-wrap{
    width: 1100px;
    position: relative;
    margin: auto;
    padding: auto;

    }

    div#header{
    position: relative;
    width: auto; height: 1020px;
    background: url(images/index.png) no-repeat center top;
    list-style: none;
    }

    div#header pa a{
    position: absolute;
    left: 30px;
    width: 0;
    float: left;
    margin: 120px;
    margin-top: 290px;
    color: #666666;
    text-decoration: none;
    font-size: 24px;
    }

    div#header da a{
    position: absolute;
    left: 275px;
    width: 0;
    float: left;
    margin: 50px;
    margin-top: 290px;
    color: #666666;
    text-decoration: none;
    font-size: 24px;
    }

    div#header pkg a{
    position: absolute;
    left: 375px;
    width: 0;
    float: left;
    margin: 100px;
    margin-top: 290px;
    color: #666666;
    text-decoration: none;
    font-size: 24px;
    }

    div#header avg a{
    position: absolute;
    left: 570px;
    width: 0;
    float: left;
    margin: 90px;
    margin-top: 290px;
    color: #666666;
    text-decoration: none;
    font-size: 24px;
    }

    div#header price a{
    position: absolute;
    left: 750px;
    width: 0;
    float: left;
    margin: 100px;
    margin-top: 290px;
    color: #666666;
    text-decoration: none;
    font-size: 24px;
    }

    div#header cu a{
    position: absolute;
    width: 80px;
    left: 908px;
    margin: 1px;
    color: #f5f5f5;
    font-size: 14px;
    }

    div#header au a{
    position: absolute;
    width: 80px;
    left: 810px;
    margin: 1px;
    color: #f5f5f5;
    font-size: 14px;
    }

    div#header a{
    position: relative;
    width: 0;
    float: left;
    margin: 85px;
    margin-top: 290px;
    color: #666666;
    text-decoration: none;
    font-size: 24px;
    }

    div#header pa a:hover, div#header pa a:active{
    background: url(images/arrow.png) no-repeat center top;
    position: absolute;
    left: 30px;
    width: 0;
    float: left;
    margin: 120px;
    margin-top: 290px;
    color: #b5121b;
    }

    div#header da a:hover, div#header da a:active{
    color: #b5121b;
    }

    div#header pkg a:hover, div#header pkg a:active{
    color: #b5121b;
    }

    div#header avg a:hover, div#header avg a:active{
    color: #b5121b;
    }

    div#header price a:hover, div#header price a:active{
    color: #b5121b;
    }

    div#header cu a:hover, div#header cu a:active{
    color: #ffffff;
    }

    div#header au a:hover, div#header au a:active{
    color: #ffffff;
    }

    sd{
    position: absolute;
    left: 150px;
    bottom: 680px;
    font-size: 9px;
    }

    wd{
    position: absolute;
    left: 335px;
    bottom: 680px;
    font-size: 9px;
    }

    pk{
    position: absolute;
    left: 475px;
    bottom: 680px;
    font-size: 9px;

    }

    av{
    position: absolute;
    left: 665px;
    bottom: 680px;
    font-size: 9px;
    }

    prc{
    position: absolute;
    left: 835px;
    bottom: 680px;
    font-size: 9px;
    }

    p{
    position: absolute;
    width: 360px;
    left:615px;
    bottom: 70px;
    font-size: 12px;
    }

    I understand it looks confusing to you, however I don’t know what’s the solution for it when I put <li> because the text align distributing well but some texts are pretty long and it doesn’t look proportional at all, so I come up with my own version.

    # January 9, 2010 at 12:32 am
    "cookie053177" wrote:
    Do any know knows what’s this problem called?

    I think this problem is called "The life of a web developer."

    Your code is most likely not written correctly. IE is less forgiving than some of the other modern browsers.

    I would start by validating your code:
    http://validator.w3.org/check?verbose=1 … nge.com%2F

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".