[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Any way of breaking out of an 'indent'?

Posted on 2004-11-17
12
Medium Priority
?
432 Views
Last Modified: 2008-03-17
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
0
Comment
Question by:mjacobs2929
  • 6
  • 4
  • 2
12 Comments
 
LVL 16

Expert Comment

by:ellandrd
ID: 12602444
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
 
LVL 16

Expert Comment

by:ellandrd
ID: 12602446
can you explain better?
0
 

Author Comment

by:mjacobs2929
ID: 12602956
>>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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12606622
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
 

Author Comment

by:mjacobs2929
ID: 12624453
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
 

Author Comment

by:mjacobs2929
ID: 12625623
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12626951
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
 

Author Comment

by:mjacobs2929
ID: 12627430

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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12628298
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
 

Author Comment

by:mjacobs2929
ID: 12642633
>>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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 750 total points
ID: 12644988
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
 

Author Comment

by:mjacobs2929
ID: 12645673
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question