The issue with CSS classes and IDs not being applied to unordered lists has been encountered

Need help with modifying specific lists using class or id, but running into issues. Here's a code snippet to illustrate the problem:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul#square { list-style: square;}
    ul.square { list-style: square;}
    </style>
    </head>

    <body>
    <ul id="square">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ul style="square">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    </body>
    </html>

Looking for any solutions!

Answer №1

<!DOCTYPE html>
<html>
<head>
<style>
ul#square { list-style: square;}
ul.square { list-style: square;}
</style>
</head>

<body>
<ul id="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
<ul class="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
</body>
</html>

Check out the JSFiddle Demo here: http://jsfiddle.net/bD9nC/

Answer №2

Try it out!

<ul id="rectangle">
    <li>Milk</li>
    <li>Water</li>
    <li>Orange Juice</li>
</ul>
<ul class="rectangle"> /* This is not a style, it's the class name */
    <li>Milk</li>
    <li>Water</li>
    <li>Orange Juice</li>
</ul>

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

Capture video frames from a webcam using HTML and implement them in OPENCV with Python

While many may find it simple, I am facing a challenge in extracting video frames from HTML or JavaScript and utilizing them in my Python OPENCV project. I have a strong background in Python OPENCV and Deeplearning, but lack knowledge in HTML and JavaScr ...

What is the best way to begin an ordered list from the number 2 instead of 1, while ensuring W3C validity and compatibility with

Is it possible to start an ordered list from 2 instead of 1? I need the solution to be compatible with all browsers, including IE6, and ensure that the HTML and CSS are valid. ...

Arranging ul tags in divs horizontally side by side

I am attempting to create a <div> that contains several <ul> lists, but I seem to be having trouble getting it to work correctly. In essence, I'm trying to achieve something similar to this: https://i.sstatic.net/ZIADB.png This is my cod ...

Setting a minimum height for bars on a graph can be achieved by adjusting the

I need assistance with my graph display. Currently, the graphs are not showing when the value is less than a certain point. I would like to set a minimum height so that they can be displayed regardless of the value. My graphs are being generated using cha ...

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

Warning displayed on form input still allows submission

How can I prevent users from inserting certain words in a form on my website? Even though my code detects these words and displays a popup message, the form still submits the data once the user acknowledges the message. The strange behavior has me puzzled. ...

Combine the points of individual letters in Scrabble using jQuery

Hello, I'm currently working on creating a Scrabble game. My goal is to assign a value to each letter and then calculate the sum of these values when the input box changes. After some research, I was able to find information on how to add numbers on ...

Located just above the edge of the screen with absolute positioning

One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear aft ...

How can I prevent a span in CSS from stretching its parent element?

Utilizing the twitter bootstrap thumbnails successfully, we have implemented a description feature inspired by the bootstrap documentation. The distinction lies in our decision not to specify a size (e.g., .span4) for our thumbnails; instead, the content d ...

Angular forms not recognizing is-invalid class functionality

I was trying to learn angular forms, and I noticed that when I applied the is-invalid class to an input tag, the border color did not change to red. Can anyone explain why this is happening? <div class="container-fluid"> <h1> ...

Managing iframe scrolling using the parent window's scrollbar

I am currently working on an iframe to be utilized across various domains. The functionality of this iframe involves displaying a data list that updates when the bottom of the scroll is reached. An issue I encountered is that the parent window, where the ...

Applying a Webkit Scroll Bar to a specific element on the webpage

I've been attempting to apply the Scroll Bar webkit styling to a particular element but haven't had any success. Despite searching extensively, I have come across 2 threads on Stack Overflow that do not provide a solution. Most of the available ...

What is the best way to create a table row when there is no data available?

<?php include "db.php"; if ($_SERVER["REQUEST_METHOD"] == "POST") { $search_date = $_POST['search']; } $show_result = mysqli_query($con, "SELECT * FROM data_input where input_date = '$search_date' "); ...

The alignment of columns in Bootstrap 4 no longer follows the horizontal pattern seen in Bootstrap 3

After migrating to Bootstrap 4, I noticed that my columns are all vertically aligned. I have updated the boostrap-min.css from version 3 to 4 and double-checked the code for any errors, but everything seems correct. To further troubleshoot, I used a JS fi ...

Show or hide comment sections using jQuery on a single webpage

Currently, I have implemented a script to toggle the visibility of comments on several WordPress-based websites. The script works well on most sites, but I am facing an issue with a site using the Hero theme. On the index pages, the theme displays content ...

When the user hits the enter key, automatically submit a form without the need for

Is it possible to submit a form on enter using type="button"? Here are my input fields: <input type="text" id = "login-user" class="form-control log-input" placeholder="Username" required="required"> <input type="password" id="login-password" clas ...

Establishing limits for a division using keyboard commands

Alright, I've decided to remove my code from this post and instead provide a link for you to view it all here: (please disregard any SQL errors) If you click on a Grid-Node, the character will move to that position with boundaries enabled. Draggi ...

Stop a hyperlink from displaying with CSS

I have a widget that includes the following default line of code. <a href="javascript:map_Location.clearFeatures()">Delete all Features</a> However, I do not want this hyperlink to be visible. Initially, I attempted to apply the style - id_ ...

Spin and shift image of a ball using Html 5

Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10. Here is the script I am using: var ball = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas&apos ...

After performing an action with Redux, the error message ""Cannot access properties of 'undefined'" is displayed

I am currently developing a Shopping List App using React/Redux. I am facing issues with removing items from a list. When I trigger the 'removeItem' action, the page no longer recognizes the object that represents the list (which was originally s ...