Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: White space between <li> items.

  1. #1
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default White space between <li> items.

    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>
    Last edited by Cball; 09-20-2007 at 06:55 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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

  3. #3
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

    Any other ideas?

  4. #4
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Anyone??

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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>

  6. #6
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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>

  7. #7
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by leoinfante; 09-20-2007 at 09:54 PM. Reason: correction

  8. #8
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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>

    <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.
    Last edited by tech_support; 09-22-2007 at 10:25 AM.

  9. #9
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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>

  10. #10
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •