473,395 Members | 1,936 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,395 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 2459
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...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
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,...

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.