I can't get a vertical-align declaration to work. I have a thin blue bar in the footer of my webpage and I can't get the items on it to stop bleeding down into the space below.
Here's the HTML...
Code:
<div id="subnav">
[list]
<li><img src="images/mag_glass_icon.gif" width="21" height="20" border="0" /><a href="#">FIND YOUR NEW HOME</a></li>
<li> <img src="images/arrow_icon.gif" width="15" height="20" border="0" />
<a href="#">SERVICE PARTNER SIGN-UP</a></li>
<li> <img src="images/lock_icon.gif" width="17" height="20" border="0" />
<a href="#">TEAM MEMBER & CLIENT LOGIN</a> <form id="subnavForm"><input type="text" width="50" border="1" /><input type="image" src="images/blue_arrow.gif" width="19" height="20" border="0" alt="submit button" onmouseover="this.src='images/blue_arrow2.gif'" onmouseout="this.src='images/blue_arrow.gif'"/></a></form></li>
</ul>
</div>
I've tried combinations for various vertical-alignments, but they don't have any impact. It doesn't matter if I use or don't use margins or padding, including margin:auto. I've tried using wrapper divs, but nothing is working.
The images are vertically centered but the text and form fields are not. I have the option to get rid of the text and use images for them (a lousy solution, but possible). However, my text box is half in the blue of the div and half in the beige "below" it. You can see what's happening in the footer here at our demo,
http://www.thehiphouse.com/staging/s...ign/index.html.
-------------------------
Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe
When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper
Chroniclemaster1, Founder of
www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
vertical-align problems
