I know there's a few CSS Reset tools out there, Eric's and Yahoo's to name 2.
However, when I'm using certain tags (I think they're called tags?) such as "li" and "ul", I get some extras in the User Agent Stylesheet. Some of these are:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
I'm wondering if there's a reset stylesheet out there that deals -webkit etc?
I have searched for one, but with now luck.
While these styles are applied by Webkit, they are over-ruled by margin: 0; padding: 0; located in the CSS resets. You don't have to worry about them.
Note: Although Chrome (Version 27.0.1453.116 m) Developer Tools does not display the user agent styles with strikethrough, the computed styles do reflect that explicit margin and padding values override.
Acctually if you are working with
<ul> in your markup the
reset margin: 0, padding: 0; do not overwrite the -webkit-padding-start: 40px;
I solved the problem by adding to my reset file a
ul {
-webkit-padding-start: 0px;
}
I had the same problem with li and ul, and found the following solution: in my CSS, I had an attribute for the li of my list which was display: inline. I replaced it with float: left and it works. I don't know why...
If user agent stylesheet is being called, it is because the property that is called for / needed was not properly defined in your css stylesheet.
Error check your CSS using a tool like CSS Lint and fix any problems that might be detected before trying workarounds.
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have a link that is being applied to the logo in my sites header https://dev.theartofsongs.com/about. The problem i'm having is that the link has padding to the right of it that's pushing the logo off centre.
I've changed the padding in the CSS and although I can see that the style has been applied in the developer tools, it's ignoring the value I've put in the CSS.
CSS File
#masthead .custom-logo-link {
padding-right: 0em;
}
Rendered HTML
#masthead .custom-logo-link {
padding-right: 2em;
}
I don't understand why if it's applying the style it's ignoring the padding value
Edit: Just to update people on why this code wasn't working in case anyone else has this feature on their server.
The code I had put in my CSS file was actually correct. I came back and refreshed the page, several hours after i'd uploaded my code via ftp. Suddenly my code was working, even after I'd previously emptied my browser cache (I had cache turned off in developer tools anyway).
I couldn't work out why this was happening but this morning realised my server had a SuperCacher feature turned on. Essentially the server wasn't using the uploaded file but file previously cached. I've turned off the feature for my development site now and haven't had anymore problems.
If anyone is having a similar problems check you don't have a similar feature on your server.
It is because #masthead .site-branding .custom-logo-link has more specificity than the selector you have used in your css file. Try to use important
#masthead .custom-logo-link {
padding-right: 0em !important;
}
or use this way.
#masthead .site-branding .custom-logo-link {
padding-right: 0em;
}
Because your another style has a higher specificity.
#masthead .site-branding .custom-logo-link {
padding: 1em 0em;
}
You can change the specificity with !important
#masthead .custom-logo-link {
padding-right: 2em !important;
}
For the calculation of specificity, you can see the Specificity Document
Using Firebug, I finally (this has been an ongoing struggle) found the CSS that I need to edit to fix my sidebar spacing program. It's below:
#sidebar .widget {
margin-bottom: 45px;
position: relative;
}
What I want to do is edit the margin-bottom to be 5px instead of 45. However, I cannot seem to find this specific CSS anywhere. When I find it through Firebug, it's in a file called all.css, but I can only edit the style.css file through Wordpress.
I've tried changing it in the custom CSS, but that doesn't fix anything. Can someone please help me? I know nothing about CSS, and I was so excited to finally figure out what I need to change, and now I can't change it!
Check in the <head> section, if the style.css is loaded after the all.css. If not, you must provide a CSS rule that will be more precise than the one from all.css, e.g.
#sidebar div.widget {
margin-bottom: 5px;
position: relative;
}
(if the .widget is a div, of course)
Is this valid CSS for browser reset? What does it do? I have been using this for a long time.
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; overflow:hidden; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
This is a version of Eric Meyer's CSS reset. You can read about it here:
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on.
And here's a history of why and how it came to life: http://sixrevisions.com/css/the-history-of-css-resets/
Yes, it's a type of CSS reset. It basically resets all the default spacing to zero and all the default alignments to left-top, as well as resetting the font sizes and weights of all the headers. The purpose of CSS resets is to make the website look consistent across all browsers.
I don't really like extensive CSS resets, though. Here's mine:
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
table {
border-collapse: collapse;
}
It works fine.
I had a problem to use it with bootstrap wysihtml5 library.
In fact when I try to use italic o bold style, it didnt work.
To make it works I had to delete tag "i" and "b" from this file.
I'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.