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 equally distribute 5 li items of varying width as outlined via this method. It works fine in Chrome but FireFox and Safari shows the li elements broken onto several lines.
The li elements are those at the top of this page with the white text against the red background:
http://www.mountainwarehouse.com/?_vis_test_id=46&_vis_opt_random=0.35009177937172353&_vis_hash=c587be8bb0d54b248efca89ff9b8486a&_vis_opt_preview_combination=2
It appears that the universal style rules are conflicting with my code, specifically the line that sets the box-sizing:
*, *::after, *::before {
box-sizing: border-box;
}
So I've set an explicit box-sizing style on the banner with box-sizing: content-box !important; but it doesn't seem to override the universal style which is showing at the top in only FireFox and Safari:
The best way to achieve this on firefox is using flexbox.
I'll be quoting from the MDN docs but with edited code to suit your question.
From the link you provided this is the HTML structure (I'll be using it for this example):
<ul id="parent">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
</ul>
The CSS (don't forget the MDN docs I mentioned earlier):
#parent {
display: flex;
}
#parent li {
justify-content: center;
width: 100%
}
NOTE: You can use any of these: flex-start | flex-end | center | space-between | space-around
NB: Check Can I Use - Flexbox to see if this solution suits you. Eg it's IE 10+
I am using checkboxes and labels to build an accordian menu. I have it working on andriod devices and in the most browsers when it is resized but for some reason it isn't working on Safari on desktop or iOS devices. Last Friday it was working and now it isn't, even though I can't find anything that would conflict. Here's the necessary code.
HTML
<input type='checkbox' class='hide' name='custom_tailored' id='custom_tailored' />
<h1 class='dot-bor'><label for='custom_tailored'>Custom Solutions</label></h1>
<ul class='drawer'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
.drawer {
display: block;
height: auto;
max-height: 0;
overflow: hidden;
transition: all 500ms ease-in-out; /* plus vendor prefixes */
}
.hide:checked + .dot-bor + .drawer {
max-height: 2500px;
}
As I said... this code works without any problems on all of the browsers if they're resized down to the right media query, as well as on andriod. When I plug my iPhone up to the computer and look through the console I can find where the CSS is getting applied (the max-height changes) but in the computed section it still shows max-height: 0;
EDIT:
I didn't realize it until today, but this problem is on Safari for Desktop as well. The weirdest part is that I can see in the inspector the max-height is being applied but computed still says max-height: 0; but then if I uncheck max-height and then check it again in the inspector suddenly the style gets applied.
The issue can be seen at voicepad.com.mm-dev.net at a responsive browser size in safari.
This link pointed me down the road towards a possible answer to my problem. My code is "working" but because of a bug with webkit, it wouldn't work (previously) on any webkit browser. Now apparently this was fixed but I'm thinking the bug is still out there. So I decided to try to skip out on the adjacent sibling selector + and just use the general sibling selector ~ (which is what changed between last friday when it was working on iOS and now when it isn't). The problem (and why I originally switched to adjacent selectors) is that I have more than one of these on each page. To remedy that, I am using a general selector along with the :first-of-type pseudo class to make sure I only get the first element in the list. In this case it happened to have the .drawer. class.
tl;dr
input.hide:checked ~ label.trigger ~ .drawer:first-of-type,
input.hide:checked ~ .dot-bor ~ .drawer:first-of-type {
max-height: 2500px !important;
}
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;
}