I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
Related
Is there a way to print target page numbers with hyperlinks which linked to various places within the same document?
<h1>Table of Contents</h1>
<ul>
<li>Introduction</li>
</ul>
...
<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
<h1>Introduction</h1>
...
</section>
So that the output is like:
Table of Contents (page 0)
Introduction.........................3
...
Introduction (page 3)
I only need this to work with the Google Chrome browser when printing to PDF (on OS X).
Is there some CSS or JavaScript trickery which would allow me to achieve this?
It looks like this is part of a new working draft of the CSS specification:
http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references
I doubt that there is any browser support yet...
I have no idea if this will work in a PDF or not, but to answer the question of how this can be done in CSS:
You can generate the numbers using counter-increment on a pseudo element in css:
note that I changed your <ul> to an <ol> as this is an ordered list, whether you use the list-style or not.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
Making the little dotted line in between the text and the number takes a little more work, but you can achieve that by adding in some extra span elements and using css display: table; and display: table-cell; to lay them out properly:
<ol>
<li><span>Test</span><span class="line"></span></li>
<li><span>Test2</span><span class="line"></span></li>
<li><span>Test3</span><span class="line"></span></li>
</ol>
li {
display: table;
}
li span, li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
Setting the width to 100% on the span.line element, while not setting any width at all forces it to fill all of the remaining space (this is due to table-cell display elements not being allowed to break to new lines, and preventing overflow of content)
See full demo
It's not the cleanest approach to have to add the extra span elements, but it is a bit of a tricky task. Perhaps someone else will be able to take the time to think of a more efficient way to accomplish it? You could always just put an underline under the entire <li>, and skip the extra markup, at the cost of being a little less cool.
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.
Okay, so I'm writing CSS for a navigation bar that uses an un-ordered list to organize the menu. The menu is centered not pushed to any side, and the width of any given li element cannot be pre-determined (it varies with how much text is in the menu item), so I can't hardcode widths.
I have the following CSS code:
#nav ul {
list-style: none;
padding-bottom: 10px;
height:16px;
}
#nav ul li {
position: relative;
display: inline-block;
}
#nav {
position: relative;
margin-top: -30px;
text-align: center;
font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
font-size: 14px;
}
for the nav element, and this works perfectly to produce the centered nav-menu in Chrome 13. But when I view the page in IE8, the UL turns vertical and I can't get it to become horizontal.
So far, search results indicate that I need to float:left; or float:right; the <LI>s to make the menu horizontal. I've tried this and it does make the menu horizontal in IE8 but it will float to left or right. I need to center the menus, and apparently there is no float:center;.
The HTML corresponding to the menu is
<div id="nav">
<ul>
<li class="current_page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
</ul>
</div>
Is there any way without needing to know the width of the LIs or having to resort to JS to get the menu centered AND horizontal?
That code works fine in IE8, see for yourself:
http://jsfiddle.net/bEEEb/
It's probably not working for you because you're not in IE8 Mode (IE7 Mode or Quirks Mode are the alternatives).
Add a doctype as the very first line if you don't have one:
<!DOCTYPE html>
If you need this to also work in IE7 (in which inline-block only works with naturally inline elements by default), then replace display: inline-block with:
display: inline-block;
*display: inline;
zoom: 1;
..of course, if you can get away with display: inline, that's the simplest fix, but you should still work out why your page is not being displayed in IE8 Mode.
just use the following on your li:
display: inline;
Should get you the desire results.
IE doesn't support display: inline-block, use display: inline instead on you li element.
Well, thats the html code:
<ul>
<li>first item</li>
<li>second item</li>
</ul>
And the css:
ul, li { margin: 0px; padding: 0px; }
Nothing fancy, right? And nothing to be proud of, it just shows a list without any margins or padding. Well, almost...
What about this space there? I can't seem to get rid of it. Any ideas? :]
If you want to remove the space between text and bullet, you got to change the HTML-code a little bit:
<ul>
<li><span>first item</span></li>
<li><span>second item</span></li>
</ul>
By giving the li a relative position and the span an absolute position, you can move the span to the left:
li {
position: relative;
}
li span {
position: absolute;
left: 0;
}
You can hack around to get it working, but maybe you might want to consider removing the list-styles and use a background on your <li> instead, like that you'll have total control over it.
A good reference about that: http://www.alistapart.com/articles/taminglists/
W3Schools : http://www.w3schools.com/Css/css_list.asp
The only reliable cross-browser way to achieve this is by dropping the bullets altogether and using background images on your lis instead. This works in all major browsers (even IE5 and Netscape 7.1) and does not require any changes to the HTML itself. See Listamatic for an excellent guide.
I have the following html
<div id="menu">
<ul class="horizMenu">
<li id="active">About</li>
<li>Archive</li>
<li>Contact</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
and in the css I have
.horizMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu
{
text-align:center;
margin-bottom:10px;
letter-spacing:7px;
}
#menu a
{
color:red;
}
#menu a:hover
{
color:blue;
font-weight:bold;
}
Everything works pretty well, except that when I mouse over the links, the color changes and it becomes bold, which is what i want, but it also causes all of the other li elements to move slightly and then move back when you mouse-off. Is there an easy way to stop this from happening?
Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.
However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.
Add a width to the list item elements which is bigger than the bolded width of the items, this way they wont be pushed out of line.
#menu li
{
width: 150px;
}
Alternatively you could try a monospace font, which wont be affected by the bold/unbold on hover.
try using this
menutext {
line-height: 10px; /* or whatever */
}
and also, to set the width of a inline element, use display: inline-block;
float:left might be not so friendly, if you do use it and it messes things up use clear:both
I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.
a:hover {
color:blue;
text-shadow:0px 0px 1px blue;
}
The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.
I'd say this is better than dealing with width-dynamic texts.