Google Sign in options
Remember me
This is not recommended for shared computers

Privacy Policy
Sign In
Create Account

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Subscribe to HRA Now!

SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013

Looking for personalized in-depth SEO training among your peers?

High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!

Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!

www.CustomReportSharing.com

From the folks who brought you High Rankings!

It's Not A Css / Doctype Bug, But Maybe A Feature!

Started by Edvin Eshagh , May 04 2007 04:12 PM

Please log in to reply

10 replies to this topic

#1 Edvin Eshagh

HR 3

Active Members
84 posts

Posted 04 May 2007 - 04:12 PM

Greetings all,

I am frustrated with CSS width on form elements.

Try the below html code snippet, both with and without DOCTYPE (first line).
You will find that when using doctype in the page, the input text box size and select drop down list width do not match (lineup)!
However, when the DOCTYPE (first line) is removed, the two input elements have the same width!

[codebox]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...401/loose.dtd">

<html> <body> <form>
<input style="width:6em" type="text" > <br>

<select style="width:6em" >
<option>abc</option>
<option>123</option>
</select>
</form> </body> </html>[/codebox]

This subtle difference has become a real thorn.

Back to top

#2 Tom Philo

Photographer

Active Members
507 posts

Location:Beaverton, Oregon

Posted 04 May 2007 - 05:29 PM

What happens if you used fixed with fonts with the doctypeon the page?

I suspect you default to using porpotional fonts and the box adjusts to fit the character width.

Back to top

#3 qwerty

HR 10

Moderator
8,296 posts

Location:Somerville, MA

Posted 04 May 2007 - 05:29 PM

I don't think CSS allows you to set the width of a form element, at least not using "width". For a number of elements, you'd use a size attribute, the value of which is just the number of characters (so you wouldn't have units), but the size attribute for a select element actually controls the number of lines that are visible at once. As far as I can tell, the width of the select box is based on the width of its content. You can put hard spaces before and/or after options to make them wider, but I think that's about it.

Back to top

#4 Edvin Eshagh

HR 3

Active Members
84 posts

Posted 04 May 2007 - 06:17 PM

Regardless of the unit type used (i.e. em, px, %, etc) for specifying element width, the strange behavior can be reproduced.

I don't know if technically w3 css specification allows for form elements to have width attributes.
I know that the CSS width attribute work on these form elements on the following browsers that I've tested:
Opera 6+, IE 5+, FireFox .9+, NS 6+, Safari 1+, Mozilla .9+
On win98, win2k, xp, Mac OSX, RedHad.

So, yes we can use the css width attribute to specify the desired visual length of input elements. The problem is that the select list box is always a few pixels short of the input box for any given width.

W3 has the following to say about width attribute :

QUOTE

This property specifies the content width of boxes generated by block-level and replaced elements

Trying to convert form inline elements to block-level elements doesn't help either.

Edited by you, 04 May 2007 - 06:25 PM.

Back to top

#5 qwerty

HR 10

Moderator
8,296 posts

Location:Somerville, MA

Posted 04 May 2007 - 11:11 PM

I don't think that quote applies to form elements.

Back to top

#6 piskie

HR 7

Active Members
1,092 posts

Location:Cornwall

Posted 05 May 2007 - 06:47 PM

Try defining the width as Pixels:

CODE

I think for the Select, you need to specify the width by applying iy to at least one option, again in pixels:

CODE

Back to top

#7 Edvin Eshagh

HR 3

Active Members
84 posts

Posted 07 May 2007 - 12:11 PM

Qwerty, you could be right, I really don't know if CSS elements include/exclude form elements !

Piskie, that was an interesting suggestion, but it appears that moving the width attribute into option tag is not recognized in IE 6, and off by firefox 1.8

Edited by you, 07 May 2007 - 12:38 PM.

Back to top

#8 piskie

HR 7

Active Members
1,092 posts

Location:Cornwall

Posted 07 May 2007 - 01:33 PM

QUOTE

<input name="widget" type="text" id="widget" value="<?php echo $widget; ?>" size="32" maxlength="32">

I've just checked back on a form I did recently, and this seems to work in IE6. IE7 and FF.

Back to top

#9 qwerty

HR 10

Moderator
8,296 posts

Location:Somerville, MA

Posted 07 May 2007 - 01:49 PM

That will work for an input element, because "size" is equal to the number of characters it will show. However, size for a select element is equal to the number of lines that will show. I'm still pretty sure the width of a select is dependent on the width of the options nested in it, and I think the width of the options is controlled strictly by the number of characters in the longest one.

Back to top

#10 Edvin Eshagh

HR 3

Active Members
84 posts

Posted 07 May 2007 - 02:03 PM

Piskie, I noticed that you didn't have a css width attribute set with the input type. Which is what I'm trying to utilize.

It may help to know what I'm trying to do.
We are building a GUI form designer that will generate XML data. The resulting xml data will be used by different mediums to display the corresponding form ( i.e. windows controls, web, etc).

The xml data specifies the location of input fields, and their length.
Using absolute positioning I'm able to position all elements from the xml data to their corresponding locaitons.
However, I found that input text box and select drop down elements don't occupy the same space.
Select list boxes are always few pixels shy of what is specified in css.

Given the above technology constraint, I have avoided the html size attribute.

Back to top

#11 Clintorius

HR 4

Active Members
210 posts

Posted 30 May 2007 - 02:31 AM

The problem with form controls (INPUT, SELECT, BUTTON etc.) is not CSS as a standard. It is the close relation between the browser and the OS. It is very hard to style form controls so they look a like in different browsers on different OS'es.

When I style INPUT elements i remove the border and wrap a DIV box around them and style that DIV with border and fixed width. This way the INPUT field will appear to have a certain width even if the field it self lacks a few pixels to reach the edge.

C.