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;
}
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.
I have a bullet points issue in Internet Explorer. I already tried to remove the doubled displayed bullets in ie, but I can't figured out why they always be displayed. In Internet Explorer 11 it shows my own icon (a green hook) and the generated icon from the browser. I want to keep the green hook and would like remove the gray bullets. Please take a look here.
If you don't have Internet Explorer, please take a look at my . Thanks!
My CSS Code to generate the bullets:
ul,li, .nav ul, .nav li {
list-style:none;
list-style-type: none;
list-style-position:inside;
margin:0;
padding:0;
}
.content ul{list-style:none;margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
content:'';
background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
background-position:left center;
padding:0 0 0 20px;
margin:0 0px 0 0;
list-style:none;
white-space:normal
}
.content ul {padding: 0 0 0 15px;}
.content ul li ul {padding: 0 0 0 15px;}
.content ul li.list:before{background: none;}
The bug comes from pagespeed optimization. When I add the css code directly before the closed body, then the unwanted bullets appear. If I embedded the css file directly in the head, then everythings theem to be ok. I hope someone need this solution too.
I'm having the same trouble of nickName: I just applied a speed optimization appending static resources at the end of body tag (couldn't make dynamic ones) and IE11 doesn't render (some of) the LIs correctly. When I moved the
<style type="text/css">
ul li {
list-style: none;
}
</style>
part to the header, everything restarted working correctly.
The solution is to load the CSS code lazy with JavaScript loadCSS from scottjehl. His framework loads a CSS file asynchronously. Please search for loadCSS from [c]#scottjehl, Filament Group, Inc.
Please remove list-style-position: inside; from line 3 of your CSS file. It will remove bullets from list items.
To remove bullets and tick marks from social buttons, you need to use background image wisely and target specific pseudo element. Please read about it in CSS specification to understand it better.
.socializm ul li:before {
background: none;
}
It's because you applying list-style: none; to the parent and not the child li. Your also applying it to the pseudo-class :before. You just need it on the actual list-item itself.
You code is:
.content ul{list-style:none;margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
content:'';
background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
background-position:left center;
padding:0 0 0 20px;
margin:0 0px 0 0;
list-style:none;
white-space:normal
}
Your code SHOULD be:
.content ul{margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
content:'';
background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
background-position:left center;
padding:0 0 0 20px;
margin:0 0px 0 0;
white-space:normal;
}
/* -- added -- */
.content ul li{ list-style: none; }
Css:
li {list-style: none;}
you need to apply, use just tag li and that's it. The problem is solved
I am trying to remove the bullets in the left module but with no success.
I have created a class for the ul called .menuxxx and then added the below code to my css file although this does not work still. this can be viewed at http://www.safisafihotels.com/testimonials
.menuxxx ul{
list-style:none !important;
list-style-type:none !important;
}
Please guys assist
Your menu (ul) has the class menuxxx, not its parent.
It should be:
ul.menuxxx {
list-style:none !important;
list-style-type:none !important;
}
Your css selector is incorrect. Since you want to style a specific menu, use:
ul.menuxxx {
list-style:none;
list-style-type:none;
}
which will select it properly.
As for the !important tag, now you have corrected your selector, you can remove it.
If, in fact, you wish to remove the triangles from the "SAFI SAFI HOTELS" section, since they are generated from the declaration:
ul li {
background: url(../images/style1/bodyli.gif) no-repeat 0px 7px;
}
and not, in fact, a list styling element, you can remove that from your declaration.
That is not bullets, its background:
ul li {
background: url(../images/style1/bodyli.gif) no-repeat 0px 7px;
}
Remove it, then you can see effect.
Remove the bullet (background-image)
ul.menuxxx li {
background: none;
}
Forgive me if this is incredibly basic, but after researching online for a few minutes, I can't find how to remove the natural indentation from an HTML list. Here is what I have tried with the CSS:
(check out my fiddle)
CSS
ul li {
list-style: none;
margin-left:0;
padding-left:0;
}
HTML
<ul>
<li>There</li>
<li>is</li>
<li>still</li>
<li>an</li>
<li>indent</li>
</ul>
In most browsers, a ul has a padding-left of 40px to allocate spacing for the bullet points.
Simply overwrite the padding. jsFiddle example
ul {
padding:0px;
}
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