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.. Thanks

Code:

*{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;}

HTML Code:

<!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.

Code:

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.

HTML Code:

<!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:

Code:

*{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;}

HTML Code:

<!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

**boogyman** · 09-21-2007, 01:10 PM

HTML Code:

<!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.

HTML Code:

<!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>

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 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.

Code:

*{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;}

HTML Code:

<!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" />
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->   
   
   </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

Code:

display:block

Originally Posted by leoifante

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.

Thread: White space between <li> items.

Thread Tools

Search Thread

White space between <li> items.

Bookmarks

Bookmarks

Posting Permissions