hello,
got this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>website</title>
<style type='text/css'>
div.form_container{
width: 300px;
background-color: #E8E8E8;
}
.form_container form{
direction: rtl;
background-color: #E8E8E8;
padding: 5px;
margin:0;
font: normal 12px arial;
border: 3px double #CFCFCF;
}
.form_container fieldset{
border: 1px solid #9F9F9F;
padding: 5px;
}
.form_container legend{
margin: 5px 0;
padding: 0 5px;
border: 1px solid #3F3F3F;
background-color: #CCC;
}
/* keep box and its label in one line */
.form_container fieldset label{
white-space: nowrap;
}
/* eliminate space around box */
.form_container fieldset label input{
width: 14px; height: 15px;
margin:0;
}
</style>
</head>
<body>
<div class='form_container'>
<form action='#'>
<fieldset>
<legend style='font-weight: bold;'>7777777777777</legend>
<label><input type="checkbox" name="checkbox"/>555 54 44</label>
<label><input type="checkbox" name="checkbox" checked='checked' />7 762476 4</label>
<label><input type="checkbox" name="checkbox"/>65 65 6</label>
<label><input type="checkbox" name="checkbox"/>6798 98 98</label>
<label><input type="checkbox" name="checkbox"/>4 87 8</label>
<label><input type="checkbox" name="checkbox"/>870 0 0</label>
</fieldset>
</form>
</div>
</body>
</html>
i want to add some space in between each LABEL.
but when adding padding or margin to the LABELs it is not applied as it should.
this could be bkuz of the DIRECTION: RTL !!
but it should work in both directions.
any suggestions??Because the INPUT elements are contained within the LABEL elements, you'll probably need to add the spacing to the INPUT elements, most likely using padding-right.INPUTs dont have padding!!
margin-left should do the trick, BUT - it works only in IE not FF.
margin-right is messing things.
me not happy at all..
i could put in some but only as a last resort - if no other sulotion.How about a <span> around the label text, and add the padding to it?
This is why I normally keep the label and input elements separate (using the "for" attribute to link them), so that I can manipulate them separately:
<input type="checkbox" name="checkbox" id="c1"/><label for="c1">555 54 44</label>
<input type="checkbox" name="checkbox" id="c2" checked='checked' /><label for="c2">7 762476 4</label>
<input type="checkbox" name="checkbox" id="c3"/><label for="c3">65 65 6</label>
<input type="checkbox" name="checkbox" id="c4"/><label for="c4">6798 98 98</label>
<input type="checkbox" name="checkbox" id="c5"/><label for="c5">4 87 8</label>
<input type="checkbox" name="checkbox" id="c6"/><label for="c6">870 0 0</label>NOPE again..
allready tried it.
same result as my previous post (#3)
got this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>website</title>
<style type='text/css'>
div.form_container{
width: 300px;
background-color: #E8E8E8;
}
.form_container form{
direction: rtl;
background-color: #E8E8E8;
padding: 5px;
margin:0;
font: normal 12px arial;
border: 3px double #CFCFCF;
}
.form_container fieldset{
border: 1px solid #9F9F9F;
padding: 5px;
}
.form_container legend{
margin: 5px 0;
padding: 0 5px;
border: 1px solid #3F3F3F;
background-color: #CCC;
}
/* keep box and its label in one line */
.form_container fieldset label{
white-space: nowrap;
}
/* eliminate space around box */
.form_container fieldset label input{
width: 14px; height: 15px;
margin:0;
}
</style>
</head>
<body>
<div class='form_container'>
<form action='#'>
<fieldset>
<legend style='font-weight: bold;'>7777777777777</legend>
<label><input type="checkbox" name="checkbox"/>555 54 44</label>
<label><input type="checkbox" name="checkbox" checked='checked' />7 762476 4</label>
<label><input type="checkbox" name="checkbox"/>65 65 6</label>
<label><input type="checkbox" name="checkbox"/>6798 98 98</label>
<label><input type="checkbox" name="checkbox"/>4 87 8</label>
<label><input type="checkbox" name="checkbox"/>870 0 0</label>
</fieldset>
</form>
</div>
</body>
</html>
i want to add some space in between each LABEL.
but when adding padding or margin to the LABELs it is not applied as it should.
this could be bkuz of the DIRECTION: RTL !!
but it should work in both directions.
any suggestions??Because the INPUT elements are contained within the LABEL elements, you'll probably need to add the spacing to the INPUT elements, most likely using padding-right.INPUTs dont have padding!!
margin-left should do the trick, BUT - it works only in IE not FF.
margin-right is messing things.
me not happy at all..
i could put in some but only as a last resort - if no other sulotion.How about a <span> around the label text, and add the padding to it?
This is why I normally keep the label and input elements separate (using the "for" attribute to link them), so that I can manipulate them separately:
<input type="checkbox" name="checkbox" id="c1"/><label for="c1">555 54 44</label>
<input type="checkbox" name="checkbox" id="c2" checked='checked' /><label for="c2">7 762476 4</label>
<input type="checkbox" name="checkbox" id="c3"/><label for="c3">65 65 6</label>
<input type="checkbox" name="checkbox" id="c4"/><label for="c4">6798 98 98</label>
<input type="checkbox" name="checkbox" id="c5"/><label for="c5">4 87 8</label>
<input type="checkbox" name="checkbox" id="c6"/><label for="c6">870 0 0</label>NOPE again..
allready tried it.
same result as my previous post (#3)