Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Trouble with CSS "width:"

    I am working on a form page, and trying to avoid using tables for input placement. But I am having some problems getting all browsers (I.E & Mozzilla 1.7) to view CSS.

    Specifically I am trying to set a "width" to a title, IE recognizes the property correctly, but Mozilla doesn't.

    I have tried several combinations trying to get both browsers to render the page the same (well at least similar anyway).

    Below is a simplified version of what I am trying to accompish. All I am tring to do is group inputs together and get then to line up no matter what the "Title" length may be.

    Code:
    <html>
    <head>
    
    <style>
    <!--
     
    	.boxWidth1 {width:90pt;}	
     	.boxWidth2 {width:150pt;}
    
    /-->
     </style>
    
    </head>
    
    <body>
    
    <form>
    <!-- First grouped Titles all set at specific width -->
    <B>Group1:</B><br>
    	<span class=boxWidth1>Input Title1 short</span><INPUT TYPE="text" NAME="input1" SIZE="40"><br>	
    	<span class=boxWidth1>Input Title2 longer</span><INPUT TYPE="text" NAME="input2" SIZE="40">
    
    <br>
    <br>
    <!-- Second grouped Titles all set at specific width -->
    <B>Group2:</B><br>
    	<span class=boxWidth2>Input Title1 short</span><INPUT TYPE="text" NAME="input1" SIZE="30"><br>
    	<span class=boxWidth2>Input Title2 longer</span><INPUT TYPE="text" NAME="input2" SIZE="30">
    
    
    </form>
    
    </body>
    </html>
    Anyone have any ideas on how to get both browsers to display the same formatting.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    	<head>
    		<title>Documento sin título</title>
    		<style type="text/css">
    			fieldset	{
    				width:20em;
    				float:left;
    			}
    			label	{
    				float:left;
    				width:10em;
    			}
    		</style>
    	</head>
    	<body>
    		<form>
    			<fieldset>
    				<legend>Family</legend>
    				<div>
    					<label for="family">Family Product</label>
    					<select id="family">
    						<option value="1">Family 1</option>
    						<option value="2">Family 2</option>
    						<option value="3">Family 3</option>
    					</select>
    				</div>
    				<div>
    					<label for="family_spec">Specify Family</label>
    					<input id="family_spec" type="text">
    				</div>
    				<div>
    					<label for="type">Type</label>
    					<input id="type" type="text">
    				</div>
    				<div>
    					<label for="title">Offer Title</label>
    					<input id="title" type="text">
    				</div>
    			</fieldset>
    			<fieldset>
    				<legend>Product</label>
    				<div>
    					<label for="product">Product</label>
    					<select id="product">
    						<option value="1">Product 1</option>
    						<option value="2">Product 2</option>
    						<option value="3">Product 3</option>
    						<option value="4">Product 4</option>
    					</select>
    				</div>
    				<div>
    					<label for="product_spec">Specify Product</label>
    					<input id="product_spec" type="text">
    				</div>
    				<div>
    					<label for="special">Special Name</label>
    					<input id="special" type="text">
    				</div>
    			</fieldset>
    		</form>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    Setting in a tall corn field in Indiana
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks hemebond,

    Mozilla apperntly needs the "float" as well. I added it the my classes and now it works just fine for both browsers.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inline elements

    The span element -and the label element, too, for that matter- are inline elements; the width property doesn't apply to them (IE incorrectly applies it); when floated, the elements get treated as block elements, to which the width property can be applied.

    Hemebond showed you a more syntactical solution, using the label element for which it is supposed to be used -labeling from inputs, rather then the syntactically neutral span.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •