I've come across something I do not yet understand in a form I'm designing.
I have a <select> box inside a <ul> and I want to float the <ul> left and reduce the column
width to < 50% so I can include some notes alongside. BUT when I apply the float to the <ul> the
<select> box will no longer expand when its down-arrow is clicked (nor when I click in the
<select> box itself).
See this Codepen: https://codepen.io/ramasaig/pen/YGqNxq/
I added the 'position: static' to the <ul class='w50'> styling in the hope of undoing the
'position: relative' on all <ul> , but it didn't have any effect. Removing the 'position:
relative' solves the problem, and hasn't so far had any unintended consequences.
Here's the HTML:
<fieldset>
<legend><span>Select Year</span></legend>
<ul class='w60'>
<li>
<label for="sel_ix">Year<span class="rubric1"> *</span></label>
<select name='sel_ix' id='sel_ix'>
<option value='0'>2016</option>
<option value='1' selected >2017</option>
<option value='2'>2018</option>
</select>
</li>
</ul>
<ul class='w40'>
<p>
The year for which settings are to be made<br />
Defaults to 'next year'.
</p>
</ul>
<ul>
<li>
<input class="submit" name="select" type="submit" value="Confirm
Year" />
</li>
</ul>
</fieldset>
and the (partial) CSS (as used in Codepen):
fieldset ul {position: relative;}
.w50 { // applied to the <ul> containing the <select>
position: static; // added in hope of cancelling the 'position:
relative'
float: left;
width: 50%;
}
I've tried in both Firefox and Chrome, with the same result. I've also tried making the CSS both
more and less specific, also without success.
I do have a work-around if necessary (remove 'position: relative'). But why do I a problem in
the first place? Any help would be much appreciated.
Regards,
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
