Remove indentation from an unordered HTML list

Question

div.content that is containing ul.searchlist with two lis (areas with the white background) is not aligning at the left completely as it has some extra spacing (area with the red background) and I don't know what is causing it to appear and how to remove it.

Illustration :

HTML :

<div id="body-content">
   <h1>Title of</h1>
   <div class="content">
      <p style="margin:0;">Subtitle</p> 
      <ul class="searchlist">
         <li>
            <img src="" title="result" width="110px"/>
            <a href="#">This is a post for  testing CSS</a>
         </li>
         <li>
            <img src="" title="result" width="110px"/>
            <a href="#">This is a post for  testing CSS</a>
         </li>
      </ul>
   </div>
</div>

CSS :

#body-content{ float:left; width:700px;background:yellow; }
.content .searchlist{ float:left; width:700px; list-style:none; margin:15px 0 0 0; background:red; }
.content .searchlist li{ padding:10px; float:left; width:688px; background:#fcfcfc; margin-bottom:6px; }
.content .searchlist li img{ float:left; margin-right:10px; }
.content .searchlist li a{ font:bold 18px Arial, Helvetica, sans-serif; color:#666; }

JSFiddle

Ashtray

Answer 1

Removing default padding-left (this indention ensures that the markers won't be pushed outside the list ) from ul and custom padding from li should work:

.content ul.searchlist { padding-left : 0; }
.content ul.searchlist li { padding : 10px 0; }

JSFiddle

Plop

Thanks for your answer, but its not working! And even in your example it seems that its not working! – Ashtray

Try using his CSS, not adding CSS. @Ashtray check out my answer. the UL already has as tyle. – Orlan

Thanks for your help, it is correct so I need to accept the answer, but in my example its still not working!I have my <ul> more at left now, but its not stuck like in your jsfiddle! Really dont understand what I have wrong! – Ashtray

@Ashtray : What browser are you using? – Plop

Google chrome, but i already test on firefox and I get the same result! – Ashtray

@Ashtray :It is floated to the left completely below : jsfiddle.net/TM3zP/8 . I've added body{margin:0} property. Or maybe body-content parent element has margin or padding properties, so I can't see them in your example. – Plop

Have you tried clearing your cache? I've noticed a bit of cache-control issues on JSFiddle lately. – Orlan

Thank you very much for your help and attention! It worked now :) – Ashtray

Answer 2

You are looking for list-style-type: not list-style: and then you need to set it's margin and padding to 0, or w/e

.content .searchlist {
    float: left;
    width: 700px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: red;
}

JSFiddle Example

Orlan

Answer 3

I think you should reset the default style sheet before another code. It is the best practice. For example below:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Naseby

You can use * { margin: 0; padding: 0; } instead of listing elements... It also causes problems with anything else relying on default behavior. – Orlan

We can use * { margin: 0; padding: 0 } too, but I recommend to use the long code. Mostly of the developers, they use that one. – Naseby

I've actually never seen anyone use it that way. If you're going to spend the time to list tags, you might as well just add those fixes to the style of that tag. If you're going to default so many, default them all at the beginning of development and re-establish their styles in the CSS. * { } will also read in most all browsers. Personally, I just don't use resets as you can do that per-element for your custom site. You shouldn't be coding for other peoples changes to your site to be so easy. Take Facebook for example. – Orlan

Answer 4

opera next, chrome, safari, and webkit all appear to be adding 40px of padding on the left:

Source:

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

Fix:

#body-content > div > ul {padding-left:0;}

Wilford

Try using his CSS, not adding CSS. It helps with the learning process. – Orlan

Fair point WASqsquatch, I wish there were some easy way to raise awareness of built in developer tools for these people too, It would make thier lives so much easier to know what ctrl+shift+i did. – Wilford

Yeah, I'm always right click -> inspect element or ctrl+shift+i if not just to snoop on websites cool features. – Orlan

Answer 5

Try this:

.content .searchList {
   padding-left: 0px;
}

ul elements start with a bit of padding by default.

Brathwaite

Try using his CSS, not adding CSS. It helps with the learning process. – Orlan

Edited to be exactly how OP is targeting the element in their CSS. – Brathwaite

Answer 6

Set padding to 0 :

.content .searchlist {
   background: none repeat scroll 0 0 #FF0000;
   float: left;
   list-style: none outside none;
   margin: 15px 0 0;
   width: 700px;
   padding: 0;
}

Downthrow