how to use Firefox inspector
I am using Firefox inspector to debug my style sheets. I have the Rules tab open in right sidebar. If I highlight a line of html then sidebar shows all style rules that apply to the highlighted element. Some of the style sheets I recognise as mine but also there is an entry tagged
(user agent) html.css
with a rule I don't recognise (and is messing up my page layout by adding a left margin). The page layout displays incorrectly not only in Firefox but also in another browser (Safari). Where might this extra rule come from and how can I eliminate it?
Help would be much appreciated, thanks.
- Malcolm
Solution eye eponami
html.css is one of the default style sheets that are added via the DOCTYPE setting.
- resource://gre-resources/html.css
All Replies (5)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0
The above is your user agent information since did not share is all the info.
Do you have a local file of that name html.css ? Have you searched ? Did something get enabled in settings ?
Solution eye oponami
html.css is one of the default style sheets that are added via the DOCTYPE setting.
- resource://gre-resources/html.css
Thanks to Pkshadow and cor-el for their comments.
No I don't have a local html.css file and my settings are not the problem. The element that was giving trouble was <figure> and last night I woke up realising that my problem was that I didn't have a <figure> entry in my reset.css file, setting all margins to zero.
cor-el's information is interesting. I was not aware of this resource and it does indeed contain the style rule that was corrupting my layout. So this file contains a browser's default style information?
Yes, some user agent sheets are loaded by default and some are loaded in special cases.
See also:
Hi cor-el, thank you for this useful information on a topic I knew nothing about before. - Malcolm