473,287 Members | 1,581 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

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>

Jul 21 '05 #1
6 2455
Els
Timo wrote:
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.


[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 -
Jul 21 '05 #2
On 03/06/2005 13:43, Timo wrote:
I have this list of checkboxes displaying properly in Opera and IE, but
cannot get it in Firefox.
As Els said, provide a URL. Your snippet doesn't demonstrate the problem.

[snip]
#container {width: 500px}
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]
<div class="chkboxcontainer"><input type="checkbox" /> </div>
<div class="labelcontainer"><span><a href="#">This is Item Number 1 in the
checklist</a></span></div>
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]
<input type="checkbox" />


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.
Jul 21 '05 #3
in comp.infosystems.www.authoring.stylesheets, Timo wrote:
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.


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
Jul 21 '05 #4
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.******@blueyonder.co.invalid> asks in message
news:qS*****************@text.news.blueyonder.co.u k...
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.

Jul 21 '05 #5
Els
Timo wrote:
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:


[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
Jul 21 '05 #6
in comp.infosystems.www.authoring.stylesheets, Timo wrote:
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
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.
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 seems strange. URL?
[ ] This is a long label for checkbox 1 and it is
also an href with an onclick handler


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
Jul 21 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

163
by: Shiperton Henethe | last post by:
Hi Know any good utilities to help me strip out the tags that Microsoft Excel 2002 leaved behind when you try and export an HTML format file? This is driving me NUTS. And really makes me...
5
by: Bob Bedford | last post by:
I create checkboxes using datas from a database (with PHP). I store all values in an array, as I must pass this value like a Form value. Now, in some cases, when a checkbox is selected, I must...
7
by: Stephen | last post by:
I have some code which I call from a custom validator however I seem to have got the logic wrong and im having trouble figuring out how to write my code to get things to work the way I require....
5
by: jodyblau | last post by:
I am trying to do some conditional formatting with a textbox and I am not able to quite get it. Here is the setup: My record includes a textbox called and two checkboxes the first called ...
2
by: 4MLA1FN | last post by:
i'm building a little web app for my research project. url is here: http://www.cognitivecomposites.com/wtf/ it validates as xhtml/strict according to: ...
10
by: rn5a | last post by:
All the rows in a DataGrid, including the Header, are accompanied with a CheckBox. I want that when the CheckBox in the Header is checked, then all the CheckBoxes should automatically get checked....
0
by: gunimpi | last post by:
http://www.vbforums.com/showthread.php?p=2745431#post2745431 ******************************************************** VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help wanted...
2
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...
15
by: rhino | last post by:
I've put together a prototype of two-tiered CSS tabs that works really well in IE6, IE7, and FF2. It also works very well in Opera 9.27 _except_ that the placement of the lower tier of tabs is...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.