SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically centering inline elements in IE

    I am having some trouble vertically aligning an img tag (inline element) in a definition list. The challenge lies in IE (Firefox renders it as expected). The img element is within a floated <dd> tag. None of my hacks have resolved the situation. So I could use additional assistance to bring some insight in solving the problem. Let me know if you have suggestions about this objective.

    http://neville.f2o.org/Template_TEMP3.html

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using an IMG, you would be better off using "position: absolute; top: 50%; margin-top: -half img heightpx;".

    If the image is purely decorative, use "background: url(image.gif) no-repeat 50% 0;".

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to be affected by the Peekaboo bug.

    If you select the text in IE6, e.g. by pressing the mouse button in the upper left corner and dragging it downward and to the right, the missing headings mysteriously appear. There is no scroll bar, though, so the result is ... a bit odd.

    I don't agree with Buddy Bradley here; there is no need for absolute positioning for this. You're on the right track with line-height and vertical-align.
    Birnam wood is come to Dunsinane

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to force ie into layout mode and that will correct the peek a boo bug as mentioned by Tommy above and also will allow the images to slide back into correct position:

    Code:
    div.Article {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 0 0 20px 0;
    padding: 0 20px .5em 20px;
    /*width: 220px;*/
    }
    /* mac hide \*/
    * html div.Article {height:1%;}
    /* end hide*/
    That should solve the problems with any luck

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul O'B. Your code suggestion did the trick. Thanks AutisticCuckoo for the links on the appropriate information.

    If anybody was curious, the vertically image centering approach may be found at following link.
    http://www.brunildo.org/test/img_center.html


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
  •