I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
Related
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I have a problem when I am trying to include jQuery Notebook plugin into my twitter bootstrap page. The problem is that CSS of the plugin became messed up. For example on this fiddle if you will select text, you see that controls are not on the right places.
But if you will remove bootstrap CSS - everything is ok.
Looking at jQuery notebook css, I can see that all of the classes use
.jquery-notebook ....{
}
So it is highly unlikely that they overwrite any of twitter's styles. How can I fix the styles here?
If out of a sudden in 5 years the jsfiddle will disappear, you can still find the code here:
<link rel="stylesheet" href="css/jquery.notebook.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="my-editor">
Here is my text
</div>
<script>
$(document).ready(function(){
$('.my-editor').notebook();
});
</script>
<script src="js/libs/jquery-1.11.0.min.js"></script>
<script src="js/libs/jquery.notebook.js"></script>
The reason is Bootstrap override ul margin property. so you can use bootstrap with jquery notebook plugin you just change small modification to solve this problem,
jquery.notebook.css
Old style (line number 74)
.jquery-notebook.bubble ul {
padding: 0;
margin: 0;
list-style: none;
}
new style
.jquery-notebook.bubble ul {
padding: 0;
margin: -20px 0; // Add top margin -20px
list-style: none;
}
The bootstrap adds a margin top and bottom to the elements with class names h1 and h2. Try making the margins zero for these two elements in your css.
.h1,.h2{
margin:0;
}
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
I want to load a css code from a specific stylesheet first,
Like:
ul, ol {
margin: 0 0 10px 25px;
padding: 0;
}
the above code is in two files: core.css and bootstrap.css
core.css load first in head tag.
But browser always use code first from bootstrap.css.
I tried to rename bootstrap.css to z-bootstrap.css.
But no luck still browser apply styles from z-bootstrap.css
It work when I edit ul, ol to body ul, body ol in core.css
But I dont want to do this, How to apply styles from core.css without adding any class or attribute.???
In your declaration, have core.css below/after bootstrap.css
example:
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="core.css">
The order of css application does not always depend on the include order, but on the level of specificity:
http://www.w3.org/TR/CSS21/cascade.html#specificity
You need to load core.css after bootstrap.css in order for the rules in core to override bootstrap.
Try to put !important at the end
ul, ol {
margin: 0 0 10px 25px !important;
padding: 0 !important;
}
That will give priority
The following selector is declared in external stylesheet
p:first-letter
{
color: red;
}
But it doesn't make the first letter in <p> element turn red. It does work when this is declared in internal css.
Yes it can.
What you wrote should work just fine; are you sure you are linking to the external stylesheet correctly?
This works perfectly fine for me in Firefox 3.6.x:
external-selector.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="external-selector.css" type="text/css">
<style type="text/css">
p { color: blue; }
</style>
</head>
<body>
<p>Paragraph!</p>
</body>
</html>
external-selector.css
p:first-letter {
color: red;
}
output
I had this problem as well, and after over an hour of messing with Firefox I figured out that it's the InvisibleHand addon that is causing this problem for me. When I disabled it, the problem went away.
I have emailed their info email address asking them to fix the bug.
it seems any other CSS is conflicting.
try if it work
p:first-letter
{
color: red !important;
}
I had the same problem described here. I knew the external stylesheet was being applied because I could see other styles being applied. After reading Heptite's answer I decided I'd try updating Firefox. This fixed the problem.
So, perhaps this was a bug that got fixed in the latest Firefox (v39.0)