How to vertically align

[ryy705]

Hello,
I please take a look at
http://www.jeanbrunone.com/leadtrack/leads.tpl.html

I am trying to make it look like :
http://www.wwwcomm.com/designs/webmax/leadTrackerUI.htm

I am having trouble lining up the icons,input boxes and go buttons at the top. I cannot seem to vertically line up the elements.

So far I have tried tables, dls, and lists. Could someone kindly suggest something?

Here is the trouble some code:

<ol>
<li style="display:inline;margin:0"><img alt="search" src="img/search.jpg /></li>
<li style="display:inline;padding-bottom:300px;"><input type="text" name="rangeA" style=""/></li>
<li style="display:inline;margin:0"><img alt="search" src="img/btnGo.jpg" /></li>
</ol>

As you can see no matter how much padding I add to the text field it does not move.

[ArtphotoasiA]

Hi there.... if I were you I will try with tables... it is simple.... it should fix the issue... othervise if you are more advandces in CSS you can try CSS float for the div of all the 3 block (otherwise will be vertical alligned) and put all of them inside a container div block centered in the middle of the page using margin auto proprierties .....

[ko ko]

Put this in your css file or embed in your HTML document.

ol {
       list-style:none;
       margin: 0;
       padding: 0;
       overflow: hidden
    }
ol li {
       display: block;
       float: left;
       height: -px /* how much height your biggest image in the list container, set the same height with the biggest image within the li tags or higher */
       line-height: -px /* same with height */
       list-style: none;
       margin: 0;
       padding: 0
      }
ol li input {
       vertical-align: middle
       }

I'm not sure it can help you because I was not tested it. If you want the element to vertically align, use height and line-height properties. Same values of height and line-height can place the content vertically align in it. And don't forget to validate your HTML document. Good luck friend...

[ryy705]

Thank you both.

I took Zero13's advice and got the result I wanted.
Could someone tell me how to get some spacing between the OLs?
Please take a look at:
http://www.jeanbrunone.com/leadtrack/leads.tpl.html

Here's the HTML:

<div id="subhead" style="clear:both;background-color:#F0F0F0;overflow:hidden;height:100px;">
		<div class="content" style="padding-top:30px;width:890px;margin-left:auto;margin-right:auto;padding-left:45px;">
		<ol>
			<li style=""><img alt="search" src="img/search.jpg"/></li>
			<li style="margin-top:10px;"><input type="text" name="rangeA" style="width:180px;"/>
			<br /><a href=""><span class="bluish">Reset</span></a></li>
			<li style="margin-top:8px;"><img alt="search" src="img/btnGo.jpg" /></li>
		</ol>
		<ol>
			<li style=""><img alt="search" src="img/dateRange.jpg"/></li>
			<li style="margin-top:10px;"><input type="text" name="rangeA" style="width:180px;"/>
			<br /><a href=""><span class="bluish">Reset</span></a></li>
			<li style="margin-top:8px;"><img alt="search" src="img/btnGo.jpg" /></li>
		</ol>		
		<a href=""><img alt="search" src="img/download.jpg"/></a>
		</div>
        </div><!--end subhead-->

Here is the CSS:

ol {
       list-style:none;
       margin: 0;
       padding: 0 45px;
       display:inline;
    }
ol li {
       display: block;
       float: left;
       height: 41px /* how much height your biggest image in the list container, set the same height with the biggest image within the li tags or higher */
       line-height: 41px /* same with height */
       list-style: none;
       margin: 0;
       padding: 0;
	   padding-left:5px;
      }
ol li input {
       vertical-align: middle
       }

As you can see I have added 45px padding to the left and right of the OLs. But I don't see any spacing between the two elements.
Please advise.

[ko ko]

Put float property for ol. Example

ol {
     list-style:none;
     margin: 0;
     padding: 0 45px;
     display:inline;
     float: left
}

It should be work.

[ryy705]

It is working. Thank you. I will test it further and post back my findings.

[ryy705]

Okay it works great in Firefox. I have to wait till tomorrow to check in IE.

Could you kindly explain why it didn't work without float?
Inline elements do not support top and bottom padding but they do support left and right padding. So, why wouldn't it work?

[ko ko]

It can work without float. But, you need to remove float from it child "li" tag, and give it inline instead of float. The "li" tag was now block level and it parent was inline.
Inline can't contain block level element.
So, the "li" was not under the control of "ol" and "ol" can't render it's child "li" correctly, and the padding ignore to "li".
When you float the "ol", the "ol" move left as far as it can, including it child li, so the "li" was rendered correctly by it parent "ol".
This may be wrong, because I'm not css expert or css guru, you need to ask css guru who has many experiences with css and xhtml.
Thanks and I hope you will be ok.