SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    White space before the border?

    Help...I'm very frustrated!

    I want to insert a .jpg image (a gradient background with the text "Advertise Your Company Here") below my left vertical navigation, that takes up the same width as the navigation.

    The method I'm trying to use is as follows:

    HTML

    <div id="advertleft">
    <img src="images/companyad_1.jpg" width="152" height="400" alt="Advertise your Company Here" />
    </div>

    CSS

    #advertleft {
    float: left;
    clear: left;
    margin: 10px 0 0 0;
    border: 2px solid #000000;
    }

    The image has been created in Photoshop and has the above dimensions, but for some reason my 2px black border is only correct on the top, left and right edges of the image. The bottom edge has about 5px of white space before the border???

    I want the image to move relative to the left navigation panel directly above (which will vary in size depending on the number of items in the <ul> for navigation).

    Also, I want the width to be the same as the navigation div width (which is 11ems), so I came to the 152px width by trial and error. Is this wrong?

    Any ideas? Thanks of course.

    Goofy

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are finding this in IE I assume.

    The one image is sitting on a text-line in IE. And placed on the baseline of that text-line. (Test increasing the font-size and see the gap grow.)

    Options:

    - Float also the image. (Gives no text-line)

    - Apply display:block on the image. (Gives no text-line)

    - Apply vertical-align:bottom on the image. (Default is base-line)
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the slow response, I was away being a best man. In answer to your first question, yes it was IE, but also Firefox. That's all I have checked up til now.

    I thought I understood your advice Erik, but I can't fix the problem. Do you mean

    #advertleft {
    display: block;
    }

    or

    #advertleft {
    vertical-align: bottom;
    }

    I've a funny feeling you might mean neither of those! Going back to your original point on font size, I did add:

    #advertleft {
    font-size: 0;
    }

    That corrected the problem, but I think it may not be the correct way.

    Can you (or anyone else) help?

    Thanks

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You were close.

    I meant either of:

    Code:
    #advertleft img {
    float: left;
    }
    or

    Code:
    #advertleft img {
    display: block;
    }
    or

    Code:
    #advertleft img {
    vertical-align: bottom;
    }
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •