space between controls (vertical)

[CorbinMyMan]

I have a list of checkboxes (and radiobuttons) and there's just a hair bit too much space between them vertically. I have a css class for these controls, but I'm stumped as to which property will control this? I've tried many of them with no avail.

Please help! Thank you guys!

 

[cLFlaVA]

you have a list? does that mean a [tt]<ul>[/tt] filled with checkboxes?

check out the [tt]padding[/tt] and [tt]margin[/tt] for these objects.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CorbinMyMan]

no they aren't a <UL>

the checkboxes are just stacked up (no list) and the radioboxes are in the same GROUPNAME.

 

[cLFlaVA]

still, check out the [tt]padding[/tt] and [tt]margin[/tt]. If you need more help, post your code snippet.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CorbinMyMan]

i tried both padding and margin but it didn't work. here's my asp code

<asp:CheckBox id="CheckBox1" runat="server" CssClass="smallcheckbox" Text="ELBOW KIT WITH CAPACITIVE TEST POINT"></asp:CheckBox><BR>
<asp:CheckBox id="CheckBox2" runat="server" CssClass="smallcheckbox" Text="KIT W/OUT A COMPRESSION CONNECTOR"
AutoPostBack="True"></asp:CheckBox><BR>
<asp:CheckBox id="CheckBox3" runat="server" Text="KIT W/OUT A HOLD DOWN"></asp:CheckBox><BR>
<asp:CheckBox id="CheckBox4" runat="server" Text="PKG IN A CORRUGATE CARDBOARD BOX"></asp:CheckBox>


here is my css:

.smallcheckbox
{
margin-bottom: 1;
margin-top: 1;
padding-bottom: 1;
padding-top: 1;
}

 

[cLFlaVA]

it would be nice to see your HTML that has been generated by the browser.

you need to define a unit in your css. 1 what?

try this:

input.smallcheckbox {
    margin: 0;
    padding: 0;
}

could you post the html that the browser generates?

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

haha - i just yelled at you for not specifying a unit. let me explain.

when you specify "0", you don't need a unit, because 0 of anything is still 0.

otherwise, you need to specify units. some common ones are [tt]px[/tt], [tt]em[/tt], [tt]%[/tt], etc.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CorbinMyMan]

here's some browser generated html:

<span class="smallcheckbox"><input id="CheckBox1" type="checkbox" name="CheckBox1" /><label for="CheckBox1">ELBOW KIT WITH CAPACITIVE TEST POINT</label></span><BR>
<span class="smallcheckbox"><input id="CheckBox2" type="checkbox" name="CheckBox2" onclick="__doPostBack('CheckBox2','')" language="javascript" /><label for="CheckBox2">KIT W/OUT A COMPRESSION CONNECTOR</label></span><BR>

Still didn't work though wiht your suggestion.
I have these controls in a panel that has its own css class, could it be that its taking precedence over whats in the panel? here's the code for the panel:

.panel
{
font-family:Arial;
font-size:9px;
border-styleutset;
font-weight:bold;
margin:1.0 1.0 0.5 0.5;
background-color: Gainsboro;
line-height: 11pt
}

 

[cLFlaVA]

ok, some suggestions:

.panel
{
    font-family: Arial;
    font-size: 9px;
    border-style: outset;
    font-weight: bold;
    margin: 2px 2px 1px 1px;
    background-color: Gainsboro;

    /*
    i have commented this line out.  try without it.
    if you notice a difference, change this value (smaller)
    to lessen the spacing between controls

    line-height: 11px;

    */
}

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CorbinMyMan]

awesome, that did make it look a little better, but i'm still not able to control the space between my controls

 

[cLFlaVA]

well, your controls are being displayed in inline elements: span and label. inline elements, as far as i know - cannot have a line-height, height, width, padding, nor margin.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CorbinMyMan]

ahh thats logical.

thanks for the suggestions!

 

[KevinADC]

inline elements can have those things, at least last time I ever checked they could. A simple check would reveal they can or can't:

<span style="font-size: 200%; align: right; text-align: right; width: 150px; border: solid thin #FF00FF; margin: 10px; padding: 20px; background-color: #DDDDDD; line-height: 300%;">
inline span tag<br> test test test<br>test test test 
</span>

 

[KevinADC]

inline elements can have those things, at least last time I ever checked they could. A simple check would reveal they can or can't:

<span style="font-size: 200%; width: 50%; border: solid thin #FF00FF; margin: 10px; padding: 20px; background-color: #DDDDDD; line-height: 300%;">
inline span tag<br>test test test<br>test test test 
</span>

 

[cLFlaVA]

Kevin,

the last time you checked, did you use a complete doctype?

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[KevinADC]

sorry for the double-post (I plead old age and having too many windows open at the same time).

No I didn't check with the doctype, can you bring me up to date or point me to an online resource?

Thanks.

 

[cLFlaVA]

no prob!

take a look at the difference:

[&laquo;]no doc-type[&raquo;]

<html>
<head>
<title>Untitled</title>
</head>

<body>

<span style="font-size: 200%; width: 50%; border: solid thin #FF00FF; margin: 10px; padding: 20px; background-color: #DDDDDD; line-height: 300%;">
inline span tag<br>test test test<br>test test test
</span>

</body>
</html>

[&laquo;]complete doc-type[&raquo;]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
</head>

<body>

<span style="font-size: 200%; width: 50%; border: solid thin #FF00FF; margin: 10px; padding: 20px; background-color: #DDDDDD; line-height: 300%;">
inline span tag<br>test test test<br>test test test
</span>

</body>
</html>

complete doc-types are part of the new w3 html and xhtml standards. here is one of many online articles.



*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[KevinADC]

my sample code is funky as I wanted to test the margin, padding and line-height mainly, padding and margin did not work, but line-height seems OK.

With:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Padding seemed to work in IE6 but not Mozilla1.5. Margin seemed to not work at all with a doctype tag. Width works in IE and Mozilla with the above doctype, but width does not work with XHTML 1.0 doctype.

HTML is a messy thing at best.

 

[Vragabond]

Kevin, the above is not a complete doctype and is similar to no doctype. That's that. I do however believe that padding can be applied to inline styles. At least I never had any problems with it.

 

[KevinADC]

What is incomplete about the doctype tag? I am admittedly out of date on HTML and CSS so any info is appreciated.