It's easy to set a bullet point colour, but changing it doesn't seem to work in the latest version of Chrome (it works fine in Safari and Firefox).
For example hover the mouse over the elements in the code snippet:
li {
list-style-type: disc;
list-style-position: outside;
margin-left: 20px;
}
ul {
transition: color .3s linear;
color: red;
}
ul:hover {
color: black;
}
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Or JSFiddle (if you prefer that)
You may remove all list styling and add a pseudo element which will make <li> elements look like having a disc style.
li {
list-style: none;
}
li:before {
content: '\25CF\00a0\00a0';
display: inline;
}
Fiddle here.
Related
I've got a transform in a list and there appears to be space after the effect. As the item is inline, I presume this to be the reason.
That said, I'm looking for a solution - to return the word back to HYBRID without spaces.
visual
css
.hybrid {
display:inline-block;
transform:rotate(180deg);
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
html
<li>
Overview of H<span class="hybrid">Y</span>BRID
</li>
Your span is inheriting a text-indent from .sidebar-nav li (line 63 of stylish-portfolio.css). Fix it with:
CSS
.hybrid {
text-indent: 0;
}
I have some silly CSS problem. Cant get my navi bar working the way I would want it.
Problem is, that it keeps the arrows under anchor text somehow.
This is example of html:
<ul id="navi">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
and stylesheet:
#navi {
list-style: none;
padding: 0.5em;
}
#navi li {
float: left;
display: inline;
list-style-type: none;
}
#navi li a {
display: block;
font-weight: normal;
font-size: 13px;
color: #222;
padding: 0.2em 1em;
text-decoration: none;
}
#navi li a:hover, #navi li a:active {
background: #5ea0ff;
color: white;
text-decoration: none;
}
#navi li a.selected {
background: #444;
color: white;
text-decoration: none;
}
#navi li:after {
content: "\25B6";
}
#navi li:last-of-type:after {
content: "";
}
This is how it looks like: http://jsfiddle.net/M2AHY/1/
I want the arrows right after anchors, but I can't use a:after (which works good, but hovers with anchor text)
Thanks
This is due to the fact that the element the arrow is appearing after, the anchor tag, is styled with display:block - a property which by itself, will push subsequent content to a new line. If altering this slightly won't be a problem, you could replace the style with:
#navi li a {
display: inline-block;
}
Which allows the arrow to appear on the same line. Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
EDIT: Alternatively, you may apply a float to the anchor tag. For example:
#navi li a {
float:left;
}
This lets you retain the block display, but also allows the arrow to appear on the same line.
A simple approach to resolving this would be:
#navi li a:after {
content: " \25B6";
}
Note that I've added the content after the and put a space in the content. Hope that helps!
I cannot seem to get my menu items to be clickable...they work in IE, but not Firefox or Chrome. I can also get them to work on my iPad in Chrome and Safari, but not when I hold the iPad in landscape mode. Very weird.
HTML:
<div id="options" class="clearfix">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li>All</li>
<li>Tech</li>
<li>Social</li>
<li>Health</li>
</ul>
</div>
And the CSS:
#options ul {
list-style: none outside none;
text-align: center;
margin-bottom: 25px;
margin-top: 10px;
}
#options li {
display: inline;
}
#options li a {
color:#666666;
font-size: 15px;
padding: 10px 10px;
text-decoration: none;
text-transform: uppercase;
line-height: 34px;
}
#options li a:hover {
color:#3B5998;
}
#options li a:active {
color:#3B5998;
}
#options li a.selected {
color:#3B5998;
}
Any help would be great, I am not the best at HTML and CSS so I appreciate any insight.
My site is www.pinstart.us
Cheers.
Your ".navbar-fixed-top" div is overlapping the "#option" bar !
you can verify this by setting:
.navbar-fixed-top{
z-index: -5;
}
edit: this wont ruin the site looks.
#options{
position:relative;
z-index: 9999;
}
hope this points you on the right direction !
Seems to be working fine for me but you could try making your 'a' tags display: inline-block
#options li a {
display: inline-block;
}
Have you tried placing your
<a href...>
tags outside of your
<li>
tags instead of inside them? I know that sometimes this makes a difference for me.
Follow-up from another post here: IE7 li bullet or number shown outside of div
In the previous post, the li element outside the div was fixed, but now I have another IE7 bug with the hover element. Since the hover element can not be set through the , how do I fix this one?
P.S. Obviously I've been having some trouble with the hasLayout bug in IE, so it someone was to give a nice explanation it would be appreciated.
Again everything works in firefox, etc.
The screenshots:
The code:
#create_request ol {
width: 339px;
}
#create_request li {
display: list-item;
line-height: 23px;
background-color: #E3E3E3;
list-style: decimal;
list-style-position: inside;
padding-left: 25px;
padding-top: 5px;
}
#create_request li.alternate {
background-color: white;
}
#create_left li:hover {
width: 356px;
background: url('/images/list_add.png') 100% 100% no-repeat;
background-color: #B0B0B0;
cursor: pointer;
}
Unfortunately, that's not possible without bringing in another element in the <li>. The incorrect list-style-position behaviour occurs in IE6/7 when the <li> element get hasLayout. You want to totally avoid hasLayout on the element. The width is one of the hasLayout triggers.
I suggest to put a <span> in the <li> (yes, sorry if you would cry)
<li><span>Item</span></li>
and change the li:hover style as follows
#create_left li:hover {
background: #B0B0B0;
cursor: pointer;
}
#create_left li:hover span {
display: block;
width: 356px;
background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}
This way the span controls the width of the <li> without giving it hasLayout. You only need to remove padding-top: 5px; from the <li>'s CSS and counteract it with line-height, otherwise the <span> will not get the full height.
Make it if necessary an IE6/7 conditional stylesheet.
I believe you need to declare "list-style-position" in the rule for your OL tag:
#create_request ol {
list-style-position: inside;
}
I have a menu uses nested unordered lists to give the appearance of a secondary dropdown menu. This is working well for the most part. I recently refactored the CSS code to make it cleaner and easier for me to understand, but now I can't seem to get the secondary (dropdown) menu to appear behind the top-level menu. Both elements have positions declared.
The HTML is fairly straightforward and I don't think there's any problem here:
<div id="header-menu">
<ul>
<li>what</li>
<li>what
<ul>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</li>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</div>
The CSS, however, is doing things that I don't really understand.
#header-menu > ul > li {
font-size: 2em;
display: inline;
position: relative;
}
#header-menu > ul > li:hover {
background: #a4b0ac;
padding: 25px 0;
}
#header-menu > ul > li > a {
padding: 25px;
position: relative;
z-index: 100;
}
#header-menu li > ul {
display: none;
position: absolute;
z-index: 99;
background: #CC6601;
}
#header-menu li:hover > ul {
display: block;
}
#header-menu li ul > li {
font-size: 0.8em;
display: block;
position: relative;
}
#header-menu li ul > li a {
padding: 10px;
display: block;
}
#header-menu li ul > li a:hover {
background: #a4b0ac;
display: block;
}
EDIT: Misread your question initially.
You can't put different z-indexes (z-indices?) on elements that are nested in that way because inside of one element cannot hide behind itself while the rest of it shows. You'll have to un-nest these and then apply the z-index, or remove the conflicting reference in the first z-index applied to <a>.
I tested this in Firefox 3.6 on Windows and it appears to work fine. That is, the secondary menu is appearing under the primary menu. Perhaps you could give us a screenshot of what you're seeing?
Cheers,
Scott
I looked at in in IE7, FF3.5, and Chrome (4.0.249.8).
It looked great in Chrome (drop down under the second menu item), in IE7 the drop down was under the third menu item, and in FF it was under the first menu item. Is this part of the problem? If is is, I believe it is a "position" (relative/absolute) problem vs. a "z-index" problem.
Also, with regard to z-index, I believe that IE resets the z-index stack whenever you change the position along the hierarchy. In your example, the css changes from "relative" to "absolute". Maybe that has to do with it?