Vertical align form input-field and label text [Archive]

View Full Version : Vertical align form input-field and label text

domisan124

08-31-2006, 01:00 PM

Hi,

Has anyone ever tried a simple form like :
I sleep ___ hours per day.

Where ___ is an input field.

The default behaviour in FF does exactly what I want, namely, the "normal" text like "I sleep" is aligned along an imaginary vertical line with the text the user enters in the input field.

It basically means it looks like : I sleep 8 hours per day. Means, the bottom of the 'e' and '8' are on the same "line".

In IE however, I just can't make it happen... The text in the input field always floats higher than the "normal" text, especially when you add some bottom padding in the field. In the example the '8' would not be sitting on the line...

Any ideas, i'm getting desperate
Regards

Arbitrator

08-31-2006, 02:53 PM

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<title>HTML 4.01 Strict Document</title>

<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
html {
padding: 150px;
background: #222;
color: white;
font: 16px Verdana, Geneva, sans-serif;
}
#outer {
color: red;
text-decoration: underline;
}
#inner {
color: white;
}
input {
width: 45px;
background: #444;
color: inherit;
font: inherit;
text-decoration: underline;
}
</style>



</head>
<body>
<div id="container">

<span id="outer">
<span id="inner">
I sleep <input type="text" value="eight (8)"> hours per day.
</span>
</span>

</div>
</body>
</html>

domisan124

08-31-2006, 06:17 PM

Hm, I confirm that the exact example works... But it doesn't seem to work for me for the reason that i want the input field to be padded. Once you add a little padding at the bottom of the input field it breaks down in IE :(

Thanks for the effort.

Kravvitz

09-01-2006, 12:06 AM

You could try tweaking the vertical-align property (http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align).

Arbitrator

09-01-2006, 04:39 AM

Already tried it before I decided upon the margin method. I couldn't get that property to suit his purpose.

Kravvitz

09-01-2006, 06:00 AM

Take a look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
p, p input.inSentence {
font-family: verdana,tahoma,sans-serif;
}

input.inSentence {
vertical-align: middle;
border: 0 none;
border-bottom: 1px solid #000;
background-color: inherit;
font-size: 1em;
}
</style>
</head>
<body>

<form action="#">
<p>Lorem ipsum <input type="text" class="inSentence"> dolor sit amet.</p>
</form>

</body>
</html>

domisan124

09-01-2006, 07:00 AM

Thanks for trying guys :) but like i said before ... if you add padding to the input field so the entered text doesn't stick to the sides it doesn't work (i wanted padding because i really wanted to simply change the background color of input fields inside a flowing text so it stands out).

I tried different combinations of putting the text and/or input field inside label's, p's, div's with all sorts of combinations of vertical-align properties, but nothing i do seems to work in IE.

Did i discover a special quirk :eek: :D ?

Arbitrator

09-01-2006, 06:19 PM

but like i said before ... if you add padding to the input field so the entered text doesn't stick to the sides it doesn't work (i wanted padding because i really wanted to simply change the background color of input fields inside a flowing text so it stands out).If you just wanted to change the background color of a section of text, why not use the span element? There aren't really rules governing the specific presentation of form elements so I don't think that it can really be considered a bug or anything with IE.

domisan124

09-04-2006, 09:46 AM

Thx all for the feedback but everybody seems to be missing the point ...

The goal is to have a text with input fields at some locations. The input fields must be PADDED (eg. 4px) and the surrounding text and the text inside the input fields must be on the same "baseline".

_______________________________________________________________
I'm a perfectionist and proud of it !

chreo

09-04-2006, 03:58 PM

to move the text back down where you want it where the padding has pushed it up, put a corresponding negative margin-bottom for IE only (conditional comment)
I have given up on having only one style sheet, there is always need for some "tweaking" with IE!