Having difficulty deleting bullet points from a UL list that includes icons

Icons are listed here:

<ul class="keyfeatures">
    <li id="sleeps14">Sleeps 14</li>
    <li id="hottub">Outdoor Hot Tub</li>
    <li id="fire">Log Fire</li>
    <li id="terrace">South Facing Terrace</li>
    <li id="outdoorterrace">Outdoor Terrace</li>
    <li id="coffee">Bean to Cup Coffee Machine</li>
    <li id="wine">Honesty Bar</li>
    <li id="tv">Freeview TV</li>
    <li id="games">Games Console</li>
    <li id="ipod">iPod Dock</li>
    <li id="wifi">Free Wi-Fi</li>
</ul>

CSS

.keyfeatures li {list-style-type:none; vertical-align:top; margin-left:30px; list-style:none;}

ul #sleeps14 { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/bed.png'); }
ul #hottub { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/hottub.png'); }
ul #fire { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/fire.png'); }
ul #terrace { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/sun.png'); }
ul #outdoorterrace { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/lounger.png'); }
ul #coffee { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/beans.png'); }
ul #wine { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/wine.png'); }
ul #tv { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/tv.png'); }
ul #games { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/games.png'); }
ul #ipod { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/ipod.png'); }
ul #wifi { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/wifiicon2020.png'); }

I am attempting to remove the bullet points from the list and display only the icons by using list-style-type:none but it's getting overwritten. Any suggestions? Thanks, Warren

csslisticonshtml-lists

Answer №1

The CSS rule is being replaced by the one below:

ul li:after
{
    border-left: 3px solid #fe6500 !important;      
}

If you want this styling to be specific to a particular list, then make sure to target that list.

Answer №2

It's recommended to eliminate the CSS inline ul li:after declaration since it is conflicting with the styles in styles.css.

ul li:after {
    border-left: 3px solid #FE6500 !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the width of the header in Wordpress themes like Genesis and Foodie Pro

Struggling with the header appearance on my website. I want the blue section to be full width while keeping the logo and navigation the same width as the content area (1040px). I'm new to Wordpress and unsure how to make this adjustment. Someone sugg ...

csswordpress

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...

cssreactjsmaterial-uiinline-styles

What is the best way to eliminate the blue color from a Boostrap 5.3 accordion item when it is opened?

As shown in these two images, I am looking to remove the blue color and blue border when opened: https://i.sstatic.net/vOIna.png https://i.sstatic.net/7eLfK.png <div class="accordion-item"> ...

htmlcssbootstrap-5

Is there a way to implement a JavaScript function that can dynamically update the color scheme and background colors of all HTML pages within my website?

Looking for help on implementing a Javascript function that can modify the color schemes and background on all pages of my website. I tried using a function but it's only affecting one page. Can anyone offer guidance or suggestions? I'm finding t ...

javascripthtmlcssbackground-image

When adjusting the viewport size, CSS animated elements may shift unexpectedly in Firefox and Safari, while Chrome displays them correctly

This example demonstrates a simple code snippet: body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .container { animation: moves 5s ease 0s normal forwards; /* transform: trans ...

htmlcssfirefoxsafari

implementing a properly aligned nested button group with Bootstrap 4 framework

My button group control looks like this. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" ...

cssbootstrap-4flexboxbuttongroup

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Refine the table by selecting rows that contain a specific value in the href attribute of the <a> tag, and display the parent row when the child row

I've been working on filtering and searching the table below based on the href value. My code successfully filters the displayed columns in the table, but it fails to work when I search for a string within the href attribute. For instance, if I searc ...

javascripthtmljquerycss

Stop the dropdown from auto-closing upon clicking

How can I prevent everything from closing when I click on a dropdown inside another dropdown? I attempted to remove data-toggle="dropdown" but that was not the solution. Here is my code, <div class="dropdown"> <button class="btn btn-seconda ...

htmlcssbootstrap-4

Graphic aligned with textual content

Within my table cell resides text and an accompanying image icon. However, the presence of the image causes the text to shift downwards, not aligning in the center as desired: I am now seeking a solution that will allow the text to be centered within the ...

htmlcss

Tips for positioning the text and icon within a tag nestled in a paragraph tag?

Need help aligning text and icons inside paragraph tags on a tag. Here is the HTML code I'm currently using: <div class="application-intro"> <p><a class="btn" href=""><i clas ...

htmlcssbootstrap-4

The Vertical Navigation Bar with Bootstrap 4.1: A Unique Twist on Album Showcase

I'm currently utilizing the 'Album' example from Bootstrap 4.1 but struggling to display additional nav-items horizontally. https://i.sstatic.net/omeRC.png When I tried adding 'navbar-expand-lg', it arranged everything in a horiz ...

htmlcssbootstrap-4navbar

What is the reason that the CSS3 property name 'filter' is not recognized in Windows 8 applications?

I'm in the process of adapting my own codepen for a Windows 8 desktop app. Everything runs smoothly on Codepen, with the exception of some CSS adjustments from -webkit- to -ms-. However, I encountered an issue regarding this specific line in the CSS s ...

htmlcssvisual-studio-2012svgwindows-8

Jquery Toggle not applying class change on mobile devices

Check out my website: . There's a menu option called Services with a dropdown feature. Here is the code for it: <li class="dropdown menu-services"><a class="dropdown-toggle" href="#" data-toggle="dropdown" data-target="#">Services <b c ...

jquerycss

Resizing objects within a section to conform to the section's dimensions is not possible in CSS/HTML

I'm facing some challenges with responsiveness on my landing page. Utilizing the scrollify jQuery library, users can skip between different sections of the landing page on click or scroll. However, when switching to landscape orientation on mobile d ...

javascriptjqueryhtmlcss

There is a collision of boxes occurring within the CSS

Help Needed: Overlapping Boxes in Responsive Design I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I ...

htmlcsscss-position

My website appears distorted when the browser is zoomed out. What could be causing this issue?

Whenever I try to zoom out using Internet Explorer, the page doesn't zoom uniformly and ends up looking messy. Can someone please help me understand why this is happening? Here's how the page looks after zooming out (take a look at the three box ...

htmlcss

Dealing with a jQuery/JavaScript issue involving thumbnail images

I am facing an issue with smooth transitions between thumbnail images in HTML list tags. I have Jquery listeners set up for mouseenter and mouseleave events that update a parent image when a thumbnail is hovered over. The problem arises when scrolling fro ...

javascriptjquerycsspaddingmargin

Having trouble with CSS styling on my Rackspace Cloud static website - seeking assistance

My website was recently uploaded to Rackspace Cloud for hosting, but the CSS formatting is completely off. While everything looks fine on my local drive and when viewing the source code online, the link to the CSS file appears to be working properly. I h ...

htmlcssrackspace-cloud

Pure CSS text slideshow

I'm currently working on developing a text content slideshow using only CSS. Here is the HTML/CSS code I have: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow examp ...

htmlcssanimationslideshowcss-animations