SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Jun 20, 2006, 08:19 #1
- 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
-
Jun 20, 2006, 08:24 #2
- 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; }
-
Jun 20, 2006, 13:04 #3
- 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
-
Jun 20, 2006, 15:00 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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
-
Jun 20, 2006, 16:44 #5
- 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..
-
Jun 21, 2006, 03:06 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I just looked at it in Firefox and it was working.
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).
-
Jun 21, 2006, 04:07 #7
- Join Date
- Mar 2004
- Location
- Norway
- Posts
- 55
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by iTechno
Vidar
-
Jun 22, 2006, 00:54 #8
- Join Date
- Mar 2004
- Location
- Norway
- Posts
- 55
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
http://195.26.0.159/test4.htm
Can you see why it doesn't work in IE?
Vidar
-
Jun 22, 2006, 05:24 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Can you see why it doesn't work in IE?
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]-->
-
Jun 22, 2006, 06:56 #10
- 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