Hi,

I looked at all my CSS books, searched on the 'net but still cannot find
that easy answer...

I want to align a text input and a button with the bottom of a background
image. Basically the image has the space for the input and button at the
bottom. My HTML & CSS show the text input and button superimposed with the
background image, but at the top.

CSS:

.globalheader {
     width: 780px;
     height: 193px;
    }
.globalheader input{
     vertical-align: bottom;
    }

HTML:

<div class="globalheader" style='background-image:
url("${createLinkTo(dir:'images',file:'header.png')}")'>
     <input value="enter an address here" size="50" name='searchaddress'/>
     <input name="search" value="GO FIND IT!" type="submit">
</div>

I know that "vertical-align: bottom" is valid only within an inline element
but I can't figure out what to use. I tried to use a SPAN instead of a DIV
but then the image size is not applied anymore.
I also use the YUI CSS files 'reset-fonts.css' and 'base-min.css' but I
don't think it's relevant here.

Thanks for your help.

Fred
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to