I have simple unordered list in Bootstrap 4:
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
<li>line 5</li>
</ul>
with this custom CSS:
ul, ol {
padding-left: 1rem;
}
li {
margin-bottom: 1rem;
}
But they renders differently on Firefox and Safari
Firefox
Safari
I've noticed that Bootstrap uses ::marker pseudo element instead of ::before, can I change it so that is more compatible with Safari?
This may not be a Bootstrap problem. I found a few solutions that may work:
This could happen if the charset is not set right. Try to add #charset "UTF-8"; in the first line of your CSS code.
Developers often use reset CSS to reset default paddings and margins to reduce browser inconsistencies. You can find simple reset CSS here.
You could add custom bullet points with CSS by adding a list-style: none; to your ul element and then add a bullet with ::before on li element.
This may have something to do with a browser bug in Safari. I found one at https://getbootstrap.com/docs/3.4/browser-bugs/ that relates to rem units (WebKit bug #156684).
I'm trying to build an equal horizontal menu in CSS which is still supported in older browsers like IE9. (Yes, I know....)
Been testing in FF and Chrome with newer CSS3 techniques and working excellent! Tried in IE9, as we still need to support it.... and failed.
I searched around, and found some of these links which did the trick...
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
horizontal menu with auto width and same dimension of the tabs
...However if the number of menu items change you need to either change you CSS or cater for X number of menu items with multiple declarations...
Is there a simple one case covers all that will support IE9 and still be compatible with newer browsers without affecting them? (ie: special stylesheet for IE9)
Thanks.
If I understood your question correctly, you could make use of display: table and display: cell, as in:
.menu {
display: table;
padding: 0;
width: 100%;
}
.menu-item {
display: table-cell;
list-style: none;
margin: 0;
}
<ul class="menu">
<li class="menu-item">Option 1</li>
<li class="menu-item">Option 2</li>
<li class="menu-item">Option 3</li>
<li class="menu-item">Option 4</li>
</ul>
Please look at my snippet here:
http://jsfiddle.net/33fmA/
<div style="width:140px;border:1px solid blue;">
<ul>
<li>Item 1</li>
<li>Item 2 with more text</li>
<li>Item 3</li>
</ul>
</div>
i'm trying to css style a unordered list with a bullet image, the problem is that I can't set a fixed background-image height of 16px in order to get proper hovering.
that's why for list items with more than one line the bullet image looks ugly.
is there a solution without having to add extra elements and floating/styling?
thanks
Use :before pseudo here.. Now the issue with your solution is when you use sprites, you need an element to have fixed dimensions, using background-size will resize entire image, and NOT a particular part of the image.
So here, I create a virtual element using CSS :before pseudo, am assigning some fixed dimensions to that, also make sure that if you aren't using position: absolute; than make sure you declare display: inline-block; as :before pseudo generated content is inline by default.
li:before {
content: "";
position: absolute;
left: 0;
height: 16px;
width: 16px;
top: 1px;
background-image: /* Your base_64 junk */
}
Demo
Demo 2 (Hover the last li for an active bullet state)
That's why we some times use a separate icon tag like
<span class="icon-cog"></span>
or
<i class="icon-bullet"></i>
So that you can give the icon the size you need.
Then you can have lots of configurations using background size and position.
So I have a menu, 4 menu points and I want to put them in a square 2x2. Is there a way to do that WITHOUT having a class for the first two and one for the other ones?
Thanks for any help :)
UPDATE:
I did mess around a little more and I'm using the flex box structure, I'm sorry for not posting this information:
ul {
-webkit-box-orient: horizontal;
}
ul li {
-webkit-box-flex: 1;
height: 44%;
margin: 3%;
}
Sure. For one, you can use floating and set the widths accordingly. See the example below, or http://jsfiddle.net/BUPX7/ for a live example.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
ul {
width: 200px;
}
ul li {
width: 100px;
margin: 0;
padding: 0;
float: left;
}
There is a line break between div elements by default. You are apparently using some CSS to override that. You need to modify the CSS code accordingly, or select a different approach.
The simplest way, assuming ”menu points” are links, is to use
<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>
But if you are using some elaborated markup and wish to create the break in CSS alone, then you may need some elaborated selectors like :nth-child(3).
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;
}