Zymic Webmaster Forums > Syling Form Input Boxes

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

Jetteh22

Sep 16 2008, 09:35 PM

Hello,
I'm just testing with styling HTML form input boxes (single line for now) and have a quick question with line-height issues...

http://www.thinkcreactive.com/forms/ This shows the example. Below are screenies with FF and IE and you can see the (slight?) difference, though I want it to be the same.

For the life of me I can't figure out a FF fix (as it works properly in IE).

FF:

IE:

As you can see the FF version is slightly higher.. His is the CSS I have for the input boxes:

CODE

.inputtext {
background: url('input-text.png') transparent no-repeat;
width: 400px;
height: 25px;
font-size: 12pt;
line-height: 150%;
padding: 0px;
border: 0px;
margin: 0px;
text-align: center;
font-family: Arial; }

Any ideas for fixes?

EDIT: It's FF3 and IE8

EDIT 2: I have tried using line-height: 25px; and it does the same thing as the 150% so that is not a possible fix.

d3monic

Sep 16 2008, 11:09 PM

vertical-align: middle;

or

text-align: middle;

maybe?

Jetteh22

Sep 17 2008, 04:26 AM

Nope, neither work but thank you for the help :\

Andrew

Sep 17 2008, 06:27 AM

Change your css to this:

CODE

.inputtext {
background: url('input-text.png') transparent no-repeat;
width: 400px;
height: 25px;
font-size: 12pt;
padding-top: 2px;
border: 0px;
margin: 0px;
text-align: center;
font-family: Arial;
}

I got rid of the line height and changed the padding to a padding-top with a value of 2px. Only issue I noticed was in ie8 it was still 1px higher. But thats the best I could do. It's not too noticeable unless you whip out an on screen ruler (which I did

).

I don't know if it matters, but I also added the character encoding meta line. Here's my exact source if you want it.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Styling Web 2.0?</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/

.inputtext {
background: url('input-text.png') transparent no-repeat;
width: 400px;
height: 25px;
font-size: 12pt;
padding-top: 2px;
border: 0px;
margin: 0px;
text-align: center;
font-family: Arial;
}

/*]]>*/
</style>
</head>
<body>

<input type="text" class="inputtext" value="Text Here">


</body>
</html>

Jetteh22

Sep 17 2008, 06:38 AM

Thanks for the help!

Andrew

Sep 17 2008, 09:21 AM

I just noticed I said IE8 and I really have IE7 but I don't think that will matter since I saw the same error in ie7 as your screenshot. Let me know if it works.

Jetteh22

Sep 17 2008, 05:33 PM

Works good enough thanks

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.