SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap issue in IE6

    I have the following code to display shouts:

    Code HTML4Strict:
    <div class="topshout"></div><div class="shout">User comment<br /><span class="gepost">Date of comment</span></div><div class="posted"><b><a href="" target="_blank">User</a></b></div>

    With this as the css code:

    Code CSS:
    .topshout { background:  url('images/topshout.gif') center top no-repeat; height: 10px; }
    .shout { background: #6b6966 url('images/bottomshout.gif') center bottom no-repeat; padding: 0px 10px 10px 10px; text-align: center; color: #24211d;}
    .posted { padding: 2px 0px 10px 50px; background: url('images/b.gif') 30px top no-repeat; }
    .gepost { font-size: 0.9em; font-style: italic; color:#999999; }

    The result of this looks fine in IE7, firefox, opera and safari.
    However, when using IE6 there is a gap between the topshout image and the shout.

    An example can be seen here:


    Is there something wrong with my css or is there a way to make IE6 display it right?

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try font-size:0; in .topshout or/and .topshout img{vertical-align:bottom;}
    or post a link to the page

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan_A View Post
    Try font-size:0; in .topshout or/and .topshout img{vertical-align:bottom;}
    or post a link to the page
    Thanks a bunch! The font-size solution made it work.

  4. #4
    SitePoint Member vhgdesign's Avatar
    Join Date
    Mar 2005
    Location
    at home :))
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a problem with margins, so add to .topshout {margin: 0;} and .shout {margin: 0;}

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vhgdesign View Post
    This is a problem with margins, so add to .topshout {margin: 0;} and .shout {margin: 0;}
    The div shouldn't have any margin by default so specifying zero shouldn't have any impact.

    I suspect that Dan's suggestion will work as IE6 will always display the height of an element no smaller than it's default font size even when a height is specified. By specifying a font-size: 0; it allows the height to be the defining factor for the height of the element.


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
  •