SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Margin Problem

    I want to create a menu bar running vertically down the lefthand side of my screen. I have a fixed width div to contain the various menus. Each menu I add to this div will comprise of a title image, followed by a div with a border which will house the menu options. The problem I have is that in Internet Explorer only, there is a small gap between the menu header picture and the border of the div which contains the menu options. It works in Firefox.

    This looks nasty. Is there a solution?


    I have someting like the following:

    CSS
    ...
    #leftMenu {
    width: 100px;
    }

    #menuImage {
    margin: 0px;
    padding: 0px;
    }

    #menuBox {
    margin: 0px;
    padding: 0px;
    border: 2px solid #FFBCBC;
    }
    ...


    HTML
    ...

    <div id="leftMenu">
    <img src="menuHeader.gif" id="menuImage"/>
    <div id="menuBox ">
    <a href="www.option1.com">Option 1</a>
    <a href="www.option2.com">Option 2</a>
    ...
    </div>
    </div>

    ...

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try making the image display: block.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll give it a go and see...


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
  •