PDA

View Full Version : Small Firefox and IE Problem with select field



ralitza
03-12-2006, 03:47 PM
http://www.iankovi.com/testing.html
http://www.iankovi.com/testing.css
The "Category" select input is suppose to line with the rest of the fields as it does in Opera. In Firefox, and IE it's a little short. Any suggestions?

Twey
03-12-2006, 04:08 PM
width: 286px;Don't use pixels, for a start.

ralitza
03-12-2006, 04:32 PM
What should I use? I have tried ems, %'s

Twey
03-12-2006, 04:45 PM
Percentage ought to work fine.

jscheuer1
03-12-2006, 04:52 PM
I was going to say, what difference does it make what units are used? In any case, after testing this out in the three browsers, it appears that Opera is counting the native border width to all three form elements when calculating the overall width. IE and FF are only doing this with the select. All three are wrong, the proper method is to add the border width to the element width as IE and FF are doing with the inputs. Perhaps a stricter DOCTYPE might resolve this but, as form elements are the rouges of css and HTML layout, there may be no solution other than devising a method to give the select a custom width value in the three browsers. As it stands now IE would require 291px or 292, not sure, FF 290px and Op 286px.

Twey
03-12-2006, 04:54 PM
I did say "for a start" :)

jscheuer1
03-12-2006, 05:05 PM
Percentage ought to work fine.

Not in this case, as far as I can tell.

jscheuer1
03-12-2006, 07:24 PM
This works, validates and raises no flags in any of the browsers, requires script for Opera (the least used of the three browsers) only. I put the style on the page but, it could be external, however the IE conditional and its style block need to be on the page, or you could put its style on a separate external style sheet and put the link to it inside the conditional comment:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.paragraphsplit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #999999;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E9E9E2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
line-height: 13px;
}
#blogselectsearchinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #999999;
margin-bottom: 2px;
width: 290px;
}
.blogsearchinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #999999;
width: 286px;
margin-bottom: 2px;
}
</style>
<!--[if IE]>
<style type="text/css">
#blogselectsearchinput {
width: 292px;
}
</style>
<![endif]-->
</head>

<body>
<form action="" method="post" name="form1" class="paragraphsplit">
<span class="dark">123</span><br />
<input name="textfield" type="text" class="blogsearchinput" />
<br />
<span class="dark">Category:</span><br />
<select name="select5" id="blogselectsearchinput">
<option>blah</option>
<option>blah</option>
</select>
<br />
<span class="dark">567</span><br />
<input name="" type="text" class="blogsearchinput" />
<span class="dark"></span><br />
</form>
<script type="text/javascript">
if (window.opera){
document.all['blogselectsearchinput'].style.width="286px";
}
</script>
</body>
</html>


Hopefully there is a better way.

mwinter
03-12-2006, 07:35 PM
I was going to say, what difference does it make what units are used?When defining the size of an element where text is dominant, pixels should rarely ever be used. A font-relative unit is best (em or ex), but percentages are also fine if one does actually want x percent.


As for this particular sizing issue, it's a complete waste of effort. Browsers are different and they render content in their own way. Even attempting pixel-perfect layout is foolish as it cannot be realistically achieved. The OP should really leave the select element alone and allow the browser to determine its size based on its content.

There are several other things that the OP should (not) be doing:


Abandon the Transitional document type (especially if insisting on using XHTML). Use Strict.
Use valid markup.
Use labels for form control label text (not span elements).
Avoid the over-use of class attributes.
Avoid Verdana and font sizes in pixels (especially together).
Stop using line breaks when margins and block-level elements are more appropriate:



label {
display: block;
margin-top: 1em;
}


<label for="textfield">123</label>
<input id="textfield" name="textfield" value="">
Mike

jscheuer1
03-12-2006, 09:18 PM
As for this particular sizing issue, it's a complete waste of effort. Browsers are different and they render content in their own way. Even attempting pixel-perfect layout is foolish as it cannot be realistically achieved. The OP should really leave the select element alone and allow the browser to determine its size based on its content.

I probably should have made it clear that I, for the most part, agree with this outlook. The way I worded my responses so far in this thread make it sound like I think everything should line up the same in all browsers. I do not. But, if that is your goal, my markup, style and script will do that in this particular case for the vast majority of them without making it look any worse than it already would have in any other particular browser.

However, I think that although browser do vary, they should be consistent within their own rendering schemes, such that if two form elements of the same dimensions line up in one, they should line up in them all. All three browsers got one or more of the form elements wrong as far as I understand the way browsers are supposed to render elements in general. That I chalk up to what I said before about form elements being rouges, at least in so far as the way the various browsers treat them.