Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Vertical Alignment Problems (within a div)

    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.

    Code:
    {{* ---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
    Last edited by xxkylexx; 04-22-2006 at 03:48 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vertical-align only works like valign when used in tables.

    Set the line-height of those <div>s to the same as their height.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried this and it diddn't seem to work either. (I use Firefox)


    any other ideas?



    Thanks!!

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops. Sorry. It won't work because you have text under the image.

    Try this.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kravvitz
    Oops. Sorry. It won't work because you have text under the image.

    Try this.

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

  • #9
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator
    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.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #10
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Kravvitz
    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.

    Quote Originally Posted by Kravvitz
    Yup, already been there. Uses more hacks though.
    Last edited by Arbitrator; 04-22-2006 at 06:37 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any idea why I am getting this in IE only? Works great with other browsers.




    Code used:
    Code:
    {{* ---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:
    Code:
    /* ~~~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.

  • #13
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this.
    Code:
    #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 */
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #14
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply. However, it diddn't seem to work. Any other ideas?

  • #15
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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. You could use a class instead.

    Class and ID Selectors
    When should I use a class and when should I use an ID?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •