help formatting list of checkboxes (works ok in Opera and IE, not FF)

I have this list of checkboxes displaying properly in Opera and IE, but
cannot get it in Firefox. For some reason, in FF, the checkboxes creep
farther and farther to the right across the page, with each successive line:

[ ] This is item one
[ ] This is item two
[ ] This is item three
[ ] This is item four

I would be grateful for some pointers on what's causing it and what I can do
to fix it.
Thanks
Timo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="en-US">
<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Check List formatting issue</TITLE>
<style type='text/css'>

#container {width: 500px}
#checklistcontainer {width:100%}
.chkitemcontainer {width: 100%; height: auto; }
.chkboxcontainer{width: 33px; margin-left: 12px; float: left;}
.labelcontainer { float: none; height: auto; width: auto}

</style>

</HEAD>
<BODY>
<FORM method="post" action="someform.html" id="Form1">

<div id="container" >

<div id="checklistcontainer">

<div class="chkitemcontainer">
<div class="chkboxcontainer"><input type="checkbox" /> </div>
<div class="labelcontainer"><span><a href="#">This is Item Number 1 in the
checklist</a></span></div>
</div>

<div class="chkitemcontainer">
<div class="chkboxcontainer"><input type="checkbox" /> </div>
<div class="labelcontainer"><span><a href="#">This is Item Number 2 in the
checklist</a></span></div>
</div>

</div>
</div>
</FORM>
</BODY>
</HTML>

Timo wrote:
[color=blue]
> I have this list of checkboxes displaying properly in Opera and IE, but
> cannot get it in Firefox. For some reason, in FF, the checkboxes creep
> farther and farther to the right across the page, with each successive line:
>
> [ ] This is item one
> [ ] This is item two
> [ ] This is item three
> [ ] This is item four
>
> I would be grateful for some pointers on what's causing it and what I can do
> to fix it.[/color]

[snip code]

It's always better to supply a URL, so we don't have to copy paste
your code into our favourite text editor, save it as HTML, upload it
to our own server, and see what happens in different browsers.

There's one thing you can do yourself to find out what is going wrong,
and that's adding this line:
*{border:1px solid red;}
to your styles, and see if that shows you anything.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

On 03/06/2005 13:43, Timo wrote:
[color=blue]
> I have this list of checkboxes displaying properly in Opera and IE, but
> cannot get it in Firefox.[/color]

As Els said, provide a URL. Your snippet doesn't demonstrate the problem.

[snip]
[color=blue]
> #container {width: 500px}[/color]

Using pixel units when dealing with text can often lead to broken
layouts when exposed to larger than normal font sizes. In these cases,
it's better to use a font-proportional unit like em.

[snip]
[color=blue]
> <div class="chkboxcontainer"><input type="checkbox" /> </div>
> <div class="labelcontainer"><span><a href="#">This is Item Number 1 in the
> checklist</a></span></div>[/color]

Can I ask, why aren't you using LABEL elements to mark-up form control
labels? That seems far more sensible than some convoluted floating
DIV/SPAN mess.

[snip]
[color=blue]
> <input type="checkbox" />[/color]

You clearly aren't authoring an XHTML document, so don't use its syntax.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

in comp.infosystems.www.authoring.stylesheets, Timo wrote:[color=blue]
> I have this list of checkboxes displaying properly in Opera and IE, but
> cannot get it in Firefox. For some reason, in FF, the checkboxes creep
> farther and farther to the right across the page, with each successive line:
>
> [ ] This is item one
> [ ] This is item two
> [ ] This is item three
> [ ] This is item four
>
> I would be grateful for some pointers on what's causing it and what I can do
> to fix it.[/color]

You floated boxes to left and line height is smaller than checkbox, If I
guess right. (my crystal ball is quite clear, even if you did your
drawing using variable width font.)

input {clear:left;}

should fix it.

other people made good suggestions as well.

[code ignored snipped, was not clear enough to read - use URL next time.]

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173

Thanks to all who responded with helpful suggestions. Lauri Raittila's
crystal ball was indeed correct: setting the line-height of the container to
1.4em eliminated the problem.

To respond to Michael Winter's critique regarding the "convoluted floating
DIV/SPAN mess": I wrapped elements in that way because I was otherwise
unable to get desired positioning and wordwrap flush margin control. I'd be
grateful to learn how to get the following effects without those messy
containers:

[ ] {controllable amount of space here} This is a long label for
checkbox 1 and it is also an href with an onclick handler
[ ] {controllable amount of space here} This is a long label for
checkbox 2 and it is also an href with an onclick handler

NOTE: The labels are titles of articles; user clicks on label to go to the
article; but the titles can be very long, so they need to wrap. When they do
wrap, it needs to look like this, aligned flush on the left:

[ ] This is a long label for checkbox 1 and it is
also an href with an onclick handler

and not like this:

[ ] This is a long label for checkbox 1 and it is
also an href with an onclick handler

Regards
Timo

"Michael Winter" <m.winter@blueyonder.co.invalid> asks in message
news:qSYne.44519$G8.1506@text.news.blueyonder.co.u k...[color=blue]
>[/color]
[color=blue]
> Can I ask, why aren't you using LABEL elements to mark-up form control
> labels? That seems far more sensible than some convoluted floating
> DIV/SPAN mess.
>[/color]

Timo wrote:
[color=blue]
> To respond to Michael Winter's critique regarding the "convoluted floating
> DIV/SPAN mess": I wrapped elements in that way because I was otherwise
> unable to get desired positioning and wordwrap flush margin control. I'd be
> grateful to learn how to get the following effects without those messy
> containers:[/color]

[snip list of checkboxes with labels]

This is typically stuff I'd put in an ordinary table :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Rolling Stones - Happy

in comp.infosystems.www.authoring.stylesheets, Timo wrote:[color=blue]
> Thanks to all who responded with helpful suggestions. Lauri Raittila's
> crystal ball was indeed correct: setting the line-height of the container to
> 1.4em eliminated the problem.
>
> To respond to Michael Winter's critique regarding the "convoluted floating
> DIV/SPAN mess": I wrapped elements in that way because I was otherwise
> unable to get desired positioning and wordwrap flush margin control. I'd be
> grateful to learn how to get the following effects without those messy
> containers:
>
> [ ] {controllable amount of space here} This is a long label for
> checkbox 1 and it is also an href with an onclick handler
> [ ] {controllable amount of space here} This is a long label for
> checkbox 2 and it is also an href with an onclick handler[/color]

Why you have labels marked a with onclick handlers? Wouldn't it be much
better to use label element? IIRC, it works even in IE.
[color=blue]
> NOTE: The labels are titles of articles; user clicks on label to go to the
> article; but the titles can be very long, so they need to wrap. When they do
> wrap, it needs to look like this, aligned flush on the left:[/color]

This seems strange. URL?
[color=blue]
> [ ] This is a long label for checkbox 1 and it is
> also an href with an onclick handler[/color]

There is several ways. Remember that if you have container for one
element inside, it is usually not necessary.

1. table
2. use label element with for attribute outside checkbox (don't float
label element, there is n+1 bugs in semirecent versions of different
browsers for label elements). But margin to label element

If you can't use label element, as it might be becasue your strange way
of handling form, use table...

I did somthing like this few years ago:
http://www.student.oulu.fi/~laurirai...2.html#lahteet
(content is some optimistic bullshit about XML in Finnish)

It is of course possible to do it other ways as well, but I won't
recommend. Anyway, you don't need any dummy containers, like <b> in my
example, as input already is an element.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

help formatting list of checkboxes (works ok in Opera and IE, not FF)

re: help formatting list of checkboxes (works ok in Opera and IE, not FF)

re: help formatting list of checkboxes (works ok in Opera and IE, not FF)

re: help formatting list of checkboxes (works ok in Opera and IE, not FF)

re: help formatting list of checkboxes (works ok in Opera and IE, not FF)

re: help formatting list of checkboxes (works ok in Opera and IE, not FF)

re: help formatting list of checkboxes (works ok in Opera and IE, not FF)

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about