elementalgrace Posted December 21, 2007 Share Posted December 21, 2007 HulloI'm working on creating a design for a photo gallery at the moment, using Drupal CMS. It generates each of the thumbnails plus descriptions as a list, which is working fine but to make it a bit prettier, I want to vertically align all the content within the list item to the bottom. I have tried using vertical-align:bottom on the li in question but for some reason it appears not to be working. The code is as follows:HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta name="author" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="all" /> <meta name="description" content="intranet" /> <meta name="keywords" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" media="screen" href="themes/ttml/styles.css" /><!--[if lt IE 7]><link type="text/css" rel="stylesheet" media="all" href="themes/ttml/ie.css" /> <![endif]--><link rel="alternate" type="application/atom+xml" title="" href="/rss.xml" /> </head><body><div id="all"><!--HEADER--><div id="header"><a href="/drupal-5.3"><img src="themes/ttml/images/logo.png" alt="ttMobiles logo. Click on the image to return to the homepage" class="logo"/></a><!--TOP NAV--><ul class="links"><li class="first menu-1-1-2"><a href="/drupal-5.3/?q=image/tid" title="Image Gallery" class="menu-1-1-2">Gallery</a></li><li class="menu-1-2-2"><a href="/drupal-5.3/" title="Shortcut to home" class="menu-1-2-2">Home</a></li><li class="last menu-1-3-2"><a href="/drupal-5.3/?q=node/add" title="Calendar" class="menu-1-3-2">Calendar</a></li></ul><!--END TOPNAV--><img src="themes/ttml/images/header.jpg" height="60" width="794" alt="Decorative Images" /><!--END HEADER--></div><!--LEFT--><div id="left-sidebar"><div class="block block-menu" id="block-menu-116"><div class="blockinner"> <h2 class="title"> Service Delivery General </h2> <div class="content"> <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/29" title="Escalation">Escalation</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/31" title="Excel Bible">Excel Bible</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/32" title="Helpdesk Categories">Helpdesk Categories</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/30" title="HMRC">HMRC</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/26" title="Standard Objectives 1">Standard Objectives 1</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/27" title="Standard Objectives 2">Standard Objectives 2</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/28" title="Standard Objectives 3">Standard Objectives 3</a></li></ul> </div> </div></div><div class="block block-menu" id="block-menu-115"><div class="blockinner"> <h2 class="title"> Supplier Information </h2> <div class="content"> <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/25" title="Supplier Briefs">Supplier Briefs</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/24" title="Supplier Contact Details">Supplier Contact Details</a></li></ul> </div> </div></div><div class="block block-menu" id="block-menu-114"><div class="blockinner"> <h2 class="title"> Customer Information </h2> <div class="content"> <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/22" title="Account Owners">Account Owners</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/23" title="Billing Process">Billing Process</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/21" title="Customer Key Contact Details">Customer Key Contact Details</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/20" title="DDI Customer List">DDI Customer List</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/19" title="Existing Customer Briefs">Existing Customer Briefs</a></li></ul> </div> </div></div><div class="block block-menu" id="block-menu-46"><div class="blockinner"> <h2 class="title"> Service Delivery Standards </h2> <div class="content"> <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/10" title="General Standards">General Standards</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/8" title="Implementation">Implementation</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/9" title="In-Life">In-Life</a></li></ul> </div> </div></div><div class="block block-menu" id="block-menu-57"><div class="blockinner"> <h2 class="title"> Admin & Forms </h2> <div class="content"> <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/18" title="Admin Form Templates">Admin Form Templates</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/17" title="Company Benefits">Company Benefits</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/12" title="Company Policies">Company Policies</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/11" title="Health & Safety">Health & Safety</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/13" title="Processes & Procedures">Processes & Procedures</a></li></ul> </div> </div></div><div class="block block-menu" id="block-menu-64"><div class="blockinner"> <h2 class="title"> IT </h2> <div class="content"> <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/6" title="Set Up an Email Signature">Set Up an Email Signature</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/7" title="Using the Phone System">Using the Phone System</a></li></ul> </div> </div></div></div><!--END LEFT--><!--CONTENT--><div id="content"><h1>Test Gallery</h1><div class="tabs"></div><ul class="galleries"><li class="clear-block"><div class="pic"><a href="/drupal-5.3/?q=image/tid/1"><img src="http://192.168.1.20/drupal-5.3/files/images/DSCF0417.thumbnail.JPG" alt="Marion" title="Marion" class="image image-thumbnail " width="90" height="120" /></a></div><div class="gallerydetail"><h3><a href="/drupal-5.3/?q=image/tid/1">Christmas Party 2007</a></h3><div class="description"><p>Photos from the Christmas Party 2007 at the Fish in Sutton Courtnay.</p></div><p class="count">There is 1 image in this gallery</p><p class="last">Last updated: <em>Mon, 12/10/2007 - 12:03</em></p></div><div class="clear"></div></li></ul><ul class="images"><li><a href="/drupal-5.3/?q=node/45"><img src="http://192.168.1.20/drupal-5.3/files/images/IMG_1274.thumbnail.JPG" alt="in heaven there is no beer" title="in heaven there is no beer" class="image image-thumbnail " width="90" height="68" /></a><b class="imgbox"><a href="/drupal-5.3/?q=node/45">in heaven there is no beer</a></b><div class="author">Posted by: <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></li><li><a href="/drupal-5.3/?q=node/44"><img src="http://192.168.1.20/drupal-5.3/files/images/IMG_1305.thumbnail.JPG" alt="ay up the lads" title="ay up the lads" class="image image-thumbnail " width="90" height="68" /></a><b class="imgbox"><a href="/drupal-5.3/?q=node/44">ay up the lads</a></b><div class="author">Posted by: <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></li><li><a href="/drupal-5.3/?q=node/43"><img src="http://192.168.1.20/drupal-5.3/files/images/DSCF0419.thumbnail.JPG" alt="Ho ho ho ..." title="Ho ho ho ..." class="image image-thumbnail " width="90" height="120" /></a><b class="imgbox"><a href="/drupal-5.3/?q=node/43">Ho ho ho ...</a></b><div class="author">Posted by: <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></li><li><a href="/drupal-5.3/?q=node/42"><img src="http://192.168.1.20/drupal-5.3/files/images/IMG_1268.thumbnail.JPG" alt="test image3" title="test image3" class="image image-thumbnail " width="90" height="68" /></a><b class="imgbox"><a href="/drupal-5.3/?q=node/42">test image3</a></b><div class="author">Posted by: <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></li><li><a href="/drupal-5.3/?q=node/41"><img src="http://192.168.1.20/drupal-5.3/files/images/DSCF0410.thumbnail.JPG" alt="test 2" title="test 2" class="image image-thumbnail " width="90" height="120" /></a><b class="imgbox"><a href="/drupal-5.3/?q=node/41">test 2</a></b><div class="author">Posted by: <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></li></ul> </div><!--END CONTENT--><!--RIGHT--><div id="right-sidebar"><div class="block block-views" id="block-views-tracker"><div class="blockinner"> <h2 class="title"> Most Recent Posts </h2> <div class="content"> <div class='view view-tracker'><div class='view-content view-content-tracker'><div class="item-list"><ul><li><div class='view-item view-item-tracker'><div class='view-label view-label-node-title'>Title</div><div class='view-field view-data-node-title'><a href="/drupal-5.3/?q=node/45">in heaven there is no beer</a> </div><div class='view-label view-label-users-name'>Author</div><div class='view-field view-data-users-name'><a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></div></li><li><div class='view-item view-item-tracker'><div class='view-label view-label-node-title'>Title</div><div class='view-field view-data-node-title'><a href="/drupal-5.3/?q=node/44">ay up the lads</a> </div><div class='view-label view-label-users-name'>Author</div><div class='view-field view-data-users-name'><a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></div></li><li><div class='view-item view-item-tracker'><div class='view-label view-label-node-title'>Title</div><div class='view-field view-data-node-title'><a href="/drupal-5.3/?q=node/43">Ho ho ho ...</a> </div><div class='view-label view-label-users-name'>Author</div><div class='view-field view-data-users-name'><a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></div></li><li><div class='view-item view-item-tracker'><div class='view-label view-label-node-title'>Title</div><div class='view-field view-data-node-title'><a href="/drupal-5.3/?q=node/42">test image3</a> </div><div class='view-label view-label-users-name'>Author</div><div class='view-field view-data-users-name'><a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></div></li><li><div class='view-item view-item-tracker'><div class='view-label view-label-node-title'>Title</div><div class='view-field view-data-node-title'><a href="/drupal-5.3/?q=node/41">test 2</a> </div><div class='view-label view-label-users-name'>Author</div><div class='view-field view-data-users-name'><a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></div></li></ul></div></div></div> </div> </div></div><div class="block block-search" id="block-search-0"><div class="blockinner"> <h2 class="title"> Search </h2> <div class="content"> <form action="/drupal-5.3/?q=search/node" method="post" id="search-block-form"><div><div class="container-inline"><div class="form-item"> <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" /></div><input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" /><input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="175313d904fa5b315ef4a19b65ae7762" /><input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form" /></div></div></form> </div> </div></div><div class="block block-poll" id="block-poll-0"><div class="blockinner"> <h2 class="title"> Poll </h2> <div class="content"> <div class="poll"><div class="title">What do you think of the ttmobiles intranet</div><div class="text">Great</div><div class="bar"><div style="width: 67%;" class="foreground"></div></div><div class="percent">67%</div><div class="text">Rubbish</div><div class="bar"><div style="width: 33%;" class="foreground"></div></div><div class="percent">33%</div><div class="total">Total votes: <em>3</em></div></div><div class="links"><ul class="links"><li class="first last 0"><a href="/drupal-5.3/?q=poll" title="View the list of polls on this site." class="0">Older polls</a></li></ul></div> </div> </div></div><div class="block block-user" id="block-user-1"><div class="blockinner"> <h2 class="title"> admin </h2> <div class="content"> <ul class="menu"><li class="collapsed"><a href="/drupal-5.3/?q=node">Content</a></li><li class="leaf"><a href="/drupal-5.3/?q=map/node">Node locations</a></li><li class="leaf"><a href="/drupal-5.3/?q=user/1">My account</a></li><li class="leaf"><a href="/drupal-5.3/?q=map/user">User locations</a></li><li class="collapsed"><a href="/drupal-5.3/?q=admin">Administer</a></li><li class="leaf"><a href="/drupal-5.3/?q=logout">Log out</a></li></ul> </div> </div></div></div><!--END RIGHT--><div style="clear:both;"> </div></div></body></html> CSS /*ALL*/*{margin:0; padding:0;}body {margin:0; padding:0;text-align:center; font:100% arial, sans-serif;background-color:#217eb8}#all{width:794px;border:1px #c0c0c0 solid;margin:auto; background-color:#ffffff; text-align:left;}/*HEAD*/#header{ width:794px; background: url(images/topnav_bg.gif) no-repeat; background-color:White;}#header img{padding:0; margin:2px 0 0 0;}.logo{float:left;border:none; height:39px; width:100px;}#header .links{margin:5px 3px 0 0; padding:0;float:right;}#header .links li{display:inline; margin: 0px 4px 0px 0px; text-align:right; letter-spacing:-1px; font: bold 85% arial, sans-serif;}#header .links li a{text-decoration:none; color:#000066;}#header .links li a:hover, .links li a.on{color:#868686;}/*MISC*/h1, h2, h3, h4, h5, h6{text-transform:capitalize;letter-spacing:-1px;}h1{ font: bold 95% arial, sans-serif; color:#000066; padding: 5px 5px 5px 0;}h2{ font: bold 120% arial, sans-serif; color:#494949; padding: 5px;}h3{ font: bold 85% arial, sans-serif; color:#09405C ; padding: 5px;}h4{font: bold 82% arial, sans-serif; color:#1A4F75; padding: 5px;}h5{ font: bold 82% arial, sans-serif; color:#000066 ; padding: 5px; background: url(images/bgnavigation.jpg) repeat-x 0px 100%; margin: 0 5px 0 5px;border:solid 1px #cedbe3;}h6{font: bold 75% verdana, sans-serif; color:#000066 ;font-weight:bold;}p{color:#494949;}a{text-decoration:underline; color:#000066;}a:hover{color:Gray;}.tabs ul, .tabs ul li {display:inline; margin-right:15px; padding-bottom:10px;}.tabs a{text-decoration:none;}.tabs a:active{font-weight:bold;}.node{padding-top:10px;}.clear{clear:both;}/*LHS*/#left-sidebar{width:195px; background-color:#e2eff7; min-height:300px; height:auto !important; height:300px;float:left; border-top: 1px solid #cedbe3; border-right:1px solid #cedbe3;}.left-block{border-right: 1px solid #cedbe3;}li.leaf {border-bottom: 1px solid #cedbe3; list-style-type:none; letter-spacing:-1px; font: normal 0.8em verdana, sans-serif;}.leaf a {background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.leaf a:hover {background: #e2eff7;color: #553;}ul.menu ul.menu li.leaf a{font-size:1em; }ul.menu ul.menu ul.menu li.leaf a{font-size:0.85em; text-indent:25px;}li.expanded{border-bottom: 1px solid #cedbe3; list-style-type:none; letter-spacing:-1px; font: verdana, sans-serif;}li.expanded a{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;font-size:0.8em; color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.expanded a:hover {background: #e2eff7;color: #553;}li.collapsed{border-bottom: 1px solid #cedbe3; list-style-type:none; letter-spacing:-1px; font: verdana, sans-serif;}li.collapsed a{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.collapsed a:hover {background: #e2eff7;color: #553;}ul.menu ul.menu li.collapsed a{font-size:0.8em;}ul.menu li.expanded a.active{font-size:0.8em; font-weight:bold;}ul.menu li.collapsed a{font-size:0.8em;}/*MAIN*/.title{background: url(images/block_title_bg.gif) no-repeat; height:29px; letter-spacing:-1px; font: bold 85% arial, sans-serif; color:#000066; text-align:center; padding:5px 0 0 0; margin:0;}#content{letter-spacing:-1px; font: normal 73% verdana, sans-serif; color:#494949; line-height:140%;width:373px; margin-left: 7px;min-height:510px; height:auto !important; height:510px;float:left; background-color:#f6f6f6; padding: 0 10px 20px 10px;}#content p{line-height:150%; padding:5px;}#content h2.title{background:none; text-align:left; font-size:120%;}#content h1{font-size:120%;}#content h3{background:none; text-align:left; font-size:117%;margin-left:0; padding-left:0;}#content h4{background:none; text-align:left; font-size:110%;}#content h5{background:none; text-align:left; font-size:110%;}#content h6{background:none; text-align:left; font-size:110%;}#content div.tabs{margin-left:5px;}/*GALLERY*/ul.galleries{margin:0; padding:0; }ul.galleries li.clear-block{background:#e7e7e7; border: 1 px solid gray; list-style-type:none; margin: 5px 0 5px 0; width:99%; padding-bottom:5px;}ul.galleries li.clear-block h3 a{text-decoration:none;}ul.galleries li.clear-block img{display:block; margin:0; padding-bottom:0;}ul.galleries li.clear-block div.pic{float:left; width:90px; margin: 5px 0 0 5px;}ul.galleries li.clear-block div.pic img{border:none;}ul.galleries li.clear-block div.gallerydetail{float:left; text-align:left; width:250px; padding: 0 0 0 10px;}#content ul.galleries li.clear-block div.description{width:200px;}/*SUB GALLERY*/ul.images li{background:#e7e7e7; width:100px; margin-right:4px; margin-bottom:4px;padding:10px; float:left; min-height:175px; height:auto !important; height:175px; list-style-type:none; text-align:center;}ul.images li img{border:none;}ul.images li b.imgbox a{text-decoration:none; text-transform:capitalize; }.imgbox{text-align:center; width:90px; display:block;}#content ul.links li{display:inline; list-style-type:none; margin-right:10px;}span.new{font-weight:bold;}#content ul.images li{vertical-align:bottom;}/*ADMIN*/#content p.description{margin-left:0; padding-left:0;}#content div.description{font-size:1.1em; color:#C00000; padding:3px 0; clear:both; width:330px; overflow: auto; }#content div.compact-link{margin-left:5px;}#content dl.admin-list{background:#e7e7e7; padding:5px 15px;}#content dt{font-weight:bold; padding-bottom:3px;}#content dd{font-weight:normal; padding-bottom:10px;}#content ul.tips li{list-style:none;}#content div.item-list{padding:5px 0 5px 0;}#content div.item-list ul li{font: 9pt verdana, sans-serif; list-style-type:disc; margin:5px 0 5px 25px;}#content div.item-list ul li a{text-decoration:none; }#content div.box{margin: 5px 0;}/*READMORE*/#content li.node_read_more{text-align:right; list-style:none;letter-spacing:-1px; font: normal 115% verdana, sans-serif; color:#000066;}#content li.node_read_more a{text-decoration:none;}#content ul.menu{margin-left:25px;}#content li.leaf{border:none; list-style-type:disc; font-size:1em;}#content li.leaf a{background:none;}/*RECENT*/div.node h2.title{background:none; text-align:left;} div#block-views-tracker div.item-list li{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; height:auto; padding:5px; border-bottom: 1px solid #cedbe3; font-size:0.75em;} div.view-label{font-weight:bold; width:30%; display: -moz-inline-stack; /*firefox*/display:inline-block; vertical-align:top;}* html div.view-label{display:inline;}* + html div.view-label{display:inline;}div.view-field{ width:69%; display: -moz-inline-stack; /*firefox*/display:inline-block;}* html div.view-field{display:inline;}* + html div.view-field{display:inline;}/*MAIN:FORMS*/#content .form-item input, #content .form-item textarea {font:normal 9pt Verdana, Sans-Serif; }#content .form-item select, #content .form-item textarea {width:90%; }#content .form-item input.form-text, #content .form-item input.form-file{width:90%; color:#000066;}#content .form-item textarea{ width:90%; font:normal 9pt Verdana, Sans-Serif; color: #000066;}#content div.form-item label{font:normal 9pt Verdana, Sans-Serif;float:left; display:block; clear:both; color:#000066; font-weight:bold;}#content div.form-item label.option{font:normal 9pt Verdana, Sans-Serif; }div.form-radios{display:block;}#content div.picture{margin:5px;}#content div.form-item select.form-select{font:normal 9pt Verdana, Sans-Serif;}#content div.form-item input.form-file{border: 1px solid ccc;}#content input.form-submit{margin-top:10px;}input.form-submit{border: 1px solid #000066; background-color:White; color:#000066; min-height:20px; height:auto !important; height:20px; width:10em;}fieldset{margin: 10px 10px 20px 0; padding: 5px; width:95%;}#content fieldset.collapsible{display:block;}#content legend{font-weight:bold; color: #000066;}#content fieldset table{width:330px;}#content div.help ul{margin: 10px 0 5px 25px;}#content div.help li{margin:5px 0;}/*MAIN:TABLES*/#content table th{background-color:#000066; color:#ffffff; font-weight:200; text-align:center;padding:5px; text-transform:capitalize;}#content table th a{color:#ffffff; text-decoration:none;}#content table th img{border:none;}#content table tr{background-color:#e7e7e7; }#content table td{background-color:#e7e7e7;padding:5px; text-transform:capitalize;}#content table td.module{font-weight:bold; background-color:#cecece; text-transform:capitalize;}#content table td label{font-size:1em; width:100%; float:left; display:block;}#content table td label.option{text-align:center; margin:auto;}#content table div.form-item input.form-text{width:100px; letter-spacing:-1px; font:1.18em verdana, sans-serif; margin-top:10px;}#content table td div.form-item select.form-select{width:100px;}#content table td input.form-submit{height:auto; width:auto;}table#blocks td.region{background-color:#cecece; font-weight:bold;}table#blocks td div.form-item select.form-select{width:75px; letter-spacing:-1px; font:1.18em verdana, sans-serif; }/*PERMISSIONS*/#content table#permissions td.permission{vertical-align:top;}/*PAGING*/#content div.pager{margin-top:10px;}#content div.pager span.pager-list a, .pager-next, .pager-last, .pager-current {padding-left:5px; padding-right: 5px;}/*USER*/#content ul.clear-block{margin:0; padding:0;}#content ul.clear-block li{list-style-type:none;}#content dd.a{width:100%; height:60px;}#content dd.b{width:100%; }#content dt{display:block; width:100%;}#content table td div.item-list ul{margin:0; padding:0;}#content table td div.item-list ul li{list-style-type:none; margin:0; padding:0;}/*RHS*/#right-sidebar{width:190px; background-color:#e2eff7; min-height:300px; height:auto !important; height:300px;float:right;border-top: 1px solid #cedbe3;border-left:1px solid #cedbe3;}#right-sidebar form, #right-sidebar div.poll{padding-left:10px;}#right-sidebar div.text{font: normal 75% verdana, sans-serif; color:#000066; margin:0; padding:0;}#right-sidebar div.percent{font: normal 75% verdana, sans-serif;color:#000066;}#right-sidebar div.total {font: bold 75% verdana, sans-serif;color:#000066; padding: 5px 0;}#right-sidebar .poll .bar {height: 1em; margin: 1px 0; background-color: #cde7fe; margin-right:15px;}#right-sidebar .poll .bar .foreground {background-color: #aecae0; height: 1em; float: left;}#right-sidebar .links{float:none; letter-spacing:-1px;font: normal 0.89em verdana, sans-serif;margin-bottom:10px;text-align:right; margin-right:5px;}#right-sidebar .links li{list-style:none;}#right-sidebar .links a{ text-decoration:none;}#right-sidebar .links a:hover{color:#868686;}#right-sidebar input.form-submit{width:5em;}#right-sidebar div.item-list{margin:5px 0;}#right-sidebar div.item-list li{list-style-type:none; font:0.8em verdana, sans-serif; letter-spacing:-1px;}#right-sidebar div.item-list li a{text-decoration:none;}#block-search-0, #block-poll-0{border-bottom:1px solid #cedbe3; background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; }/*MAIN:POLL*/div.text{font: normal 100% verdana, sans-serif; color:#000066; margin:0; padding:0;}div.percent{font: normal 100% verdana, sans-serif;color:#000066;}div.total{font: bold 100% verdana, sans-serif;color:#000066; padding: 5px 0;} div.title{background:none; text-align:left; font: normal 75% verdana, sans-serif; padding-bottom:5px;}.container-inline{padding-bottom: 10px; padding-top:10px;}.form-item input.form-text {border: 1px solid #000066; background-color:#ffffff; min-height:20px; height:auto !important; height:20px;}.vote-form{padding-bottom: 10px; padding-top:10px;}.form-radios p{margin-bottom:4px;}.form-item {font: 82% verdana, sans-serif;letter-spacing:-1px; padding: 1px 0 2px 0; margin:3px 0 3px 0;} .form-item input {height:auto; width:auto;margin-right: 0.5em; background-color:Transparent; border:none;} If anyone could shed any light, I'd really appreciate it.All the bestEG Link to comment Share on other sites More sharing options...
elementalgrace Posted December 21, 2007 Author Share Posted December 21, 2007 Sorry - am an idiot. Just realised that vertical-align only applies to inline elements and table cells and that an LI is a block level element. Hmm ... if anyone has a genius idea on working around this to vertically align the content to the bottom.I did have a go at messing about with the PHP to try and insert a div/span inside the li that I could vertically align but my PHP skills are incredibly basic at best and I am quite new to both Drupal and PHP and I can't get it to work right. Grr. Link to comment Share on other sites More sharing options...
Ingolme Posted December 21, 2007 Share Posted December 21, 2007 The CSS vertical-align tells the page how to align certain elements compared to the text. For example, images."vertical-align: middle" will make the text appear next to the middle of the image rather than aligned with the bottom of the image.In order to align something in the list item to the bottom you might be able to do this (I haven't tested myself).<ul> <li style="position: relative"> <div style="position: absolute; bottom: 0;">Some text</div> </li></ul> Link to comment Share on other sites More sharing options...
elementalgrace Posted December 21, 2007 Author Share Posted December 21, 2007 "vertical-align: middle" will make the text appear next to the middle of the image rather than aligned with the bottom of the image.Each li is currently working as a floated box with the image at the top of the box with the text underneath. I want all of that content to be bottom aligned. This is basically because the gallery can display either portrait or landscape photographs and it just looks a bit neater to have all the content bottom aligned so that it's continuous no matter whether it's a portrait or landscape photo that it's displaying. Does that make sense?Because the list code is generated and my PHP skills are rudimentary at best I want to see if there is a CSS solution I can implement using just the existing HTML? I have posted in the PHP section asking for help with adding in an extra span tag inside the li as I could then style that appropriately and vertically align it as I want as that's the only viable solution I could think of. I was rather hoping that a fresh pair of eyes might see something I'm missing... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.