Grow your CSS skills. Land your dream job.

Hi Guys – Image Question

  • # April 10, 2009 at 1:28 pm

    Hi guys my question is pretty simple. The image highlighted in bold below is appearing with some additional padding in IE7 above and below it. I want it to look the same as it does in Firefox which shows no padding. I’ve tried removing padding from the image, but to no avail. Id show you a demo but all this is being done local. I have provided code below for those wondering. Im sure the solution is quite trivial, but at the moment I can’t seem to figure it out. Thanks guys, look forward to hearing from you!

    Code:
    ========
    HTML
    ========


    [b] girlbg1[/b]

    ========
    CSS
    ========

    * {
    margin: 0;
    padding: 0;
    }

    div#header {
    background: #000000 url(images/bg.jpg) repeat-x top;
    position: relative;
    width: 850px;
    }

    .fltr {
    float: left;
    position: absolute;
    margin-top: px;
    margin-left: 590px;

    }

    ul#nav {
    position: absolute;
    margin-top: 140px;
    margin-left: 60px;
    }

    ul#nav li a {
    display:block;
    width: 100px;
    text-decoration: none;

    color: white;
    }

    ul#nav li a:hover, ul#nav li a:active {
    text-decoration: underline;
    }

    ul#nav li {
    float: left;
    list-style: none;
    }

    div#wrapper {
    width: 850px;
    margin: 0 auto;
    }

    div#mainContent {
    padding-bottom: 50px;
    background: #263136;
    color: white;
    width: 850px;
    }

    div#mainContent p {
    padding: 0 10px 0 10px;
    }

    # April 10, 2009 at 2:13 pm

    Did a bit of testing, and the cause seems to be in the header.

    No matter what element goes after the header, there seems to be a bit of spacing.

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