I can't figure out why my 'list-style: disc' gives different appearance in different browser. See http://www.galadadatingandrelating.com/ under the aqua colored 'Contact Us' area there are 3 li element. -
If you want to join us sailing as an individual or a couple, at any time, contact us here.
If you have a dating and relating question/dilemma feel free to send it here. We may reply to you personally or we may cover it in a blog.
If you have a question on any of the services, packages, next sailing and exotic islands trips – feel free to ask us here.
Now they show a disc just before them in Firefox but in Chrome the disc is totally on the left.
Why does the Chrome browser show this incorrectly?
Add list-style-position: inside; to the <li> elements:
.line-wrap ul li {
list-style-position: inside;
}
A list example to see the problem and solution in action:
ul#one, ul#two {
text-align:center;
}
ul#two {
list-style-position: inside;
}
<ul id="one">
<li>List</li>
<li>Number</li>
<li>One</li>
</ul>
<ul id="two">
<li>List</li>
<li>Number</li>
<li>Two</li>
</ul>
from the specification about the inside:
The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements. CSS 2.1 does not specify the precise location of the marker box.
https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position
Explanation:
On Google Chrome the default value of the list-style-position is outside:
On Mozilla Firefox too, it seems Firefox interprets this rule a little bit different!
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 have a list with custom image bullets. If the user hovers her mouse over the bullet image, I'd like to either:
display a title attribute, or
display helper text
I can use JavaScript-based solutions, if needed
My source looks like this:
<style>
li.important { list-style-image: url(important.png) }
</style>
<ul>
<li class="important">Test</li>
<li>Test</li>
</ul>
Edit: I want the mouseover/title text to appear only over the bullet, but not over the body of the <li>.
As far as I know, it's not possible to pickup a mouseover of the bullet rather than just the <li> item.
One alternative (which is a bit dirty, but hey) is to include your "bullet" as part of your markup.
<li><img src="important.gif" alt="Something" title="Hey! Useful info!" /> Test</li>
jQuery('li.important').mouseover();
I'm failing to see the problem with the first bullet point you mentioned:
http://jsfiddle.net/xrGqk/2/
Tested setting a title attribute on a custom image LI in Chrome, FF, IE7. Mouse over the image on the LI and the title pops up in all three browsers.
onmouseover seems to work fine as well:
http://jsfiddle.net/xrGqk/4/
You should have an alert when you mouse over the LI custom image bullet.
Give these a try and see if they work for you. If so, consider posting the code that is giving you problems.
I have the folowing nested list structure:
HTML:
<div id="my_nested_list">
<ul>
<li>
Item label
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
<li>
<li>...</li>
</ul>
</div>
CSS:
#my_nested_list>ul {
/* first level list */
}
#my_nested_list>ul>li {
/* first level items */
}
#my_nested_list>ul>li ul {
/* second level list */
}
#my_nested_list>ul>li ul>li {
/* second level items */
}
My problem is that with space selector instead of >, first level rules apply on the second level. But i need ie6 support, which does not support >. Thus i have to use space.
So far i have 2 solutions:
put classes on every ul and li, and use #my_nested_list ul.firstlevel li.firstlevel
use #my_nested_list ul li, and #my_nested_list ul li ul li to rewrite every unwanted first level rule.
Do you have better ideas?
Ordering the css properly is the key word.
http://jsfiddle.net/wHztz/
CSS:
ul { background: red; }
ul ul { background: green }
ul li { background: yellow; margin: 10px;}
ul ul li { background: blue; }
HTML is the same as in your question, minus the div.
Edit: Damn i always end up realizing things after ive posted my answer.. Seems like you had this idea.
About putting classes to the list. You would only need to put classes to the ul's
( Nevermind.. it depends )
Edit2: If youd insist on using classes on each element but really dont care for adding them manually, you could do something like this: http://jsfiddle.net/wHztz/5/
This gives each ul a class in sequence: ulist1, ulist2, ulist3... depending on how many uls you have of course.
Edit3: changed the code a little.
http://jsfiddle.net/wHztz/6/ - Note that i didnt change anything in the CSS so CSS doesnt do a thing in this example.
jQuery:
$("#my_nested_list > ul, ul ul").each(function (i) {
i = i+1;
$(this).addClass("list"+i).children().addClass("list"+i);
});
This generates to:
<div id="my_nested_list">
<ul class="list1">
<li class="list1">
Item label
<ul class="list2">
<li class="list2">Subitem 1</li>
<li class="list2">Subitem 2</li>
<li class="list2">Subitem 3</li>
</ul>
</li><li class="list1">
</li><li class="list1">...</li>
</ul>
</div>
You could easily target this like:
ul.list1 {}
li.list1 {}
ul.list2 {}
li.list2 {}
Note that you could change this part:
$(this).addClass("list"+i).children().addClass("list"+i);
into
$(this).addClass("ul"+i).children().addClass("li"+i);
and it would result to this.
<div id="my_nested_list">
<ul class="ul1">
<li class="li1">
Item label
<ul class="ul2">
<li class="li2">Subitem 1</li>
<li class="li2">Subitem 2</li>
<li class="li2">Subitem 3</li>
</ul>
</li><li class="li1">
</li><li class="li1">...</li>
</ul>
</div>
Your problem isn't the > selector, it's the need to support IE6.
My first advice would be to try to minimise your requirement to support this ancient browser -- even if you can't drop support entirely, accept the fact that it doesn't support some things you want to use, and that it'll look bad as a result. If it is still usable in IE6, then you've done the job, no matter how bad it looks.
This advice probably won't help in this specific case, because if you're styling nested lists, it probably means a menu structure which really needs to be styled differently between the two levels. But in general, don't sweat it too much for IE6; it's not worth the hassle.
If you really need to get some new-fangled CSS selector to work in IE6, I would recommend going the Javascript route. There are several good libraries out there which target older versions of IE, and hack in support for various features, including CSS selectors.
The two that spring to mind are:
Firstly the venerable IE7.js by Dean Edwards (and the follow-on scripts, IE8.js and IE9.js). This script has been around for ages, and adds a raft of features and bug fixes to various version of IE, but primarily IE6.
Secondly, you could try Selectivizr. This is a much newer script which focuses on adding missing CSS selectors to various versions of IE. Selectivzr works in conjunction with another library (it can use any one of several), so if you're already using a library such as JQuery or MooTools, this may be a good choice.
Both of the above will make IE6 recognise your > CSS selector (among others), and thus your stylesheets will work in IE6 without any need to rewrite them.
Obviously, both these solutions use Javascript to work, so if your IE6 user base is in the habit of switching off their Javascript then they'll end up with a broken site. It is for you to determine how serious an issue this is and how many people it will affect.
I hope that helps.
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