Any way of breaking out of an 'indent'?

Below is part of the html of a form. I would like the <span> to sit 'outside' the fieldset, in other words, to not take on the indent of the fieldset tag. Is there any way to 'un-indent' the span tag without having to move it elsewhere on the page?

<fieldset title="Select departure date" class="dateGroup indent">
<legend>Depart Date<span id="errorImage5"></span></legend>
<label for="depDay">Day</label>
<span class="showday" id="o_day"><cfoutput>#Left(DayofWeekAsString(DayOfWeek(departDate)),3)#</cfoutput></span>

Many thanks,
MJ
mjacobs2929Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ellandrdCommented:
ok i copied your code and viewed it, i see a label with "Day #Left(DayofWeekAsString(DayOfWeek(departDate)),3)#" wiht a line border around it and in the top corner the title "Select departure date"

I dont see this indend your taking about??

sean
0
ellandrdCommented:
can you explain better?
0
mjacobs2929Author Commented:
>>can you explain better?

Probably not without posting all code, which is alot. I did not intend to send that ColdFusion code snippet, however. This is the actual html output of the above with the relevant css snippets.

I've noticed that if I remove 'indent' from <fieldset title="Select departure date" class="dateGroup indent">, then the span is exactly where I would like to be on the page, however, the words 'Depart Date' move with it. I would like to move the text within the <span> out to the left without moving the words 'Depart Date', if this is possible.

Please let me know if you need more:

****************************************************
#flightSearchForm .dateGroup {margin-top: 0.8em;}
#flightSearchForm .dateGroup label {display: none;}
#flightSearchForm .dateGroup .daySelect {width: 50px;}
#flightSearchForm .dateGroup .monthSelect {margin-right: 1em; width: 120px;}
#flightSearchForm .dateGroup .dateFlexibility {margin-left: 1.5em; width: 160px;}

.showday {font-size: 80%; margin: 0px; width: 28px; text-align: left;}

****************************************************
 
    <form name="FCform" action="/cfmx/version2/index_xhtml.cfm?" method="post" id="flightSearchForm" title="Please select your desired flight" onSubmit="return submit_FC_Form();">
      <input type="hidden" name="step" value="GetAvailability">
      <input type="hidden" name="user" value="Frank Gomez">
      <fieldset title="Choose between a return or a one way flight" class="radioGroup">
      <input type="radio" name="returnn" id="typeReturn" value="returnn" title="Select return flight" checked="checked" onClick="UpdateAirportsfromCountry();UpdateAirportsfromCountry2();toggle('showhide','block')">
      <label for="typeReturn">Return</label>
      <input type="radio" name="returnn" id="typeOneWay" value="oneway" title="Select one way flight" onClick="UpdateAirportsfromCountry();UpdateAirportsfromCountry2();toggle('showhide','none')">
      <label for="typeOneWay">One Way</label>
      </fieldset>
      <fieldset title="Select departure date" class="dateGroup indent">
      <legend>Depart Date<span id="errorImage5"></span></legend>
      <label for="depDay">Day</label>
      <span class="showday" id="o_day">Wed</span>
      <select id="depDay" name="dc1_day" onChange="listDays(0,'dc2_day','dc2_year_mon');showDay('FCform','o_day','dc1_day','dc1_year_mon');reconcile_dates()" size="1" title="Choose departure day" class="daySelect">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17" selected>17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
      </select>
      <label for="depMonth">Month and year</label>
      <select id="depMonth" name="dc1_year_mon" onChange="listDays(0,'dc1_day','dc1_year_mon');showDay('FCform','o_day','dc1_day','dc1_year_mon');UpdateAirportsfromCountry();UpdateAirportsfromCountry2();reconcile_dates()" size="1" title="Choose departure month and year" class="monthSelect">
        <option value="112004"  selected>Nov 2004</option>
        <option value="122004" >Dec 2004</option>
        <option value="012005" >Jan 2005</option>
        <option value="022005" >Feb 2005</option>
        <option value="032005" >Mar 2005</option>
        <option value="042005" >Apr 2005</option>
        <option value="052005" >May 2005</option>
        <option value="062005" >Jun 2005</option>
        <option value="072005" >Jul 2005</option>
        <option value="082005" >Aug 2005</option>
        <option value="092005" >Sep 2005</option>
        <option value="102005" >Oct 2005</option>
      </select>
      <a href="javascript:void(0)" onClick="if(self.gfPop)gfPop.fStartPop(document.FCform.dc1,document.FCform.dc2);return false;" HIDEFOCUS><img src="img/calbtn.gif" alt="" name="popcal" width="34" height="22" border="0" align="absmiddle"></a>
      <input type="hidden" name="dc1" value="" size="12">
      <label for="depFlex">Departure flexibility</label>
      <select id="depFlex" name="exactdatedep" size="1" title="Add flexibility to your departure date" class="dateFlexibility">
        <option value="plus" selected>3 Days Either Side</option>
        <option value="exactdate">Exact Day</option>
      </select>
      </fieldset>
    </form>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
Add this to the .showday class:

padding-right:15px;text-indent:0;

Just adjust the value of the padding-right to fine tune it.

Cd&

0
mjacobs2929Author Commented:
Sorry for taking so long to get back to you.

padding-right:15px;text-indent:0;
has had no effect, other than to create a bit of padding to the right of the object.
0
mjacobs2929Author Commented:
I thought that using a negative here would work:
text-indent:-10;
But this just makes the object become half hidden in the 'margin'.

margin:-10px; has the same effect.

0
COBOLdinosaurCommented:
I guess I don't understand what you want to do because the change I gave you does exactly what I thought you were after.

Cd&
0
mjacobs2929Author Commented:

It seems to me that the span tag is taking on the 'class="dateGroup indent" in the fieldset tag, but I don't know enough about css to tell.

      <fieldset title="Select departure date" class="dateGroup indent">
      <legend>Depart Date<span id="errorImage5"></span></legend>
      <label for="depDay">Day</label>
      <span class="showday" id="o_day">Wed</span>

This is what I have:
    <fieldset>
    <span>

This is what I would like to have:
    <fieldset>
<span>



   
0
COBOLdinosaurCommented:
You want to render it outside the fieldset container?  That will result in a pretty defective structure.  You can a negative margin on the span margin-left:-25px but you will need to also use padding-right of an equal value to keep elements to the right of the span from moving with it.

However going outsid the box will work in Mozilla, but in IE it end up hidden.  I tried adding overflow:visible to the fieldset, but IE still hid it.  So you can try playing with that, but I have never seen anything like this do anything but create maintenance nightmares.  If you want it outside the fieldset, then put it there. Rendering something outside the parent container is just not good design IMO.

Cd&
0
mjacobs2929Author Commented:
>>You want to render it outside the fieldset container?  
>>That will result in a pretty defective structure.

Thanks.
This is a 'design specification' by the powers that be. Not my idea. Are you saying this change will render the page non-WWWC compliant?

>> If you want it outside the fieldset, then put it there.

That's all I would like to do, but it's proving to be awkward.

Cheers,
MJ
0
COBOLdinosaurCommented:
Just use floats. Instead of a span use a div and float both the div and the fieldset.  Adjust the vertical position with padding:

      <div class="showday" style="float:left;width:40px;padding-top:20px" id="o_day">Wed</div>
      <fieldset title="Select departure date" style="float:left"
          class="dateGroup indent">

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mjacobs2929Author Commented:
The above does bring showday outside the margin - but there appears to be no way of getting showday to fall below "Select departure date" _and_ alongside the date field.

Thanks anyway,
MJ



0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.