SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical aligning pictures inside div

    I'm having a problem with vertical aligning a picture inside a div.

    A stripped down example can be found here:

    http://195.26.0.159/test.htm

    I've tried different things, but something in my code seems to break all the examples I've found.

    Any hints or suggestions on what I'm doing wrong would be appreciated!


    Vidar

  2. #2
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    body{
     color:#696969;
     font-weight:normal;
     font-family:verdana;
     text-decoration:none;
     font-size:11px;
    }
    
    body img {
    vertical-align: bottom;
    }
    
    #product{
    text-align:center;
    vertical-align:middle;
    padding:0px;
    margin-bottom:10px;
    border:1px solid black;
    width:330px;
    height:300px;
    position:relative;
    display: table; 
    overflow: hidden;
    }
    
    #productimage{
    height:265px;
    display: table-cell;
    vertical-align: bottom;
    }
    
    h1{
    font-size:18px;
    padding:4px;
    font-weight:bold;
    }
    
    
    p{
    font-size:11px;
    padding:1px;
    }
    table{
    font-size:11px;
    padding:1px;
    }
    
    #content{
    padding:0px;
    width: 950px;
    width /**/:950px;
    border:1px solid darkgray;
    height:500px;
    }
    html > body #content{min-height: 500px; height: auto;}
    
    
    #mainrow{
    background-color:white;
    padding:0px;
    width: 950px;
    width /**/:950px;
    }
    
    html > body #mainrow{overflow: hidden;}
    
    html > body #content{min-height: 500px; height: auto;}
    
    
    #maincontent{
    float:right;
    display:inline;
    background-color:white;
    padding:15px;
    width: 730px !important;
    width /**/:768px;
    text-align:left;
    height:auto;
    }
    
    html > body #maincontent{min-height: 470px; height: auto;}
    
    
    #product a:link{
      color:#006B96;
    margin:-10px;
    font-size:14px;
    font-weight:bold;
    }
    
    #product a:visited{
      color:#006B96;
    margin:-10px;
    font-size:14px;
    font-weight:bold;
    }
    
    #product a:hover{
      color:blue;
    }
    Works.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Matt:

    Thanks for the reply!

    It doesn't work here.. I've updated the test page with your css, but it doesn't change anything..

    Just so I'm clear, I want the pictures to be vertically centered(middle) in the productimage div. The productimage div is set to the correct height(265px).

    I haven't begun to look at it in Firefox yet.. I know there are some paddings that will mess it up..

    The code without the change suggested by Matt can be found at http://195.26.0.159/test2.htm


    Vidar

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

    Firefox won't let you absolutely place that element within the table cell while display:table is active. As you are using a table anyway why don't you simply use the table cell to carry out the vertical and horizontal centering and place the caption in a another cell underneath.

    If you want a css solution then I have some similar demos here but they are a little complicated to understand.

    http://www.pmob.co.uk/temp/vertical-align12.htm

    http://www.pmob.co.uk/temp/vertical-align10.htm

  5. #5
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't begun to look at it in Firefox yet.. I know there are some paddings that will mess it up..
    I just looked at it in Firefox and it was working.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I just looked at it in Firefox and it was working.
    It's not in mine

    In my firefox the images are aligned to the bottom of the cell and not the middle and all the captions are way outside the table at the bottom left corner of the screen and on top of each other (for the reasons I mentioned in my earlier post).

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by iTechno
    I just looked at it in Firefox and it was working.
    It's not working in mine.. Mine looks like what Paul described..


    Vidar

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    If you want a css solution then I have some similar demos here but they are a little complicated to understand.

    http://www.pmob.co.uk/temp/vertical-align12.htm

    http://www.pmob.co.uk/temp/vertical-align10.htm
    I've tried to use your css code, and the pictures are aligned correctly in Firefox, but not in IE.

    http://195.26.0.159/test4.htm

    Can you see why it doesn't work in IE?

    Vidar

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

    Can you see why it doesn't work in IE?
    Yes - you left out the ie specific code

    Code:
    <!--[if IE]>
    <style>
    .wrap span{position:absolute;top:50%;width:100%;left:0}
    .wrap a img {
     cursor: hand;
     position:relative;
     top:-50%;
     margin-top:-20px;
    }
    </style><![endif]-->
    That's what makes it work for ie

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.. I had never seen that syntax to use IE specific code before, so I just removed it... It works perfectly now..

    Vidar


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
  •