As a requirement at work, I have to use someone's stylesheet and I'm having trouble trying to override one behavior. The unordered list elements <li> are having text that exceeds 1 line wrap around to the area below the bullet point. Here's the CSS that is causing the behavior:
ul
{
list-style: none;
list-style-position: inside;
padding: 0;
}
li
{
list-style-type: disc;
list-style-image: none;
margin-left:0px;
margin-bottom: 5px;
}
Here's a fiddle for that: http://jsfiddle.net/CP32B/1/
What attribute do I need to override so that I can get the text to align like it does by default? (Example of default behavior: http://jsfiddle.net/B5jPH/)
list-style-position: inside; is the property which causes that behavior and inorder to fix that, you need to use outside
Demo
ul
{
list-style-position: outside !important;
padding-left: 2em !important;
}
!important will override the css
Applying padding:0 with list-style-position: inside; is hiding the bullets.
You can left align the bullets without text flowing below it by changing it to the following
ul
{
padding-left:10px;
}
JSFiddle
Related
I have defined a CSS for my basic document layout:
div#content li {
font-size:95%;
list-style-image:url(/css/bullet_list.gif);
line-height:1.5;
}
deeper down in one document, I'm including a CSS file defining
.codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
but the list element still displays the bullet graphic (bullet_list.gif) as if it would override the list-style-image: none; definition. Does anyone know why?
URL of the HTML document in question: http://www.psychotherapiepraxis.at/artikel/trauma/traumatherapie.phtml , the code in question is at the "Bewertung" section close to the end - the rating stars are covered by the bullets.
Try setting near enough the same elements as the original definition but include the selector.
div#content .codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
This should fix your problem.
You should apply list-style rules to UL(OL) tags and so far you are targeting LI(list item) tags
CSS specificity gives div#content li a value of 102 while .codexworld_rating_widget li gets a value of 11. You need to either add a parent with an ID to .codexworld_rating_widget li or remove the id from div#content li. This specificity calculator can be very handy.
Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
I want to make a list with list-style-type: disc; to list some programs.
But the list-items don't get this "disc" and have scrollbars , i don't know why... look here (Link).
It just should be a list with the disc-icon and no scrollbars on the right for every list-tiem.
html:
<ul>
<li>flashtool</li>
<li>test</li>
</ul>
css:
ul {
list-style-type: disc;
}
The problem is in the declaration of the following class.
main > ul li
{
overflow:auto;
}
The above code will point the first level ul under main. That is perfect. But look at the next selector. It will select all the child-selector of li. This is wrong in your case. It should point only first level of li also. Update the code like below. It will work.
main > ul > li
{
overflow:auto;
}
The reason why your list-style-type is not working is the absence of list-style-position: inside. So your CSS need the following modification:
main > ul li .content > ul {
list-style-type: disc;
list-style-position: inside;
}
in your common.css line number 4
Use
.content ul{
list-style-type:disc;
list-style-position:inside;
}
if you want to remove scrollbar set overflow:hidden
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
I've removed the bullet on my lists using
ul li { list-style: none; }
But I'm still getting an indentation on the lists as if the bullet was there.
I need the list-item in the image to be exactly centered.
Browsers ship a default styling attached to <ul/> and <li/> tags
ul,li { list-style-type: none;
list-style-position:inside;
margin:0;
padding:0; }
http://meyerweb.com/eric/tools/css/reset/
All the answers provided will fix your issue, but I definately recommend that you look in to using a reset stylesheet so you don't have cross browser issues!
The best one (well most popular one at least), is most likely this:
http://html5doctor.com/html-5-reset-stylesheet/
Hope that helps your issue, but if you don't want to use a reset style sheet simply:
ul, li{
margin: 0;
padding: 0;
}
You can also add a margin and padding 0:
ul li {
list-style: none;
margin:0;
padding:0;
}
If you want to center the text, try
li{
padding-left: 0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}