I've an unordered HTML list (ul). If the second word is too long the line wraps automatically but the overflowing text isn't indented.
Any ideas how to solve that?
Here is the example:
http://tinyurl.com/yk32ek6
Then "Leistungen" and then click on KINDERZAHNHEILKUNDE. Now you see what I mean.
Probably it's because of the css, don't know about that.
Replace your indent with padding
padding-left: 2em;
text-indent: -2em;
Should do the trick
add this CSS:
ul {
list-style-position: outside;
}
Example here: http://jsbin.com/emeda/
For my ordered list and the multi line indent I have followed below css
.surveyorderedlist{
ol{
list-style-position: outside;
}
li{
margin-bottom:5px;
margin-left:40px;
padding-left:8px;
}
}
and then your html should be
<div class="surveyorderedlist">
<span><b>Conditions imposed</b></span>
<ol>
<li>Names and addresses are accessed only by the Financial Service Provider on its own behalf, and solely for its own use;</li>
<li>Names and addresses may only be accessed for a specified purpose;</li>
<li>The fees charged for the provision of the names and addresses from the Motor Vehicle Register (MVR) are duly paid;</li>
<li>Any instances of unauthorised access must immediately be notified to the Secretary for Transport and the Privacy Commissioner; </li>
</ol>
</div>
This is happening because the word Prophylaxe in der Schwangerschaft is too long to fit in that side bar. You need to increase the width of the sidebar containing your list.
The only other solution is to decrease the font size so that even words like above are shown as per width of the sidebar.
EDIT Please let me know if my answers is correct or not as i have some belief of that reason even though someone has -ve marked me; so please let me know if i am wrong by trying it out. thanks
Related
Running Windows 7, Chrome Version 53.0.2785.116 m
It appears that a huge gap has been added to ul lists between the bullet and the first character of the li item. I am using list-style-position: inside; and that is what appears to be adding the space (and I'm not referring to the positioning of the entire line further over - just the space between the bullet and the first character.)
A bare bones HTML5, no other CSS example will show this:
<ul>
<li style="list-style-position: inside;">One</li>
<li>Two</li>
<li>Three</li>
</ul>
Compare the space in the first line to the other two lines.
WHY?! This was a BAD design "feature" of Microsoft Internet Explorer, and I sure hope that Google isn't imitating it. The gap appears to be even wider than IE's. So now I am getting additional (and unnecessary) line wraps when viewing a page in Chrome. This means less content can be put into a fixed width/height design. Or smaller fonts to compensate, etc.
A bullet needs only one space between it and the content; to act as a space between the text leading up to the list and each item within the list.
Anyone else seeing this? (This has to be quite recent, as it wasn't a problem just last week when I updated the page)
In the meantime, I might suggest the following workaround:
li:before {
content: "\a0";
display: inline-block;
width: 0;
margin-left: -.5em;
margin-right: -.5em;
}
For example:
http://dojo.telerik.com/AseNe
Hopefully, you will be able to come up with an appropriate selector(s) that will target all relevant <ul>s and not require changes in the HTML markup.
I'm working on a resume-layout done in html/css. The problem I am encountering is an inheritance issue, I think. I've done a bit of research online, and this seems to be a fairly common problem, often associated with IE (insert expletives about IE).
This is what I'm attempting:
Edit
I want to have the parent list item underlined with no bullet point (disc).
I want the child (nested list) to have a bullet point (disc) and no underline.
So I've gone to JSfiddle and cut out the sections of the code (CSS normalize checked) to try and sort out what's going on and what I might be doing wrong.
HTML:
<h3>Qualifications Summary</h3>
<ul id="qualifications">
<li>BS in Computer Animation with a focus on art, design, illustration, and motion graphics.</li>
</ul>
<h3>Related Experience</h3>
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
<li>Nov 2006 - April 2008 ~ <span class="jobtitle">Graphic / Web Design</span> ~ National A1 Inc, Philadelphia, PA
<ul>
<li>Junior Designer</li>
</ul>
</li>
</ul>
This is the CSS:
ul {
padding-bottom: 15px;
margin:0px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 14px;
}
/*Nested List Issues*/
ul.experience li {
text-decoration:underline;
list-style: none;
}
ul.experience ul li{
text-decoration:none;
list-style: disc;
}
Even with the code sectioned out and only the CSS that relates directly to it used, I still get the error.
Question I've been asking myself:
1) Is it something in the Normalize code? Not that I can see.
2) Is it the Browser/version? I use Chrome 36.x mostly. I've checked it in IE and Firefox. The same issue occurs.
3) Is there another way of doing this? Perhaps and very likely my syntax or usage is wrong. I've tried other ways including the > selector, but the most I get is the discs on the nested li shows up.
I made other attempts but as I am new.... I can't posted them yet. :)
I just can't seem to get it to work. What have I done incorrectly?
edit
Current suggestions offer to place a span tag around the parent element's content and style that. So far that seems to work. It adds more code to the markup rather then focus on CSS muscle. Inelegant but functional.
The normalize setting causes margin and padding on the list items to be removed. Try setting the list item to have a margin-left of 2em for instance. Also, instead of the text-decoration on the outer li, place your text in a span, and set the text-decoration on that instead.
You don't state exactly what the issue is, but I'm going to assume that it's 2 things:
1) The underline text-decoration property is showing up in the sub-list items. This is a bit confusing until you look at the markup:
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
Note that the first-level list item for <ul class="experience"> is not closed until after the sub-list is closed. What this means is that the sub-list gets the underline appearance even if you over-ride it on the sub-list items (as the property is actually on the parent list item).
To get around this, wrap the part you want underlined in another element, like a span and apply the underline style to the span:
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
CSS:
ul.experience > li span {
text-decoration:underline;
}
2) The other issue I assume, is the disc not showing up. That's because normalize.css removes margin and padding from all lists. Add that back in:
ul.experience ul {
list-style: disc;
padding-left: 2em;
}
fiddle
IF you un-check "Normalized CSS" on the Fiddle Options (left pane of Fiddle) your code should work somehow... (it worked for me).
Using both steveax and Steven Don's suggestions I still had trouble with it. I realized that a part of the issue was with Bootstrap 3.0. After singling out the code and the CSS in Jssfiddle, though it mostly worked there, it still was not working in my working draft.
After a bit of adjusting both html and the css I finally got it to behave with little issues. However where it worked in JSFiddle, it wasn't working in my working code.
So because I was using bootstrap I double checked the documentation and still couldn't find the issue there. So I used Chrome's inspect element. For some reason list-style does not override the more specific list-style-type in Bootstrap.
So I switched the CSS around so I wasn't turning off and then on-again the list style Bootstrap was enforcing. I just switched off the disc for the main entry heading that was underlined as well, and then used the span tag on it (the first li) to underline it while avoiding underlining the child element as well.
I even removed the span around the job title, and used the strong tag instead.
HTML
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <b>Freelance Illustrator & Web Designer</b> ~ Drakenhart Studios </span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
</ul>
CSS
ul.experience > li { padding-left:2em; }
ul.experience ul { list-style:disc; padding-left:2em; }
ul.experience > li span { text-decoration:underline; }
Less code then I was using before in my CSS. It now works properly.
Try using the CSS important. An example of how it would be used is below:
text-align: center !important;
As you can see, it goes just before the semi-colon. Hope this helps!
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I have an HTML ordered list, that I need to apply a strikethrough to. I have done this in CSS as below:
.Lower-Alpha {
list-style: lower-alpha;
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
}
The issue I am having is that this strikes through the content in the list, but not the number of the list (and I need to do both).
Eg I am getting:
a. struckthrough content
but I need:
a. struckthrough content
Any suggestions welcome.
Cheers
easy as pie: list-style-position: inside;
http://jsfiddle.net/seler/NWbrR/
edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.
edit2:
for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/
#Haem; You can apply :after property
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
check the fiddle for more may be that's help you
http://jsfiddle.net/sandeep/NWbrR/4/
the list style is NOT styleable in this way - you'd have to remove the list style identifier (a,b,c etc) inside the li as content.
This is default browser behaviour and you wont be able to strike through the number/letter provided by the list.
If it is possible in your situation you could hide the numbering provided by the list and add it to the list text content yourself.
You might have to take care of the numbering yourself - either manually, server-side, or some jQuery - and use an unordered list like this:
<style>
.Lower-Alpha
{
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
list-style: none;
}
</style>
<ul>
<li class="Lower-Alpha">a. Foo</li>
<li class="Lower-Alpha">b. Bar</li>
</ul>
This'll render as:
a. Foo
b. Bar
It can be done as follows:
Create a wrapper <div> around the <ul>.
Style the wrapper <div> with the strikethru (or whatever other font size/style you're wanting for the list item numbers)
Style the <li> elements back to your normal font settings.
The list item numbers will then pick up the font settings from the parent <div>, and will have the strike-thru, and the list content will be normal text.
Note, this will only work if you want all your list item numbers styled the same way. Your question implies that this is what you want, but if you only wanted to do strike-thru on specific list items then you'd need to use #seler's solution.
You can't style the list item. It might look better this way?
I have css like this:
.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}
And html like this:
<ul>
<li class="done">Done</li>
<li class="notdone">Not Done</li>
</ul>
Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.
Is there a proper or standards-based way of doing what I am trying to do, or is this it?
EDIT: http://www.w3.org/TR/CSS21/generate.html
It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.
I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag
<ul>
in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing
The CSS 2.1 standard gives examples where list-style is applied directly to an li.
Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.
Followed by:
ol.alpha li { list-style: lower-alpha } /* Any "li" descendant of an "ol" */
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */
So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.
Following up to your edit...
If you look at the default style sheet for CSS, you will see that li is defined as follows:
li { display: list-item }
In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.
I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:
li {list-style: none; padding-left: 15px;}
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}
The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.
I don't see a problem with what you are doing. What docs are you talking about?
In theory all entries in a list have the same bullet style. Those lists are historically found in things like outlines where at any level you have 1,2,3 or A,B,C and it would make no sense to mix the different ordinal types with one another. I don't think there's anything wrong with doing what you are doing stylistically. But I don't know if it is correct CSS.