I am facing an issue with my custom unordered list which uses a unique bullet symbol (>>) instead of the regular Disc Bullets. The list displays correctly on Firefox, but on Safari the bullets default to simple Disc Bullets. I have tried adjusting the CSS styling but it doesn't seem to work. Can someone help me understand what I did wrong?
ul {
list-style-type: '>>';
padding-left: 0;
list-style-position: inside;
}
li {
padding-left: 0.5em;
}
May I ask which version of Safari you have? It appears that the list-style-type: <string> property is not compatible with Safari versions 3.1 to 14.
Unfortunately, Safari does not support pseudo-elementally inserted bullet points or similar markers.
Check out this link for more information
HTML
<div class="homeblurb-cont">
<div class="homeblurb">
<h2 class="welcome">We Offer Fast Laundry Services!</h2>
<ul class="bullets">
<li class="red-alert">Open During Covid Crisis</li>
<li>Express Laundry in 2 Hours</li>
<li>24-Hour Dry Cleaning Service</li>
<li>Affordable Shirt Wash/Dry-Clean at €4</li>
<li>Bedding & Coverings Washing</li>
<li>Duvet Cleaning (Synthetic/Feather)</li>
<li>Professional Leather & Suede Cleaning</li>
<li>Specialized Hospital/Care Home Service</li>
<li><span class="quality">Assured Quality</span> of Service</li>
</ul>
</div>
</div>
CSS
.homeblurb-cont {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
align-content: center;
width: auto;
margin: 30px auto;
background-color: rgba(240, 221, 179, 1.0);
}
@media screen and (min-width: 750px) {
.homeblurb-cont {
width: 25%;
min-width: 250px;
justify-content: center;
}
}
.homeblurb {
}
.welcome {
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
font-size: 1.4rem;
}
@media screen and (min-width: 200px) {
.welcome {
font-size: clamp(1.6rem, 8vw, 2.6rem);
}
}
@media screen and (min-width: 400px) {
.welcome {
font-size: 2.6rem;
}
}
@media screen and (min-width: 750px) {
.welcome {
margin-top: 0;
margin-bottom: 2em;
}
}
.bullets {
margin: 0 auto;
text-align: left;
list-style-type: none;
width: auto;
}
.bullets li {
font-size: clamp(1.1rem, 5vw, 1.4rem);
line-height: 2.5;
padding-left: 1em;
width: auto;
}
@media screen and (min-width: 400px) {
.bullets li {
font-size: 1.4rem;
}
}
@media screen and (min-width: 750px) {
.bullets {
margin-right: 0px;
}
}
.bullets li:not(.red-alert)::marker {
content: "\25CF";
font-size: 5vw;
}
@media screen and (min-width: 250px) {
.bullets li:not(.red-alert)::marker {
font-size: 1.3rem;
}
}
@media screen and (min-width: 400px) {
.bullets li:not(.red-alert)::marker {
margin-right: 25px;
font-size: 1.5rem;
}
}
.red-alert {
color: red;
font-weight: 700;
}
@keyframes heartpulse {
from { color: var(--magnolia); }
to { color: red; }
}
.bullets li.red-alert::marker {
content: "\2665";
margin-right: 5px;
font-size: 5vw;
animation-name: heartpulse;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@media screen and (min-width: 250px) {
.bullets li.red-alert::marker {
margin-right: 15px;
font-size: 1.3rem;
}
}
@media screen and (min-width: 400px) {
.bullets li.red-alert::marker {
margin-right: 20px;
font-size: 1.8rem;
}
}
I'm facing an issue with Material-UI styled components and could use some assistance. My goal is to create a BottomNavigation bar in React using Material-UI v5 where the selected option's icon displays in red (#f00) while the unselected icons sho ...
Whenever I include a link in my sidenav, it triggers a change where the sidenav’s background color switches to the main background color, forming a box shape around the linked text.https://i.sstatic.net/P0AU2.png I’m aiming to eliminate the grey backd ...
When I try to use a single button to toggle all accordion-elements, some of which are already open, the toggle functionality acts strangely. If I use this code snippet: $('.corearea-wrapper .corearea-link').click(function(e) { e.preventDefau ...
I have a JSON array structured like this: [ { id: "001", name: "apple", category: "fruit", color: "red" }, { id: "002", name: "melon", category: "fruit", color: "green" }, ...
Check out the fiddle link here: http://jsfiddle.net/br24p3Lr/ I've been attempting to perfect the animation when transitioning to a new active slide. Despite trying various approaches to resolve this issue, I seem to be stuck at the moment. The foll ...
Struggling to make the flex: column work properly so child elements do not exceed the parent container. The image on the left needs to take up 100% of the container's height: .container { width: 500px; height: 300px; border: solid blue 1px; ...
I'm currently working on a website and running into a small issue. The main page has a background with a white body in the center, containing padding for the text to prevent it from being right at the border. #content { width: 900px; overflow: h ...
I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...
On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...
I've been attempting to automatically select an option in a dropdown menu, but for some reason it's not displaying the dropdown and instead showing "Nothing Selected" as the title. I tried using opt.setAttribute("selected", "selected"); in my cod ...
Is there a way to display data from the table "school_minat" as checkboxes in a checklist by looping through the table "dayaminat"? I have attempted this, however, only one checkbox is displayed. Even though there are 4 data entries with minat_id values ...
I'm trying to ensure the comments div is the same height as the image above so they can be aligned side by side. Below is my current code: <div class="main_image_wrapper"> <img class="main_image" src="*dynamic generated image*" style="ma ...
Below is a code snippet showcasing the table pagination elements and styles I'm using. The layout looks great on medium and larger screens, but when viewed on smaller screens, the pagination elements wrap to the next line while the counts remain float ...
Is there a simple way to convert a string to HTML? I am attempting to convert a string containing valid HTML, href links, and line breaks. Currently, I am utilizing the DOMParser().parseFromString method as outlined on https://developer.mozilla.org/en-US ...
I am looking to modify the th and td values in my HTML code. Specifically, I want to align numbers to the right (except for s.no) and text to the left. <button type="submit" class="btn btn-raised btn-primary mr-5" (click)="productPrintSection(&apos ...
I am attempting to create a pop-up window using HTML, but I'm struggling to get it to appear in the desired way. My goal is this: to have a pop-up show up when the profile image is clicked on. Here's the HTML <span class="profile"><im ...
I have encountered an issue where a user can successfully submit an event to a calendar, but I am facing difficulty redirecting them back to the original page. I attempted to use the following code snippet: header("Location: http://localhost/Project/Vie ...
Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...
I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...
I'm attempting to ensure that this div displays the correct height (without manually specifying a fixed number like 75px). Here's how I want it to appear: ------------------------------------------ | something | something else | --- ...