Link to home
Start Free TrialLog in
Avatar of mjacobs2929
mjacobs2929

asked on

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
Avatar of ellandrd
ellandrd
Flag of Ireland image

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
can you explain better?
Avatar of mjacobs2929
mjacobs2929

ASKER

>>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>
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&

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.
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.

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&

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>



   
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&
>>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
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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