SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Padding on Left - not sure why its there?

    Hey everyone,

    I am new to the CSS coding but I am enjoying it. Well I have always used stylesheets but now I have been trying to do a little more and more.

    http://kangarooproducts.com/test.html

    This is a test page that uses a concept on another page and I cant figure out why there is that gap, padding, margin on the left side of the buttons. All the coding is in the HTML file if you want to view source or I will post it right here.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Popups</title>
    <style type="text/css">
    body {
    	color: #000;
    	background-color: #fff;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0;
    }
    a {
    	text-decoration: none;
    }
    a:link, a:visited {
    	color: #000000;
    	}
    #menu {
    	text-align: center;
    }
    #menu ul {
    
    	font-family: verdana, "trebuchet MS", helvetica, sans-serif; 
    	font-size: 11px;
    	line-height: 16px;
    	color: #000000;
    	text-decoration:none;
    	width:600px;}
    
    #menu li {
    	text-decoration:none;
    	list-style-type: none;
    	float: left;
    	display: block;
    	
    	background-color: #ffffff;
    }
    
    #menu A {
    	text-decoration:none;
    	color: #000000;
    	display: block;
    	line-height: 1.5; 
    	border-right: 1px solid #003399;
    	border-bottom: 1px solid #003399;
    	border-left: 1px solid #003399;
    }
    #menu li#topmenu {
    	border-top: 1px solid #003399;
    	background-color: #CCCCCC;
    }
    
    #menu A:hover{
    	color: #000000;
    	background-color: #CCCCCC;
    }
    
    </style>
    <!--[if IE]><style>
    #menu a {
    	height: 0;
    	height: auto;
    	zoom: 1;
    }
    
    </style><![endif]-->
    
    
    </head>
    
    <body>
    
    
    <table height="233" border="0" align="left">
      <tr>
        <td bgcolor="#996633">
    	<div id="menu" align="left">
    <ul>
    	<li>
    		<a href="#">menu one</a>	</li>
      	<li>
    		<a href="#">menu two</a>
        </li>
    	<li>
    		<a href="#">menu three</a>
    	</li>
    </ul>
    </div>
    	
    	</td>
      </tr>
    </table>
    </body>
    </html>
    Any help or explanation is appriciated. I am viewing it on IE6 right now.

    It has been driving me crazy figuring it out so I am trying to step back and get some guidance.

    Thanks in advance
    Thanks Sitepoint!

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to float #menu a left (and you don't need display: block on the li, they're block level by default).

  3. #3
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    made that change to

    #menu A {
    float:left;
    text-decoration:none;
    color: #000000;
    display: block;
    line-height: 1.5;
    border-right: 1px solid #003399;
    border-bottom: 1px solid #003399;
    border-left: 1px solid #003399;
    }

    Now it looks different but still has that gap on the left.
    Thanks Sitepoint!

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #menu ul { padding: 0; }

  5. #5
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope still not working. I have no clue what is going on. I tried using a negative padding-left and still not working.

    I just uploaded it with the changes you said.

    This seems one of those simple yet complicated problems.

    I think I am just going to start over from as basic as possilble. Unless someone knows what is giong on.
    Thanks Sitepoint!

  6. #6
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind I used another example to do what I wanted to do and it was more simple and what I wanted. Here is the code incase anyone ever wants it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>nav example using body to determine current link</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    #menu {
    	font-family: verdana, "trebuchet MS", helvetica, sans-serif; 
    	font-size: 11px;
    	line-height: 16px;
    	color: #000000;
    	text-decoration:none;
    	width:120px;
    	list-style:none;
    	border-left:1px solid #003399;
    	border-right:1px solid #003399;
    	border-top:1px solid #003399;
    	margin:20px;
    	text-align: center;
    }
    #menu li{
    	width:120px;
    	background:#ffffff;
    	border-bottom:1px solid #003399;
    }
    #menu a {
    	text-decoration:none;
    	width:120px;
    	display:block;
    	color:#000;
    	padding:2px 4px 2px 2px;
    }
    a:hover{background:#CCCCCC;color:black}
    </style>
    </head>
    <body>
    <h1>Item Examples</h1>
    	<ul id="menu">
    	  <li><a href="#">Item 1</a></li>
    	  <li><a href="#">Item 2</a></li>
    	  <li><a href="#">Item 3</a></li>
    	  <li><a href="#">Item 4</a></li>
    	  <li><a href="#">Item 5</a></li>
    	  <li><a href="#">Item 6</a></li>
    	  <li><a href="#">Item 7</a></li>
    	</ul>
    </body>
    </html>
    Thanks Sitepoint!

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    * {margin:0;padding:0}
    As I pointed out before, it was due to a problem with default margins/padding. With your second example you've set the margin/padding on all elements to 0. So in future, if someone suggests setting margin or padding to 0 on something and it doesn't work, try setting it to 0 on other elements until you find it (or just use the universal selector) because it's bound to be something with default margin/padding causing the problem.


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
  •