I am getting this strange left margin in my tabs list.
I have not provided any margin. where does it come from ?
here is the screen. The incorrect area is marked in the red box.
Thanks
Unless you have explicitly removed it, that margin is coming from the user agent stylesheet used as the browser default.
If you want it to be removed, you may want to investigate CSS reset stylesheets.
This is because the Default Browser Stylesheet.
Try:
ul {
margin:0;
padding:0;
}
or more specific
#tabs_container ul.tabz {
margin:0;
padding:0;
}
or more generous
/* Basic Reset; remove margin and padding for every element */
* {
margin:0;
padding:0;
}
You should always use a css reset to get good results on all browsers.
For example:
http://meyerweb.com/eric/tools/css/reset/
Related
below these three code snippets which one would be the best one to implement in a style sheet ?
*{
box-sizing:border-box;
margin:0;
padding:0;
}
html,body
{
box-sizing:border-box;
margin:0;
padding:0;
}
html
{
box-sizing:border-box;
margin:0;
padding:0;
}
The asterisk selector * applies to all elements, not just the html/body element. You should avoid this, since you could be writing rules for a div later on and you wouldn't be able to give it any margin or padding (or change its box-sizing)! Use either the 2nd or 3rd snippet depending on whether you want to give the body any margin or padding.
Browsers usually set different default styles for elements. Users can also override the defaults using custom stylesheets.
I often override these default styles using my own styles, e.g.:
* {padding:0; margin:0; }
However, I wish to respect the default stylesheet for certain element attributes, e.g. the <body>'s default padding and margin. I tried:
* { padding:0; margin:0; }
body { padding:default; margin:default; }
But it doesn't work. Neither does initial.
Is there a way to solve this problem by selecting all elements but excluding <body>?
Is there a way to solve this problem by selecting all elements but excluding <body>?
Since everything that is displayed in the viewport consists of <html>, <body> and <body>'s contents by default, you can just select html, and all of body's descendants:
html, body * { margin: 0; padding: 0; }
default doesn't work because there is no such keyword. initial doesn't work because the initial margins are 0. It is not possible to reset a property to its browser-given default value after you have changed it using CSS.
html, head, head *, body * { }
<html> and all descendants of <body>:
html, body * {padding:0;margin:0;}
Use the body * selector.
body *{padding:0;margin:0;}
Set them first to 0, then override the wanted values afterwards. You'd be better off using a CSS Reset though, but if you reall want to use the asterisk, this method will work.
* {
padding:0;
margin:0;
}
body, html {
padding: 10px;
}
http://meyerweb.com/eric/tools/css/reset/
I asked a question a few minutes ago and tried all of the suggestions. I still am having an issue getting this just right. I have found the block of css that is causing the issues and need a solution.
I have 2 files. The first file has all of the css that I used when I made the form. When I had the form looking the way I liked it, I put all of that relevant code into a different stylesheet. The new stylesheet is overriding some of my values and causing things to look bad.
This is what I want and is all I require.
#password #header td {
padding-top:90px;
vertical-align:top;
}
This however is the block of code that is making things break. I don't want any of this. Is there a way to override it? The line-height specifically is really making things look horrible. If I remove the line height attribute then other parts of my site break.
td, th {
color:#000000;
font-family:verdana,geneva,sans-serif;
font-size:12px;
line-height:17px;
margin:0;
padding:0;
}
You can override all the attributes in your general css declarations into your specific style and add !important to ensure it is followed, e.g. for line height you can use:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height: normal !important;
}
Try changing line-height to something a little smaller. Something like this (targeting specific problem elements):
#password #header td {
line-height:10px;
}
You can also specify normal to line-height:
#password #header td {
line-height:normal;
}
You can directly override it in the specific style, like this:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height:12px; /*Or whatever is relevant*/
}
Check out Firebug's CSS browser and calculator to see what is the "default" value.
I have this css:
fieldset li {
padding-bottom: 0em;
}
However, it wasn't behaving properly, and using firebug, I see that style has a line drawn through it, indicating it is being overridden. Is there a way in firebug to tell what is overriding a style?
In the style tab, this is all I see:
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
Default.CSS (line 42)
fieldset li {
padding-bottom:0;
}
Default.CSS (line 27)
Inherited fromol
fieldset ol {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
Default.CSS (line 23)
Inherited fromtable#ctl00_ContentPlaceHolder1_ScorecardEdit1_frmEdit
element.style {
border-collapse:collapse;
}
When I go to the computed tab, I see it has padding-bottom of 16px. How can I find out where this is coming from?
All the answers so far seem to imply I should see all the applied styles in the style tab (and I swear this is how it worked last time I used firebug), but this time I am not seeing all styles!
(I am running Firebug 1.5.2)
Solution
I'm an idiot. It was caused by this (which was staring me right in the face):
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
It was the em that threw me off. That's what you get when you copy / paste CSS from the web without understanding it.
They are sorted, so the most upper definition overrides the lower one(s).
What ever styles are above the crossed out styles are usually overriding it. If that is not the case, start clicking the disable style icons and see where the issue is.
If a CSS rule is overridden although it is the top-most rule of that property, look further down for a rule that has the !important override set.
Just locate the instance of that attribute name that isn't crossed out, that is the one overriding.
If you select the misbehaving item in question, it should give you a list of all the styles applied to it. The bottom should have the most specific styles. If you start at the fieldset li style, you should be able to scroll down until you see one that has overridden it.
I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.
After calling YUI, I call the stylesheet for the website and in there have a block for UL:
ul {list-style-type: disc;}
I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.
The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.
I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.
You need to include the following in your css:
li { display: list-item; }
This triggers Firefox to show the disc.
and you can also give a left-margin if the reset.css you are using make all margin null :
that means :
li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}
Assuming you apply this css after the reset, it should work !
Matthieu Ricaud
If I'm not mistaken, you should be applying this rule to the li, not the ul.
ul li {list-style-type: disc;}
I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.
Margin messes with this too
This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.
Make sure the 'li' doesn't have overflow: hidden applied.
My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:
li {
list-style: disc outside none;
margin-left: 1em;
}
ul {
margin: 1em;
}
I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.
The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
All I can think of is that something is over-riding this afterwards.
You are including the reset styles first, right?
Have you tried following the rule with !important?
Which stylesheet does FireBug show having last control over the element?
Is this live somewhere to be viewed by others?
Update
I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.
The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.
In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:
previous code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}
modified code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }
Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.
Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.
please use inline css
<li style="disply:list-item">my li content </li>
All you have to do is add this class to your css.
.ul-no-style { list-style: none; padding: 0; margin: 0; }
Including the padding and margin set at 0.
Some reset.css set the ::marker to content : "", try to unset that on the <li> element:
li::marker {
content : unset;
}