By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,816 Members | 2,053 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,816 IT Pros & Developers. It's quick & easy.

size a inline component

P: n/a
Jim
I tried to build a "form" layout without using table like this

http://www.coolshare.com/temp/images/css.jpg

In order to get the layout, I need to set the light blue area at each
line to a fix size so that
I can align the label of each field to against the text field (kind of
center alignment) even in
case the size of text field vary. That is, with the label area (blue
area) size fixed, I can
right alight label text and left aligh the input text field.

The problem is that firefox and Opera (IE worked fine) don't allow any
inline component (either a span or
a div with display set to "inline") to have a width.

My question is:

How can I have a inline area width fixed?

thanks

mark

Nov 5 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
VK
Jim wrote:
I tried to build a "form" layout without using table like this
<snip>
The problem is that firefox and Opera (IE worked fine) don't allow any
inline component (either a span or
a div with display set to "inline") to have a width.
If you decided to build a semantically/accessability right form: then
it is much more than just make a form w/o table helpers. The fact that
you are asking about span styling suggests that you are already on the
wrong path. The proper form hierarchy implies:
form
fieldset
label element

Below there is some code to play with.

Note 1
It is crutial to define font size for input elements for a number of
browser-specific reasons. The main one is that without font size set on
IE form elements will be excluded from the page scaling (while using
font size switch).

Note 2
There is an opinion that <brtag has no semantic behind but a
presentational effect only. That is not true of course: br has a
well-defined semantic of the logical end of the current output segment.
Originally it was br (end of line) and p (end of paragraph). Later p
was promoted into block elements, but it did not remove the semantic
from br.

Note 3
Transitional instead of Strict is used only because of <utag used to
mark access keys. You are free to replace it with styled <spanand
move onto Strict then.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Form layout</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style type="text/css">
html {
width: 100%;
margin: 0px 0px;
padding: 0px 0px;
background-color: #F5F5F5;
}

body {
width: 90%;
margin: 0px auto;
padding: 20px 20px;
border: 1px solid #000000;
background-color: #FFFFFF;
color: #000000;
font: normal 100% Verdana, Geneva, sans-serif;
}

form {
margin: 1em auto;
padding: 0px 0px;
}

form fieldset {
border: 1px solid #000000;
margin: 1em auto;
padding: 4px 4px;
}

form fieldset legend {
margin: 0px 20px;
padding: 2px 2px;
border: 1px solid #000000;
font-weight: bolder;
}

form fieldset label {
float: left;
width: 8em;
margin: 0px 0px;
padding: 2px 2px;
background-color: #ABD7F2;
text-align: right;
white-space: nowrap;
}

form fieldset input {
float: left;
width: 8em;
margin: 0px 0px;
padding: 0px 0px;
font-size: 100%;
}

form fieldset br {
clear: both;
}
</style>

</head>

<body>

<form name="frm01" method="POST" action="">
<fieldset>
<legend>Pesonal data</legend>

<label for="FName" accesskey="f"><u>F</u>irst name:</label>
<input type="text" name="FName" id="FName" size="20" maxlength="64">
<label for="LName" accesskey="l"><u>L</u>ast name:</label>
<input type="text" name="LName" id="LName" size="20" maxlength="64">
<br>
<label for="EMail" accesskey="e"><u>E</u>-Mail:</label>
<input type="text" name="EMail" id="EMail" size="20" maxlength="128">
<label for="Phone" accesskey="p"><u>P</u>hone:</label>
<input type="text" name="Phone" id="Phone" size="10" maxlength="10">

</fieldset>
</form>

</body>
</html>

Nov 5 '06 #2

P: n/a
On 2006-11-05, Jim <js*****@hotmail.comwrote:
I tried to build a "form" layout without using table like this

http://www.coolshare.com/temp/images/css.jpg

In order to get the layout, I need to set the light blue area at each
line to a fix size so that
I can align the label of each field to against the text field (kind of
center alignment) even in
case the size of text field vary. That is, with the label area (blue
area) size fixed, I can
right alight label text and left aligh the input text field.

The problem is that firefox and Opera (IE worked fine) don't allow any
inline component (either a span or
a div with display set to "inline") to have a width.

My question is:

How can I have a inline area width fixed?
Ideally with display: inline-block, but that's not supported by Firefox,
which leaves floats as the closest things to inline elements that can
have widths set on them.
Nov 5 '06 #3

P: n/a
VK
How can I have a inline area width fixed?
>
Ideally with display: inline-block, but that's not supported by Firefox,
which leaves floats as the closest things to inline elements that can
have widths set on them.
Firefox has -moz-inline-box display type. This display type is not
fully debugged yet, but for simple usage like here it's fine. So it
could be:

display: inline-block; /* for everyone */
display: -moz-inline-box; /* for Gecko */

I just don't see a need here for inline blocks: floating block elements
do it better and more reliably IMHO.

Nov 5 '06 #4

P: n/a
Jim
Thanks for response for everyone, specially VK.
VK, your response is extramely helpful and educational.

I will play with it.
really appreciated!


VK wrote:
Jim wrote:
I tried to build a "form" layout without using table like this
<snip>
The problem is that firefox and Opera (IE worked fine) don't allow any
inline component (either a span or
a div with display set to "inline") to have a width.

If you decided to build a semantically/accessability right form: then
it is much more than just make a form w/o table helpers. The fact that
you are asking about span styling suggests that you are already on the
wrong path. The proper form hierarchy implies:
form
fieldset
label element

Below there is some code to play with.

Note 1
It is crutial to define font size for input elements for a number of
browser-specific reasons. The main one is that without font size set on
IE form elements will be excluded from the page scaling (while using
font size switch).

Note 2
There is an opinion that <brtag has no semantic behind but a
presentational effect only. That is not true of course: br has a
well-defined semantic of the logical end of the current output segment.
Originally it was br (end of line) and p (end of paragraph). Later p
was promoted into block elements, but it did not remove the semantic
from br.

Note 3
Transitional instead of Strict is used only because of <utag used to
mark access keys. You are free to replace it with styled <spanand
move onto Strict then.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Form layout</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style type="text/css">
html {
width: 100%;
margin: 0px 0px;
padding: 0px 0px;
background-color: #F5F5F5;
}

body {
width: 90%;
margin: 0px auto;
padding: 20px 20px;
border: 1px solid #000000;
background-color: #FFFFFF;
color: #000000;
font: normal 100% Verdana, Geneva, sans-serif;
}

form {
margin: 1em auto;
padding: 0px 0px;
}

form fieldset {
border: 1px solid #000000;
margin: 1em auto;
padding: 4px 4px;
}

form fieldset legend {
margin: 0px 20px;
padding: 2px 2px;
border: 1px solid #000000;
font-weight: bolder;
}

form fieldset label {
float: left;
width: 8em;
margin: 0px 0px;
padding: 2px 2px;
background-color: #ABD7F2;
text-align: right;
white-space: nowrap;
}

form fieldset input {
float: left;
width: 8em;
margin: 0px 0px;
padding: 0px 0px;
font-size: 100%;
}

form fieldset br {
clear: both;
}
</style>

</head>

<body>

<form name="frm01" method="POST" action="">
<fieldset>
<legend>Pesonal data</legend>

<label for="FName" accesskey="f"><u>F</u>irst name:</label>
<input type="text" name="FName" id="FName" size="20" maxlength="64">
<label for="LName" accesskey="l"><u>L</u>ast name:</label>
<input type="text" name="LName" id="LName" size="20" maxlength="64">
<br>
<label for="EMail" accesskey="e"><u>E</u>-Mail:</label>
<input type="text" name="EMail" id="EMail" size="20" maxlength="128">
<label for="Phone" accesskey="p"><u>P</u>hone:</label>
<input type="text" name="Phone" id="Phone" size="10" maxlength="10">

</fieldset>
</form>

</body>
</html>
Nov 5 '06 #5

P: n/a
Jim
VK,

I played around and still suffer from the inline issue.

The problem was that when I replce one of the input fields with a
select field (see the code I modified below)
..
The layout was messed up:

http://www.coolshare.com/temp/images/css2.jpg

Any suggestion?

thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Form layout</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
width: 100%;
margin: 0px 0px;
padding: 0px 0px;
background-color: #F5F5F5;

}
body {
width: 90%;
margin: 0px auto;
padding: 20px 20px;
border: 1px solid #000000;
background-color: #FFFFFF;
color: #000000;
font: normal 100% Verdana, Geneva, sans-serif;
}
form {
margin: 1em auto;
padding: 0px 0px;
}
form fieldset {
border: 1px solid #000000;
margin: 1em auto;
padding: 4px 4px;
}
form fieldset legend {
margin: 0px 20px;
padding: 2px 2px;
border: 1px solid #000000;
font-weight: bolder;
}
form fieldset label {
float: left;
width: 8em;
margin: 0px 0px;
padding: 2px 2px;
background-color: #ABD7F2;
text-align: right;
white-space: nowrap;
}
form fieldset input {
float: left;
width: 8em;
margin: 0px 0px;
padding: 0px 0px;
font-size: 100%;
}
form fieldset br {
clear: both;

}
</style>

</head>
<body>
<form name="frm01" method="POST" action="">
<fieldset>
<legend>Pesonal data</legend>
<label for="FName" accesskey="f"><u>F</u>irst name:</label>
<select name="FName" id="FName">
<option value="" selected>
<option value="0">Mark
<option value="1">Mike
<option value="2">Rob
<option value="23">Mfdasfdsaf
</select>
<label for="LName" accesskey="l"><u>L</u>ast name:</label>
<input type="text" name="LName" id="LName" size="20" maxlength="64">
<br>
<label for="EMail" accesskey="e"><u>E</u>-Mail:</label>
<input type="text" name="EMail" id="EMail" size="20" maxlength="128">

<label for="Phone" accesskey="p"><u>P</u>hone:</label>
<input type="text" name="Phone" id="Phone" size="10" maxlength="10">
</fieldset>
</form>
</body>
</html>

Nov 6 '06 #6

P: n/a
Jim
VK, it was my problem. I didn't take care the select in the style.

Thanks again.

Jim wrote:
VK,

I played around and still suffer from the inline issue.

The problem was that when I replce one of the input fields with a
select field (see the code I modified below)
.
The layout was messed up:

http://www.coolshare.com/temp/images/css2.jpg

Any suggestion?

thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Form layout</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
width: 100%;
margin: 0px 0px;
padding: 0px 0px;
background-color: #F5F5F5;

}
body {
width: 90%;
margin: 0px auto;
padding: 20px 20px;
border: 1px solid #000000;
background-color: #FFFFFF;
color: #000000;
font: normal 100% Verdana, Geneva, sans-serif;
}
form {
margin: 1em auto;
padding: 0px 0px;
}
form fieldset {
border: 1px solid #000000;
margin: 1em auto;
padding: 4px 4px;
}
form fieldset legend {
margin: 0px 20px;
padding: 2px 2px;
border: 1px solid #000000;
font-weight: bolder;
}
form fieldset label {
float: left;
width: 8em;
margin: 0px 0px;
padding: 2px 2px;
background-color: #ABD7F2;
text-align: right;
white-space: nowrap;
}
form fieldset input {
float: left;
width: 8em;
margin: 0px 0px;
padding: 0px 0px;
font-size: 100%;
}
form fieldset br {
clear: both;

}
</style>

</head>
<body>
<form name="frm01" method="POST" action="">
<fieldset>
<legend>Pesonal data</legend>
<label for="FName" accesskey="f"><u>F</u>irst name:</label>
<select name="FName" id="FName">
<option value="" selected>
<option value="0">Mark
<option value="1">Mike
<option value="2">Rob
<option value="23">Mfdasfdsaf
</select>
<label for="LName" accesskey="l"><u>L</u>ast name:</label>
<input type="text" name="LName" id="LName" size="20" maxlength="64">
<br>
<label for="EMail" accesskey="e"><u>E</u>-Mail:</label>
<input type="text" name="EMail" id="EMail" size="20" maxlength="128">

<label for="Phone" accesskey="p"><u>P</u>hone:</label>
<input type="text" name="Phone" id="Phone" size="10" maxlength="10">
</fieldset>
</form>
</body>
</html>
Nov 6 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.