size a inline component

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

Subscribe Reply

2136

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>Peson al 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

Ben C

On 2006-11-05, Jim <js*****@hotmai l.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

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

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>Peson al 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

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>Peson al 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">Mfda sfdsaf
</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

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>Peson al 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">Mfda sfdsaf
</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

Similar topics

9565

Detecting font size change

by: Csaba2000 | last post by:

How do I detect when the font size has been changed (especially by user action: either Ctrl+Scroll wheel or View/Text Size)? This is just for use on IE 5.5+, but it would be great if there was a generic solution. Thanks, Csaba Gabor from New York

Javascript

1244

why size of *this and size of basic and derived class different?

by: Bob | last post by:

Try the following code class basic { public: virtual void one()=0; }; class derived1:public basic { public:

C / C++

16671

Restricting inline image size

by: no-spam | last post by:

Hello, I have an HTML question that I'm not sure can be solved. I want to restrict the maximum size of an inline image. For example, I can force the image to be 200x200 if I do this: <img src=blah.gif width=200 height=200> But, that messes up the aspect ratio, and could size the image larger than it's original size.

HTML / CSS

2680

check html file size

by: Xah Lee | last post by:

would anyone like to translate the following perl script to Python or Scheme (scsh)? the file takes a inpath, and report all html files in it above certain size. (counting inline images) also print a sorted report of html files and their size. (a copy of the script is here: http://xahlee.org/_scripts/check_file_size.pl )

Python

2422

inline compilation across different assemblies?

by: ThomasR | last post by:

I was wondering on the breadth of optimization with .NET JIT compiler. Let's presume I have an assembly of static classes - mostly helper functions. Some of these functions may be very small (small enough that the optimizing compiler would inline them). If I have another assembly that references this helper libary assembly, could .NET's JIT compiler inline compile the usage of these small helper functions?

C# / C Sharp

986

Inline or Precedure

by: Anthony Nystrom | last post by:

I have Code that can either be run inline or called as multiple procedures. What would be the best practice, I like the component model with procedures but heard that inline executes faster... Thanks in advance... Also, why does calling dispose such as with any var.dispose execute faster then simply setting to nothing. Which is faster dim me as va some cod me = nothin

Visual Basic .NET

2966

Inline-Element with higher font-size inside A: Hover about full height?

by: Andreas Borutta | last post by:

Hi, what is the task with which I could not cope? There is a link with an inline-element (strong e.g.) inside. It has a higher font-size than the content of its parent. For the hover effect I prefer an inverse styling. Hovering should just cover the link and not his parent (li e.g.).

HTML / CSS

2425

Reducing the virtual function table size...

by: Chris Thomasson | last post by:

Consider an an object that that can has 7 or 8 functions. If you create an abstract base class for the "interface" of the object, well, that means 7 or 8 pure virtual functions right? Well, IMHO, that's way too much... I was wondering if the following technique is "frowned" upon: <pseudo-code> _____________ typedef struct ... vztimespec_t;

C / C++

1393

Increasing and decreasing the size of swing component on button click

by: wajedali | last post by:

hi......... i have problem in incresing and decreasing the component. I have a one main panel (i.e. i used as _basewindowPanel) in that again two panel in that two panel like wise.... now when i m increasing the size of component only button and label size get increase.But Jcombobox,JTextfield and table size unchanged.Plz any one help me,here is my code for increasing the size........ public void incPanel(int size) { ...

Java

9605

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10395

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9204

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7667

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6887

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5553

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4338

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3865

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3017

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General