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).
Related
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'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>
I have written a piece of code:
<p>
Example:
</p>
<ol>
<li>Text 1</li>
<li>Text 2</li>
</ol>
This need to set my text vertical under each other
But it gives me the output that my text is written over each other so not vertical under each other but just on one line.
I need it like this:
<p>
Example:
</p>
<ol>
<li>Text 1</li>
<li>Text 2</li>
</ol>
And now it is like this:
This could have been a comment. But I thought I could guide you and explain more.
The question contains only the HTML Markup, where the issue doesn't occur. It is perfectly fine. The issue lies with the CSS, which is the presentational style. So, it is something to do with the CSS.
What I feel from your screenshot is, there might be a CSS with a rule:
* {line-height: 0;}
This might have been given as a mistake, or because of something, it is getting over-ridden. You need to reset these values by either:
Using a CSS Reset - Eric Meyer, Simple Reset, or YUI Reset.
If it is a Simple Reset, you can just give this rule:
* {margin: 0; padding: 0; line-height: 1.2em;}
The line-height is for your particular case.
And make sure, you put your custom CSS at the end, so that it is effective and over-rides all the other styles.
Hope you get it done.
try using:
li {
float: none;
dispaly: block;
clear: both;
}
if this is the html:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
and this is the css:
ul li
{
margin-right:5px;
display:block;
float:left;
}
Is there a way to use :last-child so there is no margin-right on the last list item?
I tried
ul li:last-child
{
margin-right:0px;
}
and it didn't work. How would this pseudo-selector be used on a li element?
You have an error in your rule. It says ui but should be ul. And it should work fine.
Here's a jsFiddle example.
you misspelled your css
You have
ui li:last-child
and it should be
ul li:last-child
And your question is asking about margin-left, but your css is showing us margin-right
:last-child isn’t supported in:
IE 8 and below
Opera 9 and below
Safari 3 and below
http://www.browsersupport.net/CSS/:last-child
Are you using one of those browsers?
I have an ASP.NET application with contains a list of hyperlinks. After each hyperlink, there is a br tag that puts each hyperlink on their own line. I want to increase the spacing between each line. I don't want to add another br trag since that does not provide the control I am looking for. I have tried different CSS styling without any change. What CSS styling do I use to accomplish this?
For the hyperlinks you could use display:block; and margin-bottom:[some value] style/CSS properties, you wouldn't need to have your BR elements, and you would gain much more control.
You could add margin or padding to top of your BR tags eg.
br { margin:10px 0; }
If that isn't feasible, then make your hyperlinks block level and add margin or padding to top of them eg.
a { display:block; margin:10px 0; }
Using the latter method you don't require the BR tags anymore.
Remove the <br /> elements and instead give those anchor elements a display:block property.
Then use padding-top or padding-bottom or margin-top or margin-bottom to increase the space between.
i think what you are looking for is line-height:
http://www.w3.org/TR/WCAG20-TECHS/C21.html
even though this might be the better/'nicer' solution:
<ul id="mylinklist">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
and this style:
ul#mylinklist{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#mylinklist li{
margin-bottom: 10px;
}
use margin-top or margin-bottom
a{
margin-bottom: 1em;
}