...
PDA

Trouble with CSS "width:"

caclark
03-01-2005, 07:33 PM
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.


<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.
hemebond
03-01-2005, 08:18 PM
<!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>
caclark
03-02-2005, 01:05 PM
Thanks hemebond,

Mozilla apperntly needs the "float" as well. I added it the my classes and now it works just fine for both browsers.
ronaldb66
03-02-2005, 01:17 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum