Grow your CSS skills. Land your dream job.

IE padding issue

  • # April 30, 2009 at 6:31 am

    Hi,

    Covered a million times probably but I have been looking hard and can’t seem to solve my problem. I am fairly new to the CSS game but there is something I am clearly over looking.

    Basically, I want to show 3 images vertically on a page. I am using an unordered list to do it. In Safari and Firefox the images line up underneath the H1 header like I want it to, but in IE 6 (which I am testing via Parallels from my MAC) there is clearly some kind of padding which I can’t seem to get rid of. Maybe there is something I am not trying, or I haven’t understood the ‘IE box model issue’ properly. Any input would be great. Even if it is advice on doing it in a better way.

    Its not online yet so can’t provide links

    I have included the * {margin:0px padding:0px} in the style sheet amongst other resets

    Code:
    #page-wrap {
    position: relative;
    margin:0px auto;
    width: 932px;
    z-index: 100;
    height: 800px;
    padding:0px;

    h1{
    position:absolute;
    top:220px;
    left:40px;
    font-size:20px;
    color:#8aab46;
    border-bottom-color: #a0a98f;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    margin:0px 15px 0px 15px;
    padding:0px 0px 3px 0px;
    z-index:600;
    }

    #content {
    position:absolute;
    top:240px;
    left:40px;
    z-index: 300;
    padding:0px;
    border:0px;
    margin:0px;
    }

    h2{
    color: #696969;
    text-decoration: none;
    margin-left:10px;
    overflow:hidden;
    }

    h2 ul.service{
    border:0px;
    display:block;
    }

    h2 ul.service li{
    padding:0px;
    }

    Code:

    • Cool and Freezer Rooms
    • Ice Machines
    • Heat Pumps
      # April 30, 2009 at 6:54 am

      Why do you have your list inside a h2 tag? The h2 tag is for sub-headings not a substite for a div. If you really need to wrap your list in a div then use a div.
      Though, to be honest <ul class="service"> should be a good enough hook 9 times out of 10.

      Try dumping the h2’s from your markup and see where you are then.

    # May 1, 2009 at 3:49 am

    Thanks for the reply,

    Took the ul.service out of the H2 tag, hasn’t had any effect but will take it on board for future.

    I have actually just sorted it by specifying the the ‘left’ attribute to be 10px less in a conditional stylesheet set up for IE6. Seems like the way to go. I hope this is good practice

    cheers

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

You must be logged in to reply to this topic.

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