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
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 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;
}
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;
}
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/