English Deutsch Français Italiano Español Português 繁體中文 Bahasa Indonesia Tiếng Việt ภาษาไทย
All categories

I have a list that has abnormal spacing between list elements. I've tried adjusting margins, padding, and line-height, but nothing is working and I don't know why.

I want the list items to be close to each other, but they have almost a full line-height between them. (Site is not online for review... sorry)

2007-01-22 04:05:38 · 2 answers · asked by Anonymous in Computers & Internet Programming & Design

2 answers

By default all elements have some notional padding, border or margin values....the problem is that this can vary wildly accross browsers and browser versions.

With lists this is a fairly prevalent problem. I typically set all elements padding and margin to 0px at the start of my style sheet, I'm then assured that everything has no margin, padding etc. Then, when I get to my Lists I can be assured that the padding and margin I assign is the only thing that I have to worry about.

The 0px setting at the head of my CSS file is easily syled thus:

*{margin: 0px; padding: 0px}

Beware that this would also remove padding and margin from all other elements so you may want to start with just the ul,li, ol etc thus:
ol, ul, li{padding: 0px; margin:0px}

Also beware the cascade. Most elements will inherit a variety of values from their direct parents, grand parents etc in the DOM, so you may want to see if you are inheriting values from container structures etc.

Finally, look at the content of your LI's, do they containt div's or P tags...if so do these elements have margin, padding, line-height etc...all of which may alter the list spacing.

Oh, and don't forget to specify a correct DOCTYPE...this can have a profound effect especially when using modern browsers. No DOCTYPE then your code will run in QUIRKS mode.

Feel free to send me a copy of the offending page, allways happy to try and help if I can

2007-01-22 07:34:34 · answer #1 · answered by Klausy 2 · 0 0

I've seen something similar when the browser renders the page but the HTML is not well formed. Make sure your li tags include both start

  • and end
  • tags, and that your
      is closed by an
    . If that doesn't help, post the code in the next question.

    2007-01-22 05:13:18 · answer #2 · answered by BigRez 6 · 0 0

    fedest.com, questions and answers