display: block and grouping inconsistencies

Dev Shed Forums Sponsor:

June 25th, 2004, 02:13 PM

JunkCookie

Vote Libertarian

Join Date: Jun 2003

Location: N'wallins

Posts: 277

Time spent in forums: 36 m 27 sec
Reputation Power: 6

display: block and grouping inconsistencies

I'm undergoing the painful conversion from table-based to CSS-based layout. I borrowed some CSS from a website and started playing with the parameters to see what happens, and I'm getting results that don't seem consistent with the CSS documentation I've read.

Here are four screenshots of the rendered page, with an editor showing the CSS overlaid on top:
Screenshot 1 - This shows the original layout as the original author intended. Both labels and inputs are designated as block elements. If that is the case, why are there not line breaks after each label tag? Why would the paragraph tags be necessary?
Screenshot 2 - I degrouped label from the input group, meaning that only inputs should be block-level, but, curiously, the label becomes a block-level element. :-/
Screenshot 3 - I changed the bottom margin on paragraph tags to 29px. This looks very similar to the original layout.
Screenshot 4 - When I change the bottom margin to 30px, the label and input elements go inline. Weird.

I'm having a lot of trouble reasoning about CSS. Can anyone make sense of this for me?

//EDIT: here's the code:

Code:

<html><head><title>Form Validator</title>
<style>
<!--
label,input
{
  display: block;
  width: 150px;
  float: left;
  margin-bottom: 10px;
}

label 
{
  text-align: right;
  width: 75px;
  padding-right: 10px;
}

p
{
  clear: left;
  margin: 0;
  margin-bottom: 10px;
}

-->
</style>


</head>
<body>
<form name=example action=form.html method=POST>
<p><label for=name>name</label>
<input size=20 name=name id=name></p>
<p><label for=addy>address</label>
<input size=20 name=addy id=addy></p>
<p><label for=city>city</label>
<input size=20 name=city id=city></p>
<p><label for=email>email</label>
<input size=20 name=email id=email></p>
<p><input type=submit value="Submit form"></p>
</form>

__________________

"Write programs as if the most important communication they do is not to the computer that executes them but to the human beings who will read and maintain the source code in the future" - ESR, The Art of UNIX Programming
"Programs must be written for people to read, and only incidentally for machines to execute." - Abelson & Sussman, SICP, preface to the first edition
"Programs must be written for machines to execute or else you just have a boring book" - DaWei_M
Vote Libertarian

Last edited by JunkCookie : June 25th, 2004 at 03:20 PM.

June 25th, 2004, 10:03 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

1. Both input and label are float elements and not in the flow. They obey the float rules.

2. The label is a block element, and comes before the float element, input. By the rules, the float element is placed in the next natural spot in the flow and moved left. Reverse the order of input and label in the html and they are again on the same line.

3. & 4. I have no clue. I suspect it has to do with line height. The break point here was 21/22px.

I hadn't run into this before, it's an interesting find. Maybe a more spec savvy member will have the answer.

I wouldn't code it that way. Modifying th given code,

Code:

style:

input, label {
    display: block;
    float: left;
    width: 150px;
    }

label {
    width: 75px;
    text-align: right;
    clear: left;
    }

p {
    clear: left;
    margin: 0;
    margin-bottom: 21px;
    }

html:

    <form action="#" method="get">
      <p><label for="name">name:</label><input type="text" name="name"
      id="name" /> <label for="aname">aname:</label><input type="text"
      name="aname" id="aname" /></p>

      <p><input type="submit" /></p>
    </form>

will fix it all.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

June 28th, 2004, 05:50 PM