White space between <li> items. [Archive]

View Full Version : White space between <li> items.

Cball

09-19-2007, 10:00 PM

I have a space between <li> items and I can't figure out why. Any help would be great.

I have test on both FF and IE.

You can see the web page here (www.cathorn.com).. Thanks

*{margin: 0;padding: 0;font-family: 'century gothic';}

body {border:0;margin:0;padding:0;background: #64210e;}

.content {position: relative;left: 50%;margin-left: -400px;margin-top: 0px;background: transparent;}

.top {height: 241px;background: transparent url(images/header.gif);background-repeat: no-repeat}

.columnnav {top: 220px;width: 40%;text-align: justify;background: transparent;position: absolute;}

.line {top:250px;text-align: center;font-size: 15px;color: #5500FF; background-image: url(images/line.gif);background-repeat: repeat-y;width: 752px;}

.line a{height: 1px;background: transparent;font-size: 15px;color: #009000;}

.line a:hover{height: 1px;background: transparent;font-size: 15px;color: #5500ff;}

li {vertical-align: top}

.bottom{height: 43px;background:transparent url(images/footer.gif);background-repeat: no-repeat;width: 752px;text-align: center;font-size: 12px;float: bottom;}

.bottom p{color: #000;padding-left: 75px;}

.bottom a{color: #ccc;font-size: 12px;}

.bottom a:hover{color: #bbb;font-size: 12px;}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.bodytext{width: 700px;clear: right;border: 0px solid gray;}

.bodytext .floatbox{float: left;width: 155px;margin-left: 20px;margin-right: 8px;}

* html .bodytext p{ /* IE 3px jog hack*/height: 1%;}

.bodytext p{margin-top: 0px;margin-left: 0px;padding-left: 8px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN” >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cathorn Computers</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="top"></div>
<div class="line">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
</div>
<div class="columnnav">
<ul>
<li><a href="index.html"><img src="images/home.gif" border="0" width="227" height="67" alt=""></a></li><li><a href="index.html"><img src="images/history.gif" border="0" width="227" height="53" alt=""></a></li><li><a href="index.html"><img src="images/support.gif" border="0" width="227" height="84" alt=""></a></li>
<li><a href="index.html"><img src="images/design.gif" border="0" width="227" height="56" alt=""></a></li>
<li><a href="index.html"><img src="images/programming.gif" border="0" width="227" height="55" alt=""></a></li>
<li><a href="index.html"><img src="images/area.gif" border="0" width="227" height="55" alt=""></a></li>
<li><a href="index.html"><img src="images/contact.gif" border="0" width="227" height="58" alt=""></a></li>
<li><a href="index.html"><img src="images/nav.gif" border="0" width="227" height="79" alt=""></a></li>
</ul>
</div>
<div class="bottom">
<p><b>layout by kb - ©2007 cathorn.com - last updated 8-29-07</b></p>
</div>

</body>
</html>

boogyman

09-19-2007, 11:39 PM

that is a default styling of the list item tags.

li {
margin: 0;
padding: 0;
}

also the vertical-align selector will apply to text, not the image, so that is really just an extra kb of file size that can be avoided

Cball

09-20-2007, 02:08 PM

I put the code that you suggested in,however the space is still haunting me.. :)

Any other ideas?

Cball

09-20-2007, 06:56 PM

Anyone??

boogyman

09-20-2007, 07:49 PM

I have tried everything that I know of, and none of them have worked. that leads me to believe that its because of the image. also if you create a 1px border around the entire list item, you see that it doesn't chop off at the end of the image

take alook at the following code andyou will see what I am getting at... just randomly took one of your images and at the bottom i loaded it into a new div and set the background of that div to a totally new color. and it shows thru, even though there is no margins and no padding on either element. so I would suggest going back into your image editor and and cut the bottoms of your images to fix this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cathorn Computers</title>
<style type="text/css">
body {
background: #0f0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
border: 1px solid #000;
margin: 0;
padding: 0;
}
ul li img {
margin: 0;
padding: 0;
border: 0;
}
img {
padding: 0;
border: 0;
}
div {
margin: 0;
padding: 0;
}
div img {
margin: 0;
padding: 0;
}
</style>

</head>
<body>
<ul>
<li>home</li>

<li>history</li>
<li><img src="http://www.cathorn.com/images/support.gif" alt="support"></li>
<li><img src="http://www.cathorn.com/images/design.gif" alt="design"></li>
<li><img src="http://www.cathorn.com/images/programming.gif" alt="programming"></li>
<li><img src="http://www.cathorn.com/images/area.gif" alt="area"></li>
<li><img src="http://www.cathorn.com/images/contact.gif" alt="contact"></li>
<li><img src="http://www.cathorn.com/images/nav.gif" alt="nav"></li>
</ul>

<div style="background:#f00"><img src="http://www.cathorn.com/images/support.gif" alt="nav"></div>
</body>
</html>

Cball

09-20-2007, 09:16 PM

Ok, I did edit some images and wasn't able to get anything to change until I implemented what you coded. However FF is still spacing the images apart but IE looks good... So I'm not sure what to do now..?

Also do you know how to center the entire thing with out using tables?

Thanks again.

Heres the new code/html:

*{margin: 0;padding: 0;font-family: 'century gothic';}

body {border:0;margin:0;padding:0;background: #64210e;}

.content {position: relative;left: 50%;margin-left: -400px;margin-top: 0px;background: transparent;}

.top {height: 241px;background: transparent url(images/header.gif);background-repeat: no-repeat}

.columnnav {top: 220px;width: 40%;text-align: justify;background: transparent;position: absolute;}

.line {top:250px;text-align: center;font-size: 15px;color: #5500FF; background-image: url(images/line.gif);background-repeat: repeat-y;width: 752px;}

.line a{height: 1px;background: transparent;font-size: 15px;color: #009000;}

.line a:hover{height: 1px;background: transparent;font-size: 15px;color: #5500ff;}

ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
border: 1px solid #000;
margin: 0;
padding: 0;
}
ul li img {
margin: 0;
padding: 0;
border: 0;
}
img {
padding: 0;
border: 0;
}
div {
margin: 0;
padding: 0;
}
div img {
margin: 0;
padding: 0;
}

.bottom{height: 43px;background:transparent url(images/footer.gif);background-repeat: no-repeat;width: 752px;text-align: center;font-size: 12px;float: bottom;}

.bottom p{color: #000;padding-left: 75px;}

.bottom a{color: #ccc;font-size: 12px;}

.bottom a:hover{color: #bbb;font-size: 12px;}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.bodytext{width: 700px;clear: right;border: 0px solid gray;}

.bodytext .floatbox{float: left;width: 155px;margin-left: 20px;margin-right: 8px;}

* html .bodytext p{ /* IE 3px jog hack*/height: 1%;}

.bodytext p{margin-top: 0px;margin-left: 0px;padding-left: 8px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN” >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cathorn Computers</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="top"></div>
<div class="line">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
</div>
<div class="columnnav">
<ul>
<div style="background:#transparent"><a href="index.html"><img src="images/home.gif" alt="home"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/history.gif" alt="history"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/support.gif" alt="support"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/design.gif" alt="design"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/programming.gif" alt="programming"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/area.gif" alt="area"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/contact.gif" alt="contact"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/nav.gif" alt="nav"></a></div>
</ul>
</div>
<div class="bottom">
<p><b>layout by kb - ©2007 cathorn.com - last updated 8-29-07</b></p>
</div>

</body>
</html>

leoinfante

09-20-2007, 09:47 PM

I had a similar problem the other day, and I haven't figured out why, but I figured out how to fix it (for me anyways). Try removing the line breaks from your <li> tags. For example:

Instead of:
<ul>
<li></li>
<li></li>
</ul>

try:

<ul>
<li></li><li></li>
</ul>

It's a whole lot uglier to look at, but see if it works. As I said, I'm not sure why this happened for me (whitespace shouldn't make a difference). Maybe something to do with the doctype or something?

Also, to center align something you should wrap it in another div and do "margin:0 auto;" AND "text-align:center;" (for IE). Well, that's how to do it if you mean horizontal alignment. If you want a vertical alignment that's a whole different issue. Hope this helps.

-Leo
Graphic Artist/Web Designer
AYCOM Conulting (http://www.aycomconsulting.com)

boogyman

09-21-2007, 01:10 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN” >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
you have 2 DOCTYPES... that is definitely going to confuse the browser. use HTML 4.01 Strict because XHTML is unsupported by Internet Explorer.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 //EN” "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PAGE TITLE</title>

<div style="background:#transparent"><a href="index.html"><img src="images/home.gif" alt="home"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/history.gif" alt="history"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/support.gif" alt="support"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/design.gif" alt="design"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/programming.gif" alt="programming"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/area.gif" alt="area"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/contact.gif" alt="contact"></a></div>
<div style="background:#transparent"><a href="index.html"><img src="images/nav.gif" alt="nav"></a></div>
</ul>

pardon my language but WTF. take out the div <div>tags and put back in your list-item tags <li>. also take out ALL of the CSS that you got from me.
I was only using that stuff (bottom div and css) as an example showing you that it wasn't anythign you were doing with CSS but that it was a some transparent pixels at the bottom of your pictures. EDIT THE PICTURES to get rid of the transparent part at the bottom and you should find that your problem is fixed

also I am sure you did it just this to isolate the problem, but if not you can remove all of the break line tags <br> and use a inline css style for the line element.

Cball

09-21-2007, 04:48 PM

Woohoo!! IT works.. Only thing now is I don't know how to center the whole thing on FF.

pardon my language but WTF LMAO!!!

Again I'm still a rookie. I assumed you were suggesting.

The code that is in red is actually the last thing I added that made it finally work.Using partially what you suggested and using suggestions from here (http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/) I was able to get it all to work. Just so you know NONE of my images had any transparent pixels I checked many times.

*{margin: 0;padding: 0;font-family: 'century gothic';}

body {border:0;margin:0;padding:0;background: #64210e;}

.content {position: relative;left: 50%;margin-left: -400px;margin-top: 10px;background: transparent;}

table{width: 800px;border-collapse: collapse;}

.top {height: 241px;background: transparent url(images/header.gif);background-repeat: no-repeat}

.columnnav {top: 220px;width: 40%;text-align: justify;background: transparent;position: absolute;}

.line {top:250px;text-align: center;font-size: 15px;color: #5500FF; background-image: url(images/line.gif);background-repeat: repeat-y;width: 752px;}

.line a{height: 1px;background: transparent;font-size: 15px;color: #009000;}

.line a:hover{height: 1px;background: transparent;font-size: 15px;color: #5500ff;}

ul {margin: 0;padding: 0;list-style: none}

ul li {list-style: none;display: inline;margin: 0;padding: 0;}

ul li img {margin: 0;padding: 0;border: 0;}

li a {display: block;padding: 0em;background: transparent;}

img {padding: 0;border: 0;}

div {margin: 0;padding: 0;}

div img {margin: 0;padding: 0;}

.bottom{height: 43px;background:transparent url(images/footer.gif);background-repeat: no-repeat;width: 752px;text-align: center;font-size: 12px;float: bottom;}

.bottom p{color: #000;padding-left: 75px;}

.bottom a{color: #ccc;font-size: 12px;}

.bottom a:hover{color: #bbb;font-size: 12px;}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.bodytext{width: 700px;clear: right;border: 0px solid gray;}

.bodytext .floatbox{float: left;width: 155px;margin-left: 20px;margin-right: 8px;}

* html .bodytext p{ /* IE 3px jog hack*/height: 1%;}

.bodytext p{margin-top: 0px;margin-left: 0px;padding-left: 8px;}

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 //EN” "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Cathorn Computers</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css" />


</head>

<body>
<table class="content">
<div class="top"></div>
<div class="line">
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="columnnav">
<ul>
<li><a href="index.html"><img src="images/home.gif" alt="home"></a></li>
<li><a href="index.html"><img src="images/history.gif" alt="history"></a></li>
<li><a href="index.html"><img src="images/support.gif" alt="support"></a></li>
<li><a href="index.html"><img src="images/design.gif" alt="design"></a></li>
<li><a href="index.html"><img src="images/programming.gif" alt="programming"></a></li>
<li><a href="index.html"><img src="images/area.gif" alt="area"></a></li>
<li><a href="index.html"><img src="images/contact.gif" alt="contact"></a></li>
<li><a href="index.html"><img src="images/nav.gif" alt="nav"></a></li>
</ul>
</div>
<div class="bottom">
<p><b>layout by kb - ©2007 cathorn.com - last updated 9-21-07</b></p>
</div>
</table>

</body>
</html>

boogyman

09-21-2007, 05:12 PM

by saying to display them inline you are telling the browser that your intention is to have them display horizontally rather than vertically.

I know you have it working, but try using

display:block

try getting rid of the whitespace

whitespace does nothing in when placed outside of a tag, otherwise everything in our file would need to be 1 continuous line.
This should not affect the look of the page after it being rendered unless its IE which just makes up it's own rules regardless what should be done, but while it is possible, it is considered by some bad coding practice as it makes debugging alot more difficult.

Cball

09-21-2007, 10:06 PM

I tried the display:block and it fixes it for FF but not IE which I use FF so thats cool but 90% of those that will view the page use IE. So I'm not sure what else to do. Like I have said I'm new to this so I'm not going to think I know whats right or wrong but you said:

but while it is possible, it is considered by some bad coding practice as it makes debugging alot more difficult.

Who determines what is good coding when something doesn't work?

I really appreciate your help.. And like I said I'm willing to try any code.

But I have uploaded the site here (http://www.cathorn.com).And like I said it's working and I want to be correct but its hard pill to swallow when what is "right" won't work.

Thanks again.