CODEWITHSUNDEEP
htmlcssuser-agent
Ali
Ali

Reputation: 6958

how to override user agent CSS

I want to have an unordered list without bullet next to it's items. I founded CSS property list-style-type and I set it to none. when I put this in html element it works fine:

<ul style="list-style-type: none;">
    <li> item1 </li>
    <li> item2 </li>
</ul>

But when I put it in a seprate CSS file, it does not work because of a user agent property list-style-type: disk;

I try to override it using !important but again it is not overridden. this is an image of google chrome inspect element which shows the user agent rule is stroked, but the computed value for this property is the user agent value!

enter image description here

Update: the css file is linked correctly. I add another image which shows the user agent property is stroked, but it is still used as the final value:

enter image description here

Upvotes: 0

Views: 3184

Answers (3)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

From the looks of it, you are trying to apply the list-style-type property to a span-element, according to this selector span.form-error. That property is not valid for a span element, but should be applied directly to the ul in your case.

As an experiment, you could add this rule to your CSS-file, to see that this is the actual problem:

ul { list-style-type: none; }

If that works, then you could make your rule more specific by adding a class to your ul, and use that class for your css-selector.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

Is your stylesheet actually included on your page through the link element?

<head>
    <link rel="stylesheet" href="MyStylesheet.css" type="text/css">
</head>

User agent stylesheets should never take precedence over your site's stylesheets. Furthermore, !important, as suggested by the other answer here, is bad practice and wouldn't be at all necessary here.

Edit: The other answer I referenced above was removed. The newer answer suggests using a "style reset" but that really wouldn't be required for this - you already know which property you're trying to override.

Upvotes: 1

Jefferson
Jefferson

Reputation: 991

Even without !important the CSS should override the user agent. This problem is probably caused by not linking to your CSS properly in your HTML.

Also check out this style reset. Including this in your documents will reduce browser inconsistencies.

Upvotes: 1

Related Questions