Grow your CSS skills. Land your dream job.

Freaking Hate IE6

  • # November 6, 2009 at 5:05 pm

    Just had to start the post out right… ugh.

    http://www.atasupply.com/

    Every browser I’ve tried works fine except for IE6. I’ve tried it on IE7, 8, FF, Chrome, etc. And it looks perfect in Firefox’s IE plugin to check compatibility. I almost think I’m going to have to make a completely different stylesheet and place a browser IF statement in there.

    If anyone is really sharp with IE6 fixes, maybe I’m just missing something really simple. It’s bringing the content below the menu, and it’s creating a padding that is surrounding the left menu and the menu items.

    Code:
    /* CSS Document */

    * {
    padding:0px;
    margin:0px;
    }

    img {
    border:0px;
    }

    body {
    background-image: url(‘/images/body_bg.jpg’);
    margin: auto;
    }

    #header {
    background-image: url(‘/images/content_header.jpg’);
    background-repeat: no-repeat;
    width: 934px;
    height: 12px;

    }

    #container {
    background-image: url(‘/images/content_bg.jpg’);
    background-repeat: repeat-y;
    position:relative;
    width: 934px;
    margin:auto;
    min-height:800px;
    }

    #content {
    margin-left:250px;
    width: 555px;
    padding: 0 0 20px 0;
    }

    #right {
    background-image: url(‘/images/right_side.jpg’);
    background-repeat: no-repeat;
    width: 109px;
    height: 715px;
    float:right;
    }

    #leftmenu {
    width:235px;
    z-index:1;
    float: left;
    margin: -12px 0 0 26px;
    padding:0;

    }

    #footer {
    position:absolute;
    background-image: url(‘/images/footer_bg.jpg’);
    background-repeat: no-repeat;
    left:0px;
    bottom:0px;
    width:934px;
    height:24px;
    }

    /* These are the Side Menu Links */

    #leftmenu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #leftmenu li {
    position: relative;
    list-style-type: none;
    }

    #leftmenu a {
    display: block;
    background-image: url(‘/images/button.jpg’);
    background-repeat: no-repeat;
    font-family: “Gill Sans MT”, “Century Gothic”, Arial;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    width: 235px;
    height: 34px;
    padding-left: 30px;
    line-height:35px;

    }

    #leftmenu a:hover {
    color: #000;
    background-image: url(‘/images/button-over.jpg’);
    background-repeat: no-repeat;
    text-decoration: none;
    width: 235px;
    height: 34px;

    }

    Code:

    Text Here

    # November 7, 2009 at 1:39 am

    IE 6 is a picky mistress. I’ve always had luck with IE 6 by being pretty heavy with my positioning. Set your container to relative and align your inner pieces with absolute. I’m sure there is a better way but thats all I can think of.

    I’ve made choice to give IE 6 the proverbial finger. If a client wants a site to work in IE 6 there is an extra charge. Many webmasters are doing that now. We gotta ban together to get people to stop using IE 6.

    Gotta kill IE 6.

    # November 7, 2009 at 1:41 am

    Start by validating http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.atasupply.com%2F and fix thos 23 errors.
    Don’t use margins for positioning, you are asking for trouble.

    # November 7, 2009 at 2:11 am

    Apostrophe, what do you use to position with? I’ve never had an issue with margin positioning?

    do you just use top, bottom, left, right positioning?

    # November 7, 2009 at 2:45 am
    "dcp3450" wrote:
    Apostrophe, what do you use to position with? I’ve never had an issue with margin positioning?

    do you just use top, bottom, left, right positioning?

    Only where necessary. In this case a simple float:left will suffice.

    # November 7, 2009 at 5:00 pm

    Thanks for the replies guys. I’ve fixed the errors on my local server but still not dice. It’s so bizarre how sometimes you just can’t get something to work right. I’ll continue to try and figure this one out…

    # November 7, 2009 at 5:56 pm

    Get rid of that monster margin:

    Code:
    #content {
    float:left;
    padding:0 0 20px;
    width:555px;
    }

    Edit:
    Just got up! …and lose the 26px left-margin on #leftmenu and make it padding instead.

    # November 8, 2009 at 1:15 am

    can you post a screen shot of what it look like in IE6? I’m running IE7

    # November 9, 2009 at 1:20 am

    sure:

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