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.
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.
Consider the following CSS stylesheet:
#start_experiment_button
{
display: inline-block;
color: black;
border: 3px outset gray;
background-color: #CCCCCC;
padding: 8px;
text-decoration: none;
font-family: Arial, Helvetica;
font-weight: bold;
}
#start_experiment_button:hover
{
border: 3px inset gray;
}
#start_experiment_button:active
{
border: 3px inset gray;
}
#start_experiment_button
{
display: none;
}
Notice that the display property of #start_experiment_button is defined twice. Does this serve a purpose? Does the second definition simply over-ride the first, such that the first need not have been written at all? Or do the intervening definitions for hover and active somehow influence when the two display values take effect?
The last rule
#start_experiment_button {
display: none;
}
overrides the first one. Hence the element is not shown at all. Because the element is invisible both :hover and :active are not applied.
Note that as more specific the selector as higher priority the rule has. So if the element was visible the rules defined by the selectors #start_experiment_button:hover and #start_experiment_button:active would have higher priority then the rule defined by #start_experiment_button.
Does the second definition simply over-ride the first, such that the first need not have been written at all?
Yes, and only for the display property. The other properties are unaffected.
Or do the intervening definitions for hover and active somehow influence when the two display values take effect?
No, they don't, because neither of those rules have their own display declarations, and even if they did, those states would be impossible to reach because the element is never rendered.
It's not clear why that last rule exists and why it appears in that spot unguarded by either a media query or a more qualified selector, because with its display: none declaration, it makes all the other three rules redundant by preventing the element from ever being rendered.
Yes it will override..
#start_experiment_button
{
display: none;
}
This code will override your first code, as the code reads from first line to the last while its executed.. hope you got your answer..
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/
I want to remove the border on code while using google-code-prettify. I tried the following but got no result.
pre.prettyprint {
border: none;
}
I also tried to remove borders on all pre tags, same no result.
pre {
border: none;
}
I think you need to tell the browser which set of style instructions it should listen to.
The !important property should tell te browser you you want your css to take precedent.
pre.prettyprint {
border: none !important;
}
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 */
}