All the browsers apply their own default styling to html elements. That leads to difference of views on different browsers. Is there any way to prevent browsers from doing this?
Yes you can, you need to use CSS Reset, this will generalize the styles, in other words it will reset the styles across the browsers.
Personally I don't use these, instead I use the snippet below which is more than enough for me.
* {
margin: 0;
padding: 0;
outline: 0;
}
If you want to stabilize more elements, you can make your own, like you can use the below to have pointer cursor when a user hovers any button or link on your website..Yes now that's pretty basic User Experience, than you can use
button, a, input[type=button], input[type=submit] {
cursor: pointer;
}
Or say don't underline the links and inherit the parent color, so I use
a {
text-decoration: none;
color: inherit;
}
This way you can make your own, I prefer this way.
Just a side note, when I go responsive, I change the * snippet to
* {
margin: 0;
padding: 0;
outline: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Note: Using Reset Stylesheet won't reset any inheritance, it will only
reset browser defaults(which won't help you always to make cross
browser websites) but will prevent loads of cross browsers issues commonly like padding, margin, line-height, base font etc.
You might want to look into Normalize.css. It;s used by a large number of frameworks and other reset boilerplates.
You can go for reset.css. This should be the first one to be applied to reset any browser specific style..
http://developer.yahoo.com/yui/reset/
Related
I'm trying to change the color of the background. However, the background stays white even if I remove the background-color keeps showing me that the background color is white. To make sure that I'm changing the background I opened the style file in the browser but it still shows "background-color: white".
My code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
After adding a background:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #000;
}
The code the browser shows:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: white;
}
Can someone explain why is this happening and how can I fix it.
Try applying the background-color to the body, and not to the * (Universal Selector). The Universal Selector will apply the background-color to every element on the page, which might be breaking things.
If that doesn't work, make sure the css is linked to the HTML properly.
Example of applying background-color to the body
body {
background-color: #333;
}
/* The above css applies a dark gray background color to the body */
If all of the above doesn't work, add your HTML and CSS so I can help further diagnose the problem.
Good luck!
It should provide the background-color:#000 as you have written. There is no problem in that. Try to write the same as in the <head>...</head> section. So that you confirm, whether the issue is not due to some external-css file you are adding.
Also, this issue seems awkward, as I too tried and the browser is able to map correctly whatever is written in the CSS file.
It doesn't matter if you are taking * selector or any other selector. It doesn't make sense, nor does it affect or overrides your CSS.
Been looking at a premium theme and see that for various text and elements on the page, when inspected - many have inherit and 0 for the values.
Why would these not be left blank if they are not required and automatically inherited from the parent? Does it perhaps save on load time?
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
This is done to override browser defaults.
Most browsers themselves apply their own style declarations to make basic HTML pages look prettier. Unfortunately these style declarations often clash with how a designer wants a web page to look. The way to overcome this is to reset the styles to what they should be by default.
Example
A good example of this is with heading and p tags. Take the following example:
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Without any custom styling applied, these elements use styles provided by the browser. One of the styles used here is margin, and that's what's putting the large gaps between each element.
We can reset these ourselves by setting the margin to 0:
* {
margin: 0;
}
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Because of the need to reset such styles public stylesheets like Normalize.css exist, whose intention is to do nothing more than reset (and normalize) all elements to look the same across different browsers.
Many CSS resets eliminate the <fieldset> tag's border, padding, and margin. I suppose this is to ensure they render uniformly across all browsers. However, fieldsets no longer visually separate groups of HTML (form) elements after the reset.
Two questions:
Do browsers actually render <fieldset> sans reset differently?
What is the best method of getting the 'bordered' look back after a CSS reset? Simply restyling it like this:
fieldset {
border: 1px solid silver;
margin: 2px;
padding: 7px;
}
Some images of what I am describing:
Without reset:
With reset:
The easy answer is: don't use a reset! They are unnecessary provided you have a clue what you're doing.
For instance, if you use a reset then you lose any native UI styles, such as, in this case, fieldsets. In IE, for instance, an unstyled fieldset will have a border with slightly-rounded corners, just like fieldsets in native programs. A reset removes that, and non-native UI sucks.
However, if you insist, just make sure that the styles are defined in the right order. The reset should be the absolute first thing, followed by "un-resets". See, it's redundant!
I had similar problem - what i did it i copied the style from Normalize.css stick this after the css reset
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
A fellow developer has set the following css rule, which must remain in place.
* {
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
This removes the border from SELECT and INPUT fields and makes them look less than ideal. If I remove the border style in firebug then the fields look normal again. Which css rules must I add to revert back to the default styles set by the browser?
Edit: these are the styles I'm trying to revert to (on my computer):
(source: 456bereastreet.com)
I think what your fellow developer was attempting to do was create his own reset (similar to Yahoo Reset, etc). But since he's declaring * instead of specific elements, it removes the border from everything.
You can work around this though and still get the browser's default border back on form elements by changing the * to your most common elements (sans form elements) - it's a bit ugly, but it does what you're looking for:
a,abbr,acronym,address,b,blockquote,body,br,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,i,img,label,legend,li,link,menu,ol,p,pre,small,span,strong,table,td,th,tr,u,ul
{
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
Add these:
select, input {
border: solid 1px; /* or whatever you want */
}
Unfortunately, you need to set the new values. There is no reset value.
If you want to add a border, set the new border style. Or remove the style you posted.
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/