Sent by Michael Hulse on 4 November 2005 21:09
On Nov 4, 2005, at 1:14 PM, Don Hinshaw wrote:
> Hi list,
> I am trying to vertically align a text field with two adjacent
> elements:
> a graphic label and a graphic button.
> The working page is here:
> http://test.hinshawdesign.com/css/slpl/cluster_masthead_v2.html
> Here is what it should look like:
> http://test.hinshawdesign.com/css/slpl/masthead_sample.jpg
>
> Here are the problems that I have seen so far:
> 1. Safari: the text field is dropping down so it is partially outside
> the green area
> 2. IE6/ Win 2K: The green box is expanding vertically to become too
> tall
> 3. Opera 8.5/Win2K: the three elements are all dropping down in the box
> so they are no longer aligned with the words "Steedman Exhibit"
>
I would highly suggest that you use a label for your text field... any
reason why you are using an image? The "search.gif" looks like regular
web text... I would use CSS to style the label... Here is some code I
use for one of my sites:
#yourDiv label {
font: normal .8em Arial, Helvetica, sans-serif;
color: #666;
text-align: right;
padding: 0 1em;
width: 175px; /* Use to move most form content left/right on page. */
float: left;
clear: left;
}
/* Set the width for 'input' elements: */
#yourDiv input {
color: #333;
border: 1px solid #555;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 1px;
width: 150px;
}
<label for="search">Search: </label><input type="text" value=""
name="search" id="search" maxlength="100" />
Also, I would make your logo a background image rather than a
transparent gif. Makes things a bit more simple.
Hopefully the above css does not confuse you... You may even be able to
get away with something as simple as:
#yourDiv label {
font-size: 10px;
color: #333;
}
#yourDiv input {
width: 125px; /* Width of input items in #yourDiv */
border: 1px solid #999;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
}
Hth,
Micky
--
BCC for Privacy!
http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html
----------------------------------
My del.icio.us: http://del.icio.us/mhulse
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
