prevent line break after a checkbox

pesho318i · #1 Jan 10th, 2008, 12:24

hi,

I have a few checkboxes in a column, with some text next to each one.
However, when the text is a little longer than the division, Firefox and IE show different behavior:
- in FF the whole line goes on a new line, which is ugly
- in IE the line breaks after the first word, and this looks nice

Can you tell me how to keep (at least) the first word always next to the checkbox...

Thanks in advance!

Aso · #2 Jan 10th, 2008, 12:46

Is it possible to post your code or a link to it?

It sounds like this is simply down to how IE and FF handle line wraps. Try wrapping the text in an element, and style that element to a set width.

pesho318i · #3 Jan 10th, 2008, 14:13

Code: Select all

<ul class="class1">
   <li>
      <strong>Title</strong>
      <ul>
          <li>
              <label><input class="chbox" type="checkbox" /></label>
              <span>First Second</span>
          </li>
      </ul>
   </li>
</ul>

so, in FF the "First Second" text goes together on the line following the checkbox
Here is my .css:

Code: Select all

 .chbox{
    float:left;
    margin:0;
    padding:0;
    height:15px;
    width:15px;
}

class1 {
    float:left;
    margin-left:5px;
    padding:0;
    width:218px;
}

ul.class1 li{
    float:left;
    margin:0 38px 0 0;
    padding:0 0 15px;
    display:inline;
    width:90px;
    list-style:none;
}
ul.class1 li strong{
    text-align:left;
    margin:0;
    padding:0;
    
}
ul.class1 li ul{
    float:left;
    margin:5px 0 0;
    padding:0;
    width:90px;
}
ul.class1 li ul li{
    text-align: left;
    float:left;
    margin:0;
    padding:0 0 4px;
}
ul.class1 li ul li span{
    float:left;
    margin:0 0 0 5px;
    display:inline;
    font:1.2em/1.2em Arial;
    color:black;
}

dab42pat · #4 Jan 10th, 2008, 18:15

could you try something like this.

HTML: Select all

  <input class="chbox" type="checkbox" />
              <label>First Second</label>

then add this to your css.

HTML: Select all

 label {
display:block;
font-weight: bold;
display:inline;

}

it may work, it may not.

Pat

pesho318i · #5 Jan 11th, 2008, 01:05

hmm, it didn't work for me.
But why do you write display:.... twice ?!?!?!

I'm already wondering if my problem can be solved in FF at all.
Take a look at this discussion: http://www.webmasterworld.com/forum119/223.htm
...it doesn't seem very optimistic.

spinal007 · #6 Jan 11th, 2008, 10:59

One of these should sort you out:
<input type="checkbox" style="display:inline"/> Label

OR

<input type="checkbox" style="float:left"/> Label

bkustel · #7 Feb 6th, 2008, 05:34

Wrap the checkbox INPUT element and the text you want on the same line as the checkbox (perhaps just the first word) in a SPAN with STYLE="white-space:nowrap"

pesho318i · #8 Feb 6th, 2008, 09:34

thanks for the advice. I already solved this issue. Don't remember exactly what I did, some tweaks to make both browsers happy....

cheers!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[solved] I want to insert a line break	minute44	PHP Forum	4	Feb 20th, 2008 12:52
Fwrite with new line break problem?	meth8200	PHP Forum	2	Feb 4th, 2008 15:23
Line Break	DregondRahl	Web Page Design	6	Jun 12th, 2007 15:33
prevent refresh in asp	simonneaves	Classic ASP	2	Oct 10th, 2005 09:04
<div> function without the line break	Tim356	Web Page Design	10	Sep 27th, 2004 18:39

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
prevent line break after a checkbox