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.
Related
I'm trying to create a top menu bar like in stackoverflow (but with fixed position).
JSFIDDLE Demo
There is a space on the left and at the top of the menu bar. How can I remove that space?
Thank you in advance...
By reseting margin & padding : http://jsfiddle.net/yw4e69qo/1/
Simply
html * {
margin: 0;
padding: 0;
}
But more comprehensively - dive deeper into this topic: http://meyerweb.com/eric/tools/css/reset/
It's very useful :)
body{
margin:0;
padding:0;
}
#nav{
margin:0
}
This will solve you problem without changing the menu postiton of menu items
#nav {
padding:0;
margin:0;
}
ul elements always have a default padding on the left side because of the list-style property. If you inspect the element in the console you can see exactly what is creating the margins you see. So simply putting the following will fix the problem for you:
#nav {
margin: 0;
padding: 0;
}
Also you should look into using a reset.css file so you don't have to do the resetting like this yourself on every list on your page. Using global selectors in your css like so:
ul {
margin: 0;
padding: 0;
}
to reset all elements is considered bad practice since it will slow down the execution of the code since it always have to check if the selector is part of the global selector. Hope this answer helps.
Firstly, i'm new to both HTML and css, so don't be too hash. I have a large header div that I wish to place it flush at the top of the screen, however, there appears to be space of about 10px which I can't remove.
HTML
<div class="wrapper"></div>
CSS
.wrapper{width:300px; background-color: red; height: 300px; margin: 0; padding: 0;}
If you're new to CSS and stuff,
you need to know that the browser applies styles to elements by default.
Like for example to Headings the font-size and font-weight,
to context elements like i, b, span other properties like display inline,
and to DIV elements the display:block; etc...
if you take a look at THIS LIST you'll see that 8px are added to the body element.
If you're happy with the styles the browser adds by default to your elements than all you need is
body{
margin:0; /* to remove the 8px default */
}
otherwise if you're not happy at all, and you wish to have full control over the styles being applied to your elements you can use an Ugly Reset (for margin and padding urgency) using the Universal Selector *
*{ margin:0; padding:0; } /* Global reset. "*" is to target all elements. */
or Google for some Stylesheet Reset code like from: http://www.cssreset.com/
that will help you to control/reset the most of all other elements default styles.
You need to add that to the body as well. The DIV is inside the BODY.
Try setting
margin: 0;
padding: 0;
To the body and the html elements
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/
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.