I'm having difficulty styling a <fieldset> that is a numbered list item in a form.
I've created a form and have made each question an item in an ordered list, like so:
<li>
<label>foo</label>
<input type='text'>
</li>
<li>
<label>baz</label>
<textarea></textarea>
</li>
Now I'm trying to style each list element so that each list number and the question (<label> element) appear together on a line, and the interactive widget appears on the line underneath. This is easy enough for questions that are made up of inline elements, but I'm running into trouble with check boxes and radio buttons that I have grouped together with a <fieldset>.
I've removed the default styling on the <fieldset> and <legend> elements to try and make these questions look like the other list items in the form. But now I'm getting this really odd behaviour where the list number is aligning with the bottom input option (as opposed to with the label).
Changing the list-style-position doesn't help, and fiddling around with the <input> or <label> styles doesn't seem to affect it. I tried changing the <ol> to display: flex and doing a few things with that but that didn't do anything either.
What has worked has been getting rid of the fieldset elements all together, but then there's no semantic relationship between the buttons and the questions, which I know is important for screenreaders. I'm sure I could also get rid of the numbering all together, but I don't want to. I looked it up before I started writing this form and there was nothing to say that nesting elements in <li> was an issue.
I found this blog as a guide to styling <fieldset> but it didn't help me fix my issue.
Here's a fiddle that demonstrates my issue (Q1 and Q3 are demonstrating the effect I'm going for; Question 2 has the weird styling issue).
https://jsfiddle.net/ocfk23un/45/
Basically, I'd like a solution to this issue or I'd like to know why this is happening before I abandon using the fieldset.
You should keep using the HTML that you have as it is semantically correct.
You just need to need to add vertical-align: top; to your fieldset styles:
fieldset {
display: inline;
padding: 0;
border: 0;
vertical-align: top;
}
I have a form build with <ul> but I have a problem when I add checkbox somewhere.
It breaks whole layout.
Problem is somewhere in label styling but can't figure what?
Here is the fiddle.
Your next row is stacking on top of the label floated to its left since the checkbox is not as high as the input field. One simple solution is to add another rule to your CSS to clear it:
ul li { clear: left }
See the jsFiddle.
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
Here's my jsfiddle example:
http://jsfiddle.net/7PqqT/
Update: This is my work around solution: http://jsfiddle.net/7PqqT/1/
However I would like to achieve this same effect without needing the arrow divs to be in each li element.
Now what I'm going to be doing is having jquery addClass('current') to whichever of the 3 li elements the user clicks on, and it I want the arrow to appear below that li element in the center of the text. I'm not sure the best way to do this, I'm hoping there's a simple method to go about doing this.
Here you go, I updated your JSFiddle.
Basically, I just deleted the arrow div completely and change the arrow-related CSS to :before and :after pseudoelements. Works like a charm.
I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index problems. This seems to be a known problem.
<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>
Does anyone know of a workaround?
UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.html shows exacly the problem I have. My original posting was in the context of a list but I have reduced the problem to the fact that z-index dosn't seem to work when have an element with position:absolute inside a parent element with position:relative
Here's a very good article that explains the stacking issues that machineghost mentions.
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
What you might want to consider (depending on why you're wanting the positioning on multiple elements) is adding a hover selector to .base (use JavaScript for IE6) that adds the class to give it relativity.
.base:hover{position:relative;}
This then means that the second .base doesn't have position: relative.
Ok, I think your problem probably stems from a lack of understanding about how z-index works. The z-index property is only relevant for elements at the same level in the DOM hierarchy. In other words, if you have:
<ul id="a">
<li id="b">b</li>
<li id="c">c</li>
</ul>
<div id="d"></div>
and "b" and "c" are styled such that they overlap, z-index will determine which one ends up on top. However, if "c" and "d" overlap, "d" will always be on top, no matter what c's z-index is, because elements that are closer to the root DOM node will always appear above elements that are nested deeper in.
So, as long as "subnNav" is a child of "topNav," I don't think there is any way to make it cover it's parent's content. In other words, as far as I know there is no workaround for this issue, except to make "subNav" not be a child of "topNav".
(NOTE: All that being said, CSS is not simple, so there may still be some way to get the effect you want that I'm not aware of. All I can say is that, based on my understanding of z-index and my pretty good general CSS knowledge, there's no way that I know of.)
adding
background: url(blank.gif);
for absolutely positioned elemnts solves the problem for me. Mybe it can helps u 2 :)
regards
I had the same issue and was able to fix it In IE6 and 7. Combining http://code.google.com/p/ie7-js/ with the following CSS the issue went away. With my issue I had some items inside a list floated left and had a tooltip that popped up whenever the user hovered over the li. To fix it, I adde this:
.ul li:hover {position:relative;z-index:4;}
.ul li:hover + li {position:relative;z-index:3;}
The way it works is whenever the user hovers over the first LI for example, it sets the second LI floated next to it to a lower z-index value. You can of course change the z-index values to fit your own needs.
This did the trick for me. ;)
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
Stu Nicholls at CSSplay has a get CSS Based nav w/ 6 level drop down (Can be expanded to more if needed). This works in Internet Explorer IE5.5, IE6, IE7, Firefox, Opera and now Safari, Netscape 8 and Mozilla.
Solution: assign z-index in decreasing order
<div class="base" style="z-index:2">
<div class="inside">
This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index.
</div>
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it.
</div>
<div class="base" style="z-index:1">
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box.
</div>
Similar to answer by #Orhaan, setting a background property to the absolute element is the only solution that worked for me...
background-color: rgba(0,0,0,0);
Thanks Alex Leonoard