SEO Class in Chicago, IL
Are you a Google Analytics enthusiast?
More SEO Content
It's Not A Css / Doctype Bug, But Maybe A Feature!
Posted 04 May 2007 - 04:12 PM
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" >
</form> </body> </html>[/codebox]
This subtle difference has become a real thorn.
Posted 04 May 2007 - 05:29 PM
I suspect you default to using porpotional fonts and the box adjusts to fit the character width.
Posted 04 May 2007 - 05:29 PM
Posted 04 May 2007 - 06:17 PM
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 :
Trying to convert form inline elements to block-level elements doesn't help either.
Edited by you, 04 May 2007 - 06:25 PM.
Posted 05 May 2007 - 06:47 PM
I think for the Select, you need to specify the width by applying iy to at least one option, again in pixels:
Posted 07 May 2007 - 12:11 PM
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.
Posted 07 May 2007 - 01:33 PM
I've just checked back on a form I did recently, and this seems to work in IE6. IE7 and FF.
Posted 07 May 2007 - 01:49 PM
Posted 07 May 2007 - 02:03 PM
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.
Posted 30 May 2007 - 02:31 AM
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.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users