I’m trying to set a selection box height to equal that of the textboxes on the left (go here and click on ‘Request Maintenance’ in the top right corner). I’ve tried line-height, but Safari doesn’t seem to display it correct. IE & FF are fine.
Thank you.
Looks fine in Safari to me (better, in fact). What platform are you on? I’m on a Mac.
Trying to manually set the size of form elements cross-browser is an effort in futility. The HTML specification does not actually SAY how form elements are supposed to look, and the CSS specification doesn’t clearly say how they should accept style. Because of this every browser maker did what they do best…
Their own damned thing and to hell with what anyone else is doing.
IE has a fixed extra px padding overwhich you have no control, ignores height and obeys line-height. FF has extra EM padding you have no control over and ignores line-height while obeying height. Opera treats all of them exactly as if they were inline-block with no extra padding… and webkit…
Don’t even get me STARTED about webkit based browsers and form elements. You’ll spend most of your life digging for browser specific CSS settings to strip their extra crap off them.
Usually I just give up, set the borders to the same as my desired background color, then put a image behind them or wrap them in elements that actually accept style in a consistent manner.
in THEORY -webkit-appearance:none; may help on those elements, but I wouldn’t count on it.
Pixel perfect with forms as a rule of thumb - not going to happen.
As Jason said above it’s not possible to get pixel perfection especially as IE6 and 7 won;'t let you change the height of the select element at all. All you can do in those browsers is increases the font-size which will make the element bigger but is of course no real use.
Selects in safari don’t take height but you can increase the line-height until you get something that looks close in each although pixel perfection is probably never going to be found.
Here’s a demo that I use that gives a little insight.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input, select {
font-family:Arial, Helvetica, sans-serif;/* need to set for IE6/7 or it won't inhereit properly*/
}
input,span,select{
display:inine-block;
vertical-align:middle;
font-size:13px;/* for demo purposes only*/
}
input,select{
width:80px;
color:#999;
border:1px solid #999;
}
input{
padding:0 10px;
height:30px;/* uses normal box model */
}
select{
padding:5px 2px 5px 10px;
height:32px;/* uses broken box model*/
width:160px;
line-height:26px;/* safari doesn't use height but fiddle with line-height until it looks right*/
}
#compare{
height:32px;/* uses broken box model*/
border:1px solid #999;
background:#ccc;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<fieldset>
<legend>Chunky form test</legend>
<input type="text" name="amount" id="amount" value="test" />
<select name="pound" id="pound">
<option value="test">test</option>
</select>
<span>in</span>
<select name="euro" id="euro">
<option value="test2">test2</option>
</select>
<input type="submit" name="compare" id="compare" value="Submit" />
</fieldset>
</form>
</body>
</html>
It wouldn’t take much to break it but it may get you closer to what you want.
Although form controls are specific to platforms it would have been nice to at least make them consistent in that platform so that you could align them nicely. I don’t believe in wildly changing the look of form elements but you should be at least able to size them nicely and uniformly to fit into the design.
Oh, you also have a lot of broken/invalid code that could be contributing to your problems – like using LINK inside body, after one of the scripts you have attributes with no corresponding tag… I’m a little surprised it’s only throwing seven validation errors given what I’m seeing here for code – but that could either be the tranny doctype making the code more 1998 than 2001, or the validator getting confused, throwing up it’s hands and walking away from it. (one of those “you fix a code error and three more show up” scenarios)
The code for your form is uselessly complex – I’m not sure why you have two div wrapping each and every span/input pairing with clearing breaks after them when you’re displaying them as a single inline strip on screen… but combined with all the bandwidth wasting redundant inline styles – I’d be throwing out that markup alltogether before even trying to get them consistent cross browser.
Lemme see… none of those div are appropriate, you’ve got no fieldset, there’s no reason to put a name on a form, you’ve got a perfectly good ID on the form so the need for classes is minimal AND there’s no reason to be wasting time inlining style (though with that massive inlined style in the head… you do know about external files and cache, right?)
Actually, hah, I bet all those div and floats are screwing up the vertical-align… oh, and you’re trying to specify heights on form elements manually. that’s a healthy part of the problem too I imagine.
Probably not a great idea to be sending all that getdata on a post form either.
If I was trying to do the same thing as that form, my HTML would probably look more like this:
<form
id="ChronoContact_requestmaintenance"
method="post"
action="/phh/index.php"
>
<fieldset>
<label for="requestName" class="required">
Name:<br />
<input
type="text"
id="requestName"
name="name"
title="Enter your name"
maxlength="150" size="50"
/><br />
</label>
<label for="requestEmail" class="required validate-email">
Email:<br />
<input
type="text"
id="text_2"
name="email"
title="Enter a valid Email address"
maxlength="150" size="50"
/><br />
</label>
<label for="requestSelection" class="required validate-selection">
Request a Service:<br />
<select
id="requestSelection"
name="comment"
title="Select an option"
size="1"
/>
<option value="">Choose Option</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select><br />
</label>
<input value="Send" type="submit" class="submit" />
<input type="hidden" name="option" value="com_chronocontact" />
<input type="hidden" name="task" value="send" />
<input type="hidden" name="chronoformname" value="requestmaintenance" />
</fieldset>
</form>
Setting all those manual heights, inlining ALL your presentation, and adding all those extra DIV – along with the malformed form and outdated code are likely the contributing factors to your problem… well along with the horde of javascript for nothing and spaghetti CSS embeds…
Thank you, gentlemen, for your suggestions.
I’ve managed to use your suggestion, Paul O’B to fix the height issues with the selection and textboxes. That fixed the problem!
And deathshadow60, thank you for pointing out the errors. Apparently I had a broken ‘div’ in the form, and I seemed to have taken care of that issue. As for the embedded coding, this is all due to Joomla’s extension taking over and inserting what may same to many of us unnecessary gobbly gook, but it makes the system work well.
Thank you again, gentlemen. You are definitely a real help to us who miss a lot of things!