I'm using *{margin:0; padding:0;} and this is the first time that it breaks me in something. List paddings and margins are 0 too, so the indentation is lost. and I would like to reset them to their original state, how is this possible?
I've tried this with no success:
ul,ol{
margin :auto; /* This Works */
padding:auto; /* This Not :( */
}
So how should I fix this?
The point of a reset is to eliminate variations due to browser defaults. In other words, there is no definitive way to "unreset" because different browsers may have different defaults.
However, you can choose your own default values, and I think that's what you're trying to do here.
A good way to do this is to look at a browser's default stylesheet (you should be able to find how to do this by doing a search). For example, you can see the Firefox default stylesheet with this URL: resource://gre/res/html.css
There is no way to restore default values, but changing padding of 'ol' or 'ul' and 'li' it will look fine. This works for me..
ol{
padding: 0 25px;
}
ol li{
padding-left: 0px;
}
As you can see if you play with the snippet below, the initial value for list padding-left is 0. My point is regarding your statement:
I would like to reset them to their original state
what I'm trying to illustrate and what #jdigital was kind of saying in his answer is that there is no original state for CSS properties, all of them are dependent on their browser implementation, e.g. default browser stylesheets.
ul {
outline: 1px solid coral;
list-style: none;
padding-left: 48px;
}
li {
outline: 1px solid lightseagreen;
}
ul {
padding-left: initial;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
You have to keep in mind when you reset padding and margin such as *{padding: 0; margin: 0;}. The ul tag have some padding as padding-inline-start: default_value;.
The following these steps you can get rid of this list-style-position: outside; issue :
First of all to find out the default value of padding-inline-start open your browser developer tools and select your ul tag.
In the styles tab below or aside to the Element tab (depending on the resolution of Developer tools you have opened) scroll and find the ul tag styles from user agent stylesheet it will look like this
As you have seen the styling of padding-inline-start in my browser its value is 40px. Now note this value.
Then goto your favorite code editor where you are coding and set the style of specific ul such as ul{padding-inline-start: 40px}
Don't forget to remove the comment we have make at the start to see the effect while resetting the margin and padding
Hope this will work for you.
revert is what you are looking for. It will basically revert any styles made BY YOUR STYLESHEET and not the user-agent/browser stylesheet.
ol, ul, li, {
margin: revert;
padding: revert; /* Padding is what gives the indentation */
}
Reference:
revert in CSS MDN Docs
What is Style Origin
If I understand the question correctly, you could try adding !important; as in the following:
ul, ol {
margin : auto;
padding: auto !important;
}
Normally, it overrides all earlier predefined values.
Related
I cannot figure out how to implement a bullet list in the menu on this page. So far I have attempted these CSS rules for <ul> elements:
list-style-type: disc !important;
list-style: disc !important;
list-style-position:inside !important;
list-style-image: url("http://ils.unc.edu/~ferrerih/web-dev-project/li-red-bullet-smaller.png") !important;
When I inspect the relevant elements in the browser (Chrome) I get no indication that any of these rules are being overridden by anything; none of them are faded or crossed out. They simply do not have any visible effects. The page uses Bootstrap; I am not sure if this has anything to do with it.
For whatever reason, the ul element with class .dropdown-menu has a number of CSS styles that mean your entire menu cannot be seen.
Here are the offending styles that should each be removed entirely from your CSS file or updated to be some other value:
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
}
I write the next jsfiddle:
http://jsfiddle.net/alonshmiel/Ht6Ym/2409/
I try to put the ul in the left side:
I tried to do:
margin-left:0px;
float: left;
but it doesn't work.
any help appreciated!
You can add:
ul#advancedTargeting {
padding-left: 0;
}
Updated Fiddle
It's because some browsers has some default styles for HTML elements.
You can reset your padding-left value of your ul to default 0 using above code.
It's a good habit to use a css reset script to reset all the default styles applied by browsers to make your css compatible with various of browsers. You can find it from cssreset.com
You should set:
padding-left:0px;
http://www.w3schools.com/css/css_boxmodel.asp - check this to get a clear picture.
here is the solution, just use padding-left:0;
Your <ul> element is positioned as fixed and has a left: 55px; inline style.
Change that to left: 0; at first. Or avoid using fixed positioning if you don't want to remove the element from document normal flow (to get the float property to work).
Also, web browsers apply a left padding on the HTML list elements, such as <ul> and <ol>. You need to reset the padding as padding-left: 0.
However, it's better to reset all the default user agent stylesheets by using a CSS reset.
Either a tiny one:
* { padding: 0; margin: 0;}
Or a well-known version.
UPDATED DEMO.
I have a CSS problem on this page: http://www.fastclickad.com/ask-for-your-free-seo-analysis/
For some reason, bullets still show although I inserted in the style sheet several instructions so the list styles don't inherit from the theme.
When I "inspect element" with google Chrome everything seems to go smooth, except the bullets still show!
Can you help me?
You have a border specified which, if removed, prevents the arrow:
.aritclecontent ul li::before, .sidebarwidget ul li::before {
border-left: solid #0473B2;
}
So you'll need to do something like:
.gform_body ul li:before {
border-left:none!important;
}
The !important could be frowned upon, so you might wish to analyse your styles and refactor accordingly to remove the need for using it, if indeed it is necessary.
try this ..
list-style-type: none;
On http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none, a nice overview is provided for the different list-style-type values.
However, for the value none, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use text-align:center on the list items, and this horizontal spacing makes them not really centered. And I need to use <ul> because the CMS brings it in that way.
Basically, by default list-style-type:none does a visibility:hidden on the bullets, while I would like to achieve display:none on the bullets instead. What would be the proper way to do this?
It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <body> element has 8px of margin applied to it by default.
Here is a link to Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/
Just to see for yourself, add:
ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
Make sure to add browser reset styles before you start working with CSS.
You have to add this:
ol, li {
margin: 0px;
padding: 0px;
}
for this question.
A better way to this these days I found recently is to set the <ul> to display: contents;. Thus the css should look something like this:
ul {
list-style-type: none;
display: contents;
}
ul > li {
padding: 0;
margin: 0;
text-align: center;
}
This should do the trick.
add
margin:auto;
float:none;
display block; to your css for the ol element, this will remove the padding and align the elements in the centre
I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .
I tried
list-style: none;
but that doesnt work could anyone suggest a workaround this problem..
Thanks any help would be appreciated
Thanks everyone for the effort +1 to all answers
Set padding-left and margin-left on the ul to 0.
Have you reset the default margin and padding styles?
ul,li {
margin:0;
padding:0;
}
You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:
margin: 0;
padding: 5px;
A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).
In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.
http://getfirebug.com/html
Also, just in case you haven't seen it before, look at the box model:
http://www.w3.org/TR/CSS2/box.html
A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.
Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/