...

View Full Version : Vertical Alignment Problems (within a div)



xxkylexx
04-22-2006, 04:45 AM
Hey guys,

Having a problem here with vertically aligning images and text within a <div>. I have a loop that is running to display a users thumbnailed images within their gallery on my image hosting site. However, not all thumbnails are the same height, causing it to look stagard within each row. So my solution to make it look "nicer" would be to vertically align the contents of each <div> centered.

I know the first thing your going to say is use <div style="vertical-align:middle">, but I have tried this and it isn't working, which I do not understand. Also, looping <td>'s would be insufficient since they won't break down to another row when space runs out on the current row. They would just keep going out into one single row.

My code is pasted below of the entire section that is being looped (loop begins within the {{section}} tags). Any helps/tips would be helpful.



{{* ---A loop for each thumbnail---- *}}
<table width="100%">
<tr>
<td align="center" valign="top">
{{section name=id loop=$image_name}}
<div style="float: left; width: 126px; height: 150px; vertical-align:middle ">
<a href="javascript:image_details_popup('details.php?name={{$image_name[id]}}', 700, 400)"><img src="images/{{$username}}/-{{$image_name[id]}}.png" style="border:1px solid #000000; " /></a><br />
<small>{{$image_name[id]}}<br />
{{$time_uploaded[id]}}</small>
</div>
{{/section}}
</td>
</tr>
</table>




Thanks!
Kyle

Kravvitz
04-22-2006, 05:32 AM
vertical-align only works like valign when used in tables. (http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align)

Set the line-height of those <div>s to the same as their height.

Arbitrator
04-22-2006, 05:49 AM
You can vertically align content in a page division using the following CSS attributes:

<div style="display: table-cell; vertical-align: middle;"></div>

This doesn't work in MSIE however.

xxkylexx
04-22-2006, 05:59 AM
I tried this and it diddn't seem to work either. (I use Firefox)


any other ideas?



Thanks!!

Arbitrator
04-22-2006, 06:09 AM
I just tested that code in Firefox 1.5.0.2 to make sure and it does indeed work. Your box needs to be bigger than the content for it to have any effect however; this means that your height property needs to be specified and set to a size taller than the content for it to work.

Kravvitz
04-22-2006, 06:32 AM
Oops. Sorry. It won't work because you have text under the image.

Try this. (http://www.dynamicsitesolutions.com/css/vertically_centering_elements/)

Arbitrator
04-22-2006, 06:44 AM
Just to note, if you use Kravvitz' code you may want to use a conditional comment to issue commands to MSIE instead of the star-html hack since they're fixing that hack in IE7.

xxkylexx
04-22-2006, 07:13 AM
Oops. Sorry. It won't work because you have text under the image.

Try this. (http://www.dynamicsitesolutions.com/css/vertically_centering_elements/)


Yea, I think that is what is causing the problems.

Kravvitz
04-22-2006, 07:27 AM
Just to note, if you use Kravvitz' code you may want to use a conditional comment to issue commands to MSIE instead of the star-html hack since they're fixing that hack in IE7.
You don't have to. The comment before the doctype on that page puts IE6-7 in backwards compatibility mode (aka quirks mode). In backwards compatiblity mode IE7 support the star html hack; in Standards mode it doesn't.

xxkylexx
04-22-2006, 07:33 AM
Great. Solution is here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Arbitrator
04-22-2006, 07:35 AM
You don't have to. The comment before the doctype on that page puts IE6-7 in backwards compatibility mode (aka quirks mode). In backwards compatiblity mode IE7 support the star html hack; in Standards mode it doesn't.Ah, interesting bit of information; didn't know that.

That is assuming that he wants to display his web page in quirks mode though which in and of itself can cause browser-compatibility problems.


Great. Solution is here: http://www.jakpsatweb.cz/css/css-ver...-solution.html (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html)Yup, already been there. Uses more hacks though.

xxkylexx
04-22-2006, 08:18 AM
Any idea why I am getting this in IE only? Works great with other browsers.

http://img101.imageshack.us/img101/84/blah6oe.jpg


Code used:


{{* ---A loop for each thumbnail---- *}}
<table width="100%">
<tr>
<td align="center" valign="top">
{{section name=id loop=$image_name}}
<div id="outer">
<div id="middle">
<div id="inner">
<a href="javascript:image_details_popup('details.php?name={{$image_name[id]}}', 675, 450)"><img src="images/{{$username}}/-{{$image_name[id]}}.png" style="border:1px solid #000000 " /></a><br />
<small>{{$image_name[id]}}<br />
{{$time_uploaded[id]}}</small>
</div>
</div>
</div>
{{/section}}
</td>
</tr>
</table>



CSS bit:


/* ~~~Start Vert Align of Div's~~~ */

#outer{
float: left;
width: 120px;
height: 150px;
overflow: hidden;
position: relative;
border: 1px dashed #d0dbe9;
}

#outer[id]{
display: table;
position: static;
}

#middle{
position: absolute;
top: 50%;
} /* for explorer only*/

#middle[id]{
display: table-cell;
vertical-align: middle;
position: static;
}

#inner{
position: relative;
top: -50%
} /* for explorer only */

#inner[id]{
position: static;
text-align: center;
}

/* ~~~End Vert Align of Div's~~~ */





Thanks, yet again.

Kravvitz
04-22-2006, 10:17 AM
Try this.

#middle{
position: absolute;
top: 50%;
left: 50%;
} /* for explorer only*/

#middle[id]{
display: table-cell;
vertical-align: middle;
position: static;
}

#inner{
position: relative;
top: -50%
left: -50%;
} /* for explorer only */

xxkylexx
04-22-2006, 04:08 PM
Thanks for the reply. However, it diddn't seem to work. Any other ideas?

Kravvitz
04-23-2006, 12:03 AM
I missed this yesterday, but at the top of your X/HTML code you have a note that says "A loop for each thumbnail", which leads me to believe that you have non-unique IDs which would cause problems.

IDs should be unique. (http://www.w3.org/TR/html401/struct/global.html#adef-id) You could use a class instead. (http://www.w3.org/TR/REC-CSS2/selector.html#class-html)

Class and ID Selectors (http://www.htmldog.com/guides/cssintermediate/classid/)
When should I use a class and when should I use an ID? (http://css-discuss.incutio.com/?page=ClassesVsIds)

xxkylexx
04-23-2006, 02:51 AM
Changed them all to classes and adjusted the stylesheet to reflect that, but it diddnt seem to fix that problem with IE.


And now has a new problem in the other browsers (FF, Opera).

http://img184.imageshack.us/img184/1374/blah2yi.jpg


I have now changed it back to id's as that seemed to work good in for FF and Opera. What's the difference betweek id's and classes in regard to CSS?.. except the fact that id's need to be unique?

Any more ideas on fixing this issue with IE as stated a few posts up?



Thanks again!

nathan_lamothe
04-23-2006, 03:53 AM
Take a look at Kravvitz's post (#15) to see the differences between id's and classes wrt css... he provided some usefull links.

Arbitrator
04-23-2006, 04:00 AM
Yeah, the basic idea is that an ID is a unique identifier, that is nothing else shares the same ID (which would be problematic if you need to make a JavaScript call on one thing but its ID was shared for example). Classes are just what they sound like, a class, that is group of things that share similar traits. Use an ID on things you know are unique to a page (for example, you can use the same ID for the layout container on each page) and classes for groups of things like table cells with identical styling.

xxkylexx
04-23-2006, 04:13 AM
Great. Got it all working properly with classes now. However, still having the same problem with IE in regards to post #12. Any more ideas?


Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum