Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    Issue with margin-left on lists

    I have a CSS dropdown menu, but the thing is slightly shifted to the right. I believe the reason is that even though I have list-style:none, I think the list is still keeping room for the bullet point. I don't want any margin in the left side, but I can't get it to work. I took a screenshot so you might be able to understand what I'm talking about. Notice the selection box around "Food*" doesn't go all the way to the left border of the cell. How do I do this?

    Here is the HTML:
    Code:
    <table width="100%" border="0">
         <tr>
              <th width="5%" scope="col"></th>
              <th width="13%" scope="col" align="center"><a href="<?php echo $date_link;?>" title="Sort by date">Date</a></th>
              <th width="21%" scope="col" align="center">
                   <div id="foodMenu">
                        <ul class="dropDownMenu">
                             <li><a href="#" onclick="javascript:showlayer('subLayer')" title="Sort by food">Food*</a></li>
                             <ul class="subDropDownMenu" id="subLayer" onmouseout="javascript:showlayer('subLayer')">
                                  <li><a href="<?php echo $food_name_link;?>" title="Sort by food name">Sort by food name</a></li>
                                  <li><a href="<?php echo $food_rating_link;?>" title="Sort by food rating">Sort by food rating</a></li>
                             </ul>
                        </ul>
                   </div>
              </th>
              <th width="22%" scope="col" align="center"><a href="<?php echo $restaurant_link;?>" title="Sort by restaurant/brand">Restaurant/Brand*</a></th>
              <th width="13%" scope="col" align="center"><a href="<?php echo $sensitive_link;?>" title="Sort by sensitivity">Sensitivity*</a></th>
              <th width="21%" scope="col" align="center">Notes</th>
              <th width="5%" scope="col" align="center"></th>
         </tr>
    </table>
    And the CSS:
    Code:
    ul, li{list-style:none;}
    
    #foodMenu{
    	height:0px;
    	padding-bottom:36px;
    	/*padding:0px 78px 36px 0px;*/
    	/*width:150px;*/
    }
    
    #foodMenu .dropDownMenu li {
    	float:none;
    	/*width:150px;*/
    }
    #foodMenu .dropDownMenu li a{
    	display:block;
    }
    
    #foodMenu .subDropDownMenu li:hover ul, li.over ul {
    	display:block;
    }
    
    #foodMenu ul .subDropDownMenu {
    	border:solid 1px #004A66;
    	background:#FFFFFF;
    	position:relative;
    	width:150px;
    	padding:0px 0px;
    	clear:both;
    	z-index:100;
    	display:none;
    }
    #foodMenu ul .subDropDownMenu li{
    	background:none;
    	display:block;
    	float:none;
    	border:0;
    	height:auto;
    	line-height:normal;
    	border-bottom:solid 1px #004A66;
    }
    #foodMenu .subDropDownMenu li a{
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	line-height:normal;
    }
    #foodMenu .subDropDownMenu li a:hover{
    	background:#5195CE;
    	color:#FFF;
    }
    Attached Thumbnails Attached Thumbnails Issue with margin-left on lists-screen-shot-2009-12-05-11.57.50-am.png  
    Last edited by wldrumstcs; 12-05-2009 at 07:22 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wldumstcs,
    Have you set margin:0; on the ul?
    Better yet, I always put a reset at the beginning of my css. Like this - *{margin:0;padding:0;}

    You don't say what browser your seeing this shift in. I think IE6 may default the left margin for bullets even if you specify the ul not to use them.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    wldrumstcs (12-05-2009)

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Hey Excavator. Thanks for taking the time to help. I figured out the issue within like 5 minutes of posting this. It turns out I need to put margin-left:-2.5em; under #foodMenu. I am using FF. Once again though, thanks!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Did you try the reset first? I'm not a big fan of negative margins unless they are really needed to accomplish an effect your after.

    This seems to work -
    Code:
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    ul, li{list-style:none;}
    
    #foodMenu{
    	height:0px;
    	padding-bottom:36px;
    	background: #0f0;
    	
    	/*padding:0px 78px 36px 0px;*/
    	/*width:150px;*/
    }
    #foodMenu ul {background: #f00;}
    #foodMenu .dropDownMenu li {
    	float:none;
    	/*width:150px;*/
    }
    #foodMenu .dropDownMenu li a{
    	display:block;
    }
    
    #foodMenu .subDropDownMenu li:hover ul, li.over ul {
    	display:block;
    }
    
    #foodMenu ul .subDropDownMenu {
    	border:solid 1px #004A66;
    	background:#FFFFFF;
    	position:relative;
    	width:150px;
    	padding:0px 0px;
    	clear:both;
    	z-index:100;
    	display:none;
    }
    #foodMenu ul .subDropDownMenu li{
    	background:none;
    	display:block;
    	float:none;
    	border:0;
    	height:auto;
    	line-height:normal;
    	border-bottom:solid 1px #004A66;
    }
    #foodMenu .subDropDownMenu li a{
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	line-height:normal;
    }
    #foodMenu .subDropDownMenu li a:hover{
    	background:#5195CE;
    	color:#FFF;
    }
    </style>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Works great! Thanks!
    Last edited by wldrumstcs; 12-05-2009 at 07:22 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wldrumstcs View Post
    For some reason when I did that, it reset everything.
    Yes, that's why it's called the reset.
    Different browsers have different defaults. If you zero out the defaults, you can set your own so they are the same in all browsers.
    Check out the link in my first reply.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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