0

Chr

Its a simple unordered list, which im working on, cant expose much of the work but im using Material UI for this list.

Now, the problem 

(user agent) html.css

has a css written with 

padding-inline-start: 40px

but its not applied to the ul element. Though when i input this in "element", it work perfectly.

My research on this has led to to know that every browser has its own css written which is known as 

user agent stylesheet

Dont know what is happening here, but yes development is becoming a mess. If anyone knows the answer, thanks in advance.

kshitiz saini
  • 165
  • 1
  • 9

1 Answers1

0

According to this thread, the user agent stylesheet is overridden by any custom stylesheets that you enter:

User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.

The Material stylesheet that you are using probable overrides the default value of padding-inline-start. The reason it changes when you input it in "element" is because you are changing the page after all the other CSS has been applied. You might try adding a style element at the bottom of your CSS that sets the property how you want it.

sugarfi
  • 127
  • 1
  • 11
  • if it had been overridden it shoud have been dashed. hadnt it ? – kshitiz saini Jun 03 '20 at 22:29
  • In the second screenshot, it looks like it is not dashed because you added it explicity in `element`. – sugarfi Jun 03 '20 at 22:33
  • yes, i agree but see in the first screenshot, when its not added to the "element" then its not dashed. when its added to the element, then it becomes dashed in html.css ..(refer to second ss) The qs here is why its not working , why i need to add it explicitly knowing it will increase my code size (it matters on salesforce), knowing its already written. – kshitiz saini Jun 03 '20 at 22:51
  • sorry i dont have the code on any of the jsfiddle or codepen – kshitiz saini Jun 04 '20 at 14:48