zero size DIV in IE6

[Andrew May]

I need some help please. I am new to CSS and am trying to convert an
Intranet based database front-end from a table-based layout to use CSS.
Each page is basically a form using a two-column format with a
navigation bar on the left. In order to layout the form I am using a div
for each form element that in turn contains two spans, one for the label
and on for the actual form control floated left and right respectively.

All seems to work as expected in Opera and Firefox but Internet Explorer
(version 6.0 sp2) insists on creating zero size form-element DIVs which
results in the Sub Form Heading overlapping. I added the
background-color to the form-element DIV so that I could see at what
size it was rendered.

I’m new to CSS so am probably missing something obvious. Any pointer
would be much appreciated.

Many thanks,

Andrew
Relevent CSS is:

div.form-element
{
overflow: auto;
background-color: #f0f0f0;
}

div.form-element span.form-label
{
float: left;
width: 120px;
text-align: right;
font-weight: bold;
}

div.form-element span.form-item
{
float: right;
text-align: left;
width: 360px;
}

The HTML is:

<div id="page">
<div id=”navigation”>
Navigation text
</div>
<div id="main">
<div class="form">
<h1>Form Heading</h1>
<form method="POST" name="form">
<div class="form-element">
<span class="form-label">Group Name:</span>
<span class="form-item"><input type="text" name="Name"></span>
</div>

[Spartanicus]

Andrew May <an**********@hotmail.comwrote:

>I need some help please. I am new to CSS and am trying to convert an
Intranet based database front-end from a table-based layout to use CSS.
Each page is basically a form using a two-column format with a
navigation bar on the left. In order to layout the form I am using a div
for each form element that in turn contains two spans, one for the label
and on for the actual form control floated left and right respectively.

Forms are typically considered as tabular data, using a table to format
a form is considered ok.

>Relevent CSS is:

Please don't post code, post an URL instead.

--
Spartanicus

[Andrew May]

Spartanicus wrote:

Forms are typically considered as tabular data, using a table to format
a form is considered ok.

It was touch and go which way I went but was influenced by Mark
Newhouse's article at http://alistapart.com/articles/practicalcss. If I
can't get this to work I may return to tables but at the moment I refuse
to be beaten by a Microsoft product.

>

>Relevent CSS is:

Please don't post code, post an URL instead.

Apologies. Full working code is now at:

http://www.girton.ukfsn.org/css/demo.html

with a separate style sheet at:

http://www.girton.ukfsn.org/css/demo.css.

Andrew

[Spartanicus]

Andrew May <an**********@hotmail.comwrote:

>Forms are typically considered as tabular data, using a table to format
a form is considered ok.

It was touch and go which way I went but was influenced by Mark
Newhouse's article at http://alistapart.com/articles/practicalcss. If I
can't get this to work I may return to tables but at the moment I refuse
to be beaten by a Microsoft product.

This isn't a question of practicality, but of principle. If a form is
tabular data then it *should* be marked up using a table. Mark Newhouse
acknowledges this in the cited article:

"Another common use for table layout is lining up FORM elements with
their labels. While it could be argued that this is an appropriate use
of TABLEs, the CSS technique that I describe below will prove to be
useful for other, similar layout needs, as we will see."

So the although technique he demonstrates uses a form, he does not
encourage using it for such.

>http://www.girton.ukfsn.org/css/demo.html

