CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS padding problem

Discuss CSS padding problem in the CSS Help forum on Dev Shed.
CSS padding problem Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 20th, 2004, 12:44 AM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 324 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 20 h 47 m 53 sec
Reputation Power: 8
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 & 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 & 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 & 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.
Reply With Quote
  #2  
Old January 20th, 2004, 01:31 AM
abombss abombss is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 49 abombss User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
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
Reply With Quote
  #3  
Old January 20th, 2004, 06:44 AM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 324 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 20 h 47 m 53 sec
Reputation Power: 8
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
Reply With Quote
  #4  
Old January 20th, 2004, 09:00 AM
abombss abombss is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 49 abombss User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Reply With Quote
  #5  
Old January 20th, 2004, 04:50 PM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 324 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 20 h 47 m 53 sec
Reputation Power: 8
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,,
Reply With Quote
  #6  
Old January 21st, 2004, 01:25 AM
abombss abombss is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 49 abombss User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
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
Reply With Quote
  #7  
Old January 21st, 2004, 06:10 AM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 324 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 20 h 47 m 53 sec
Reputation Power: 8
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...
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS padding problem

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway. 
Stay green...Green IT