#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14

    CSS padding problem


    Im running IE6 and its on an Intranet so for the moment Im only keen on getting it to work in IE5/6.

    I have got the following HTML and CSS.

    When I remove the CSS 'display: block; padding-bottom: 0px;' the links list views fine, but when I include it, the list spaces right out and I can't control the level of padding. Its really weird.. Im pretty sure this is where the error is but Im not exactly sure what it is.. I have not had problems in the past implementing a display type of BLOCK before, so not sure what is doing it now... Any ideas would be great...

    Can post the whole template and assets if that helps...

    Code:
    <ul><li class="mainNav"><a href="about.htm" onMouseOver="MM_showMenu(window.mm_menu_1111120312_5,180,160,null,'navigation1');" onMouseOut="MM_startTimeout();">About Us</a></li>
    <li class="mainNav"><a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1015140727_0,170,170,null,'navigation1');">Our Programs</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020105028_0,170,185,null,'navigation1');">Managing our People</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020115125_0,170,195,null,'navigation1');">Managing our Money</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();"
    onMouseOver="MM_showMenu(window.mm_menu_1020121338_4,170,220,null,'navigation1');">Supporting our Business</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121623_3,170,235,null,'navigation1');">Ministerial and Parliamentary</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121709_2,170,255,null,'navigation1');">IT Systems &amp; Support</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121752_1,170,275,null,'navigation1');">Staff New &amp; Events</a></li>
    <li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121857_0,170,290,null,'navigation1');">Staff &amp; Territory Offices</a></li>
    </ul>
    
    ##############
    CSS
    li.mainNav {
    	list-style: url('../images/common/navarrow.gif');
    	margin-bottom: 5px;
    	font-size : .80em;
    	
    }
    li.mainNav a:link {
    	display: block;
    	padding-bottom: 0px;
    	color: #283164;
    	text-decoration: none;
    }
    li.mainNav a:visited{
    	display: block;
    	padding-bottom: 0px;	
    	text-decoration: none;	
    }
    li.mainNav a:hover {
    	display: block;
    	padding-bottom: 0px;
    	text-decoration: underline;
    }
    li.mainNav a:active {
    	display: block;
    	padding-bottom: 0px;
    	text-decoration: underline;
    }
    Last edited by Phil_work; January 20th, 2004 at 12:47 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    49
    Rep Power
    11
    I pulled the display: block; up from the psuedo class and into the li.mainNav. The spacing disappeared. I believe by default that li is a block item anyway so you do not even need it.

    What is the effect you are trying to produce?

    adam
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    The <li>'s are a pop up menu..

    What I want is the BLOCK to be created so when I rollover the BLOCK the menu is invoked. At the moment without the block it is when yoiu roll over the text.

    As the text is different lengths it looks a bit funny, so I wanted the mouseOver area to be the same regardless of the length of text
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    49
    Rep Power
    11
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    thanks Adam, I will give that a go..

    The menu code I have was produced by FireWorks and it is very big, just that menu adds 59kb to the page without even loading content and imagery,

    Rekon I will give that site's menu ago,,
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    49
    Rep Power
    11
    Its amazing how well pure CSS solutions can deliver efficient, beautiful, and functional sites! Hope it works out... A List Apart (ALA) has some awesome articles besides this one.

    Adam
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    I built my first ever 3 column layout with CSS from that site... Don't check it out enough unfortunatly..

    Also I read the article and some of the discussions about it and it doesn't cater for another level of nav.. But thats cool it will work for a different site...

IMN logo majestic logo threadwatch logo seochat tools logo