CSS - space between "li" ???

[j4mes_bond25]

Is there any way, I could AUTOMATICALLY have "space" between two "li" i.e. each new "li" should start from a fresh line.

I think "margin" should be the best bet, but I'm afraid that's not working, as you can see from the code.

Earlier, I was merely using MANY <br /> until the new "li" pushes down & starts on new page, but that time-consuming to do on every single pages & beside, it gets displayed differently on different resolution window (sometime it shows perfect, but sometimes it has TOO MUCH space between two "li")

I've got rid of all the <br /> between "li" in the Drinkware heading of "Alcohol.html" page on: http://homepage.ntlworld.com/darsh25/alcohol.html

Now you can see that all the "li" are over-lapping each other. This ONLY happen when there's an image within the "li" (but if it's ONLY text, then the new "li" always starts on the fresh line).

All the "li" related coding (along with "img" that's WITHIN these "li" are:

Code: Select all

#content ul
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    color:black;
    margin:20px 30px;
    list-style-image:url(list_icon.gif);
}

#content ul li
{
    margin:20px;
}


/* ............................... IMAGES WITHIN "li" ............................. */

#content img.left
{
    float:left;
    padding:10px;
}

#content img.right
{
    float:right;
    padding:10px;
}

Entire Stylesheet is:

Code: Select all

/* CSS Document */

body 
{
    background-image:url(background.jpg);
    background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

#banner
{
    width:100%;
    height:100px;
    text-align:center;
}


/* ......................................... Top Menu .................................... */

#topMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:980px;
    float:right;
}

#topMenu ul
{
    list-style: none;
    font-size:medium;
    float:right;
    position:relative;
    margin-left: 130px;
    width:850px;
    padding: 0;
}

#topMenu ul li 
{
    display: inline;
    border:1px solid black;
    width:210px;
    background-color:white;
    color:#FF00FF;
    float:left;
    position: relative;
    font-size:large;
}

#topMenu ul li:hover
{
    background-color:black;
}

#topMenu a
{
    display:block;
    text-decoration:none; 
    font-size:larger;
    color:red; 
}

#topMenu a:hover
{
    color:white;
    text-transform:uppercase;
}

/* ....................................... Left Menu .......................................... */

#leftMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:100px;
    float:left;
}

#leftMenu ul
{
    text-align:center;
    list-style:none;
    margin:0px;
    position:relative;
    padding:0px;
    width:120px;
    border:thin solid red;
    border-bottom:0px;
}

#leftMenu ul li
{
    display: block;
    background-color:white;
    width:120px;
    border-bottom:thin solid red;
    color:purple;
    position: relative;
    font-size:large;
    line-height:50px; 
}

#leftMenu ul li:hover
{
    color:black;
    background-color:yellow;
    text-transform:uppercase;
}

#leftMenu ul li ul 
{
    position:absolute;
    display: none;
    text-transform:none;
    left:120px;
    width:123px;
    top:0px;
}

#leftMenu ul li ul a
{
    display:block;
    position:relative;
    text-decoration:none; 
    background-color:white;
    line-height:20px; 
    font-size:large;
    width:123px;
    color:green;
    text-transform:none;
}

#leftMenu ul li ul a:hover
{
    color:#00FFFF;
    background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ................................... Content ................................................ */

#content
{
    background-color:white;
    width:850px; 
    border:1px solid green;
    float:right;
    border-bottom:none;
}

#content h2
{
    font-family:"Times New Roman", Times, serif;
    text-align:justify;
    margin:30px;
    color:#990033;
    text-decoration:underline;
}

#content h3
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:left;
    font-size:large;
    margin:30px;
    color:blue;
    text-decoration:none;
}

#content h4
{
    font-family:"Courier New", Courier, monospace;
    text-align:left;
    font-size:large;
    color:red;
    margin:30px;
    text-decoration:none;
}

#content h5
{
    font-family:"Courier New", Courier, monospace;
    text-align:left;
    font-size:large;
    color:fuchsia;
    margin:30px;
    text-decoration:none;
}

#content h6
{
    font-family:"Courier New", Courier, monospace;
    text-align:left;
    font-size:medium;
    color:black;
    margin:30px;
    text-decoration:underline;
}

#content p
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    margin:20px 30px;
    color:black;
}

#content p.first-letter:first-letter
{
    color:red;
    margin-left:20px;
    font-size:xx-large;
}

#content ul
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    color:black;
    margin:20px 30px;
    list-style-image:url(list_icon.gif);
}

#content ul li
{
    margin:20px;
}

#content ol
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    margin:20px 30px;
    list-style-type:decimal;
}

#content ol li
{
    margin:20px;
}

#content img.left
{
    float:left;
    padding:10px;
}

#content img.right
{
    float:right;
    padding:10px;
}

#content ul li a
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    text-decoration:none;
}

#content ul li a:hover
{
    color:red;
    background-color:yellow;
    font-weight:bold;
}

#content ul a:active
{
    color:blue;
    font-weight:bold;
}

#content ul a:visited
{
    color:grey;
}

/* ................................... Other Class ......................................... */

.boldText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    font-weight:bold;
}

.italicText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    font-style:italic;
}

.underlineText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    text-decoration:underline;
}

.centerTop img
{
    text-align:center;
    border:0px;
}

/* ................................... Table ......................................... */

.table
{
    background-color:black;
    border-style:outset;
    border-width:thick;
    border-spacing:20px;
    margin:30px 30px;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:center;
}

.table:hover
{
    border-style:inset;
    border-width:thick;
}

.tr
{
    border:1px solid red;
}

.th
{
    border:1px solid yellow;
    color:fuchsia;
}

.td
{
    border:1px solid red;
    font-size:medium;
    color:yellow;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
    border:1px solid red;
    float:left;
    background-color:black;
    color:#FFFFFF;
    text-align:center;
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    font-size:large;
    width:100%; 
    height:5%; 
    margin:0px;
}

[Rob]

When floating LI elements, you would need to use display:block in the LI CSS

If you get stuck, post a URL

[masonbarge]

Code: Select all

li {padding: 20px 0 0 0;}

[j4mes_bond25]

Originally Posted by Rob

When floating LI elements, you would need to use display:block in the LI CSS

If you get stuck, post a URL

I'm terribly sorry but sadly, even trying "display:block" didn't work, I'm afraid, since it still overlapped, however, while delving into it, I managed to get it sorted out now using:

clear:both;

Code: Select all

#content ul li
{
    margin:20px;
    clear:both;
}

as you can see, it being seen perfectly well on: homepage.ntlworld.com/darsh25/alcohol.html

Thanks for your time & help, in the mean time. Much appreciated.

[Rob]

yeah.... that'll work