I'm learning CSS, and trying to make a default rule:
* {
margin: 0px;
padding: 0px;
}
It's not working, and I don't know why... can you please point me in the right direction?
Its certainly because your body has padding of 50px; which overwrites the rule of html as far your page's body is concerned.
Edit :
body
{
margin : 0px;
padding : 0px;
}
hope you problem is solved now.. :)
Add first you should include a normalize stylesheet. The different browsers have different default styles and this stylesheet will bring one standard to all browsers.
http://necolas.github.io/normalize.css/
I think this will help you ;)
body {
margin: 0px !important;
padding: 0px !important;
}
On CSS part don't use html comment. Thats reason, why doesn't work your css part.
LIke this please write margin and padding in body tag
you have used padding:50px; in your body tag please remove padding,thats * not working properly
DEMO
body{
margin:0;
padding:0;}
here both of working please check demo
*{
margin:0;
padding:0;}
Your are using unordered list to create menu.
by default, It has those intend properties, you can override by using below code, which is not advised.
*{
margin : 0px;
padding : 0px;
}
Demo 1 & Demo 2
Also change background-color : ABC; to background-color : #ABC;
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.
When we are creating a web page using bootstrap we can set margins. But web browser also gets some margins. Although code as div(class="container-fluid") or code as margin:0; and padding:0; based on the container in the CSS file, I couldn't solve the problem. Can you help me?
Some browsers have a margin on the body tag. Set that to 0 somewhere in your css.
body {
margin: 0;
}
This is Browser default margin for body:
Fix It Like this:
body {
margin:0;
}
Set the margin to zero on any element is simple just type something like
body{
margin:0
}
Although sometimes bootstrap has his own margin rules included like setting margin on h tags, you could remove them as well by using more specific rules (read about specificity here) or by using important
h4{
margin: 0 !important
}
The reason for that is browsers have default styling for elements.
To reset margin only on body element you can use:
body {
margin: 0;
}
To reset all styling (which is not so-bad thing) in all browsers you can use css library called normalize.css.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
This library is used by big companies as GitHub, Twitter, Soundcloud, Guardian, Medium and many others.
Although you put container-fluid, sometimes it doesn't make the width 100% fit the screen because browsers make a default margin and padding.To make it fit the screen you have to do like this.
body{
padding: 0;
margin: 0;
}
If it doesn't work make them important as following.
body{
padding: 0 !important;
margin: 0 !important;
}
I am new to CSS. I am observing a strange CSS behaviour where an element has the below CSS property
.container .header{
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
When the page loads on Mozilla and chrome, the top property is not applied but inspecting the firebug shows the property. When I edit in firebug just by 1px, the elements gets properly aligned and even if I set the top value to 21% after that, the position is correct. Only on load the CSS property is not applied. Can you please let me know where I am going wrong?
It's because you are calculating the top value in percentages and to make that happen, you need a declared height for it's parent i.e. container.
.container, body, html {
height:100%;
}
Add the rule above and see it working. FIDDLE HERE
NOTE - body and html also need their height declared(either in percentages or pixels) too as container's parent is body and like so.
I know exactly what it is now. Its your style class names themselves. After much testing I have discovered:
.container, .header {
color:#ffffff;
font-size:2em;
font-weight:bold;
padding:5px;
position:absolute;
text-align:center;
top:21%;
}
Notice what's after the .container? A COMMA. You need a Comma after every class name that inherits those same attributes! Hope this helped!
I have this simple fiddle
Here's a screenshot from Chrome Canary:
What am trying to do is adding the following code
.player .controls button.play {
width: 40px !important;
height: 40px !important;
border-radius: 100% !important;
background-color: rgba(23,35,34,.75) !important;
}
but that doesn't work for, any help will be thankful.
Cheers
It has border-radius and background-color. but you can change it. here is the class:
.player .rounded-box {
background: rgba(23,35,34,.75);
border-radius: .5em;
}
note: this is in iframe so, you need to have the style sheet file.
Well after searching I've found the following:
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
So no luck, thanks for your time.
for some unknown reason, my navigation bar is shifted over to the right, on Firefox and also on Chrome. See http://i.stack.imgur.com/dskZy.png
And what's weird is that the issue doesn't arise on jsfiddle. See http://jsfiddle.net/bMAGX/
Any ideas? Thanks.
Are you using a CSS Reset? I'm guessing not. You should consider using one to help with issues like this.
I think you need this CSS to remove the default ul margin/padding:
#topmenu ul {
margin: 0;
padding: 0
}
Perhaps because your DOCTYPE is malformed.
<!DOCTYPE html> should be one of the types defined here.
You can add this to top of your CSS:
* { padding: 0; margin: 0;}