Skip to main content
Known Participant
February 23, 2010
Question

Is this Cf or CSS causing problem?

  • February 23, 2010
  • 3 replies
  • 678 views

I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet

problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.

You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.

Look at the radio buttons underneath "Step One: Individual Registration"

I cannot get these suckers to line up in a single line. Here is the code:

<div class="box2">

<table>

<tr>

<td width="100%">

    Are you a returning Reno Bowls league player?

  </td>

  <td width="50%">

  <strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">

  </td>

  <td>

    <strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">

  </td>

</tr>

</table>

</div>

Here is the CSS:

/*box2*/

.box2{ background:#e8e8e7; width:100%;}

.box2 .indent-box-1{ padding:35px 0 0 0; }

Inherited CSS: (going backwards)
div.container { overflow:hidden; width: 100%}
then:
/*box*/
.box{ background:#fdfdfd; width:100%;}
.box .border-top {background:url(images/border_top.gif) repeat-x top;}
.box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
.box .border-left {background:url(images/border_left.gif) repeat-y left;}
.box .border-right {background:url(images/border_right.gif) repeat-y right;}
.box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
.box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
.box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
.box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
.box .indent-box{ padding:35px 35px 17px 35px; }
then:
/*T-Reg*/
#tReg { font-size:0.75em; width:100%; text-align:left;}
#tReg .indent-main{padding:0 67px 0 67px}
#tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
#tReg .title h2{ margin-bottom:5px}
#tReg .img-left{ float:left; margin:0 20px 16px 0}
#tReg .img-left1{ float:left; margin:0 20px 0 0}
#tReg .img-indent{ margin:0 0 16px 0}
#tReg .img-indent1{ margin:0 12px 6px 0}
#tReg p{ margin:0 0 17px 0}
#tReg .p{ margin:0}
#tReg .p1{ margin:0 0 17px 0; width:100%}
#tReg .p2{ margin:0 0 7px 0}
#tReg h4{color:#6d6d6d; font-size:1em; }
#tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
#tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
#tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
#tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
#tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
#tReg ul{margin:0; padding:0; list-style:none;}
#tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
#tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
#tReg ul li a:hover { text-decoration:underline; }
#tReg .indent{padding:28px 0 0 0}
#tReg .indent-1{padding:0 0 0 128px}
.txt1{ color:#6d6d6d; font-weight:bold}
.txt2{ color:#b72723; font-weight:bold}
finally:
body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}

    This topic has been closed for replies.

    3 replies

    Participating Frequently
    February 23, 2010

    What's your class="fleft" definition look like?

    USN-WDAuthor
    Known Participant
    February 24, 2010

    .fleft{ float:left}

    .fright{ float:right}

    That's all. It's just a float. Do you think this could be it?

    February 23, 2010

    try this:

    <div class="box2">

    <table>
    <tr>
      <td width="100%">

        <table style="width:100%">
          <tr> 
            <td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
            <td><strong>NO</strong></td>
            <td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
            <td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
         </tr>
        </table>
      </td>

    </tr>
    </table>

    </div>

    Participating Frequently
    February 23, 2010

    Your widths seems a little weird on your td's, 100%, then 50%, then no width.  Try 33%, 33%, 33%.

    USN-WDAuthor
    Known Participant
    February 23, 2010

    Nope. didn't budge a pixel. But thanks for trying.