Use a table to markup the form, then use CSS to create the layout
consisting of the navigation and the table holding the form (and only
the form

--
Spartanicus

[Andrew May]

Spartanicus wrote:

>
Use a table to markup the form, then use CSS to create the layout
consisting of the navigation and the table holding the form (and only
the form

Even if I do recode as tables I would still like to understand what it
is that I am doing wrong that messes up the rendering in IE, or, if the
problem is with IE what I should do to get around it.

Andrew

[Spartanicus]

Andrew May <an**********@hotmail.comwrote:

>Use a table to markup the form, then use CSS to create the layout
consisting of the navigation and the table holding the form (and only
the form

Even if I do recode as tables I would still like to understand what it
is that I am doing wrong that messes up the rendering in IE, or, if the
problem is with IE what I should do to get around it.

The sole intended purpose of the float mechanism is to get inline
content (typically text) to flow around a left or right aligned element.

Sadly many people are abusing floating as a method to create so called
"CSS layouts". Doing so causes problems, some of which can be hacked
around, others cannot.

Read the cited article if you insist on using this flawed approach, I'm
sure it contains a description of the hacks needed to get around the
issue shown.

--
Spartanicus

[Jack]

Spartanicus wrote:

>
The sole intended purpose of the float mechanism is to get inline
content (typically text) to flow around a left or right aligned
element.

Sadly many people are abusing floating as a method to create so
called "CSS layouts". Doing so causes problems, some of which can be
hacked around, others cannot.

Are you arguing that the use of CSS to layout content is A Bad Thing?
--
Jack.
http://www.jackpot.uk.net/

[Spartanicus]

Jack <mr*********@nospam.jackpot.uk.netwrote:

>The sole intended purpose of the float mechanism is to get inline
content (typically text) to flow around a left or right aligned
element.

Sadly many people are abusing floating as a method to create so
called "CSS layouts". Doing so causes problems, some of which can be
hacked around, others cannot.

Are you arguing that the use of CSS to layout content is A Bad Thing?

CSS2 offers no method that was intended, or is suitable to create good
quality www layouts. The various CSS2 methods that are currently used to
try and circumvent this shortcoming all have serious flaws, amongst them
floating is by far the worst.

Comparing the old way of using HTML tables to create a "layout" with the
currently used CSS methods does not result in an overall better or worse
judgement, there is more than one variable to measure such, and varying
priorities.

--
Spartanicus

[Jack]

Spartanicus wrote:

Jack <mr*********@nospam.jackpot.uk.netwrote:

>>The sole intended purpose of the float mechanism is to get inline
content (typically text) to flow around a left or right aligned
element.

Sadly many people are abusing floating as a method to create so
called "CSS layouts". Doing so causes problems, some of which can
be hacked around, others cannot.

Are you arguing that the use of CSS to layout content is A Bad
Thing?

CSS2 offers no method that was intended, or is suitable to create
good quality www layouts. The various CSS2 methods that are currently
used to try and circumvent this shortcoming all have serious flaws,
amongst them floating is by far the worst.

Do you argue, then, that absolute positioning (for example) is less
harmful?

>
Comparing the old way of using HTML tables to create a "layout" with
the currently used CSS methods does not result in an overall better
or worse judgement, there is more than one variable to measure such,
and varying priorities.

I had trouble parsing that. From previous posts, I don't think you mean
to say that CSS and tables are equally preferable as mechanisms for
laying out www pages; but it sounds as if that's what you are saying here.

>

Can you please say whether your opinion is that the use of CSS for page
layout is A Bad Thing?

--
Jack.
http://www.jackpot.uk.net/

[Spartanicus]

Jack <mr*********@nospam.jackpot.uk.netwrote:

>CSS2 offers no method that was intended, or is suitable to create
good quality www layouts. The various CSS2 methods that are currently
used to try and circumvent this shortcoming all have serious flaws,
amongst them floating is by far the worst.

Do you argue, then, that absolute positioning (for example) is less
harmful?

Again: no single qualifier can be attached to the various methods
currently used, they all have their own mix of drawbacks.

A rundown of some of the problems with the currently used methods to
create so called "CSS layouts":

Floated layout boxes
-------------------------------
1) Do not contain their content properly (1).
2) Not in the flow, block level elements adjacent to a float act as if
the layout box isn't there.
3) Floats inside a floated "layout box" influence behaviour of content
in other layout boxes.
4) The content order cannot be changed independently from the position
on screen.
5) Many people struggle to understand the ridiculously complex float
rules and resulting behaviour.
6) As a result of the complex float rules many browsers have float bugs,
the resulting browser inconsistencies cause yet more user frustration.

ABS Positioned layout boxes
-------------------------------------------
1) Do not contain their content properly (a).
2) Not in the flow, footers are impossible.
3) Content in a positioned box cannot be allowed to wrap if there is
another layout box beneath it since it would be clipped, obscure other
content, or generate a scrollbar. The ability for content to wrap is an
essential quality for text content.

CSS Tables
------------------
Short of the semantic issue, CSS tables have all the drawbacks of HTML
tables:
1) Reflows when embedded content loads in table-layout:auto mode.
2) Do not contain their content properly (a) in table-layout:fixed mode.
3) Grid remains rigid regardless of the viewport width (b).
4) The content order cannot be changed independently from the position
on screen.
5) Not supported by IE.

(a) Containing contents, there is no acceptable overflow behaviour:
1) In document scroll bars (usability nightmare).
2) Part of the content is clipped (content partially disappearing is
unacceptable).
2) Part of the content overflows into the adjoining space (thereby often
obscuring other content).

(b) The CSS2 "handheld" media property was ill conceived, it made
unwarranted assumptions about the viewport width on mobile devices, and
fails to cater for a-typical viewport widths on non mobile devices.

--
Spartanicus