Oh and clear:right as well. Sry. Long day. Best, Karl
Sent from losPhone > On Sep 14, 2016, at 6:43 PM, Tim Dawson <t...@ramasaig.com> wrote: > > Hello Karl, > > Thanks for your reply. > > Yes, it did the same for me too, but now I get the notes (in the <p>) UNDER > the <select>, not to the right. And why does that make the <select> work? > > I copied the <p> into a new <li> (as you suggested), and the <select> worked > immediately, even before I'd had a chance to delete the old <p>. Which seems > odd. Maybe I should try an empty <li> under the <select>. > > Late here now, try again tomorrow. > > Best Wishes, > > Tim > >> On 15/09/2016 00:15, Karl DeSaulniers wrote: >> Hey Tim, >> Doing this in your code pen worked for me. >> I moved the paragraph into a li inside the ul for that same select dropdown. >> You had the paragraph inside a separate ul. >> >> >> ... >> <ul> >> <li class="w50"> >> <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> >> <li><p> >> The year for which settings are to be made<br> >> Defaults to 'next year'. >> </p></li> >> </ul> >> ... >> >> Best, >> >> Karl DeSaulniers >> Design Drumm >> http://designdrumm.com >> >> >> >> >>> On Sep 14, 2016, at 5:57 PM, Tim Dawson <t...@ramasaig.com> wrote: >>> >>> 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/ >> >> ______________________________________________________________________ >> 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/ > > -- > 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/ ______________________________________________________________________ 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/
