Solved

Trying to remove the auto padding that an ul and li is placing between ul's

Posted on 2008-06-25
7
1,043 Views
Last Modified: 2012-08-13
I have three unordered lists essentially stacked on top of one another. I want to remove the padding between these three unordered lists so that there is maybe 5px between them instead of the 50 that is defaulting in here.

I have tried adding padding: 0; to each ul and li class but that is not working. Any suggestions?

Thanks

<style type="text/css">
<!--
#brandcontainer {
	width: 950px;
	padding-right: 5px;
	padding-left: 5px;
	text-align:center;
}
ul#brandlist
{
padding: 0 0 0 0;
white-space: nowrap;
}
 
#brandnavlist li
{
display: inline;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding:0 0 0 0;
}
 
#brandnavlist a { padding: 0 10px 0 0; }
 
#brandnavlist a:link, #navlist a:visited
{
color: #666;
text-decoration: none;
}
 
#brandnavlist a:hover
{
color: #fff;
background-color: #cc0000;
text-decoration: none;
}
-->
</style>
<div><img src="content/images/2008/SPLASH-landing.jpg" width="960" height="360"></div>
<div id="brandcontainer">
	<ul id="brandnavlist" style="font-size:32px;">
		<li><a href="#">ELEMENTS</a></li>
		<li><a href="#">VISION STREET</a></li>
		<li><a href="#">VOX</a></li>
		<li><a href="#">QUICKSILVER</a></li>
		<li><a href="#">ADIDAS</a></li>
	</ul>
    <ul id="brandnavlist" style="font-size:25px;">
		<li><a href="#">ELEMENTS</a></li>
		<li><a href="#">VISION STREET</a></li>
		<li><a href="#">VOX</a></li>
		<li><a href="#">QUICKSILVER</a></li>
		<li><a href="#">ADIDAS</a></li>
        <li><a href="#">PONY</a></li>
        <li><a href="#">VOX</a></li>
	</ul>
    <ul id="brandnavlist" style="font-size:17px;">
		<li><a href="#">ELEMENTS</a></li>
		<li><a href="#">VISION STREET</a></li>
		<li><a href="#">VOX</a></li>
		<li><a href="#">QUICKSILVER</a></li>
		<li><a href="#">ADIDAS</a></li>
        <li><a href="#">VOX</a></li>
		<li><a href="#">QUICKSILVER</a></li>
		<li><a href="#">ADIDAS</a></li>
        <li><a href="#">ELEMENTS</a></li>
	</ul>
</div>

Open in new window

0
Comment
Question by:macegruvy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
7 Comments
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21870270
Add this as the first CSS style:

* {
 margin: 0;
 padding: 0;
}

Thanks,
Brad
0
 

Author Comment

by:macegruvy
ID: 21870294
OUTSTANDING. Thanks bdobyns, I was unaware you could * (wildcard) styles. nice.
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21870293
If you do that, then you should be able to have it do what you want:
<div><img src="content/images/2008/SPLASH-landing.jpg" width="960" height="360"></div>
<div id="brandcontainer">
        <ul id="brandnavlist" style="font-size:32px;margin-bottom: 5px;">
                <li><a href="#">ELEMENTS</a></li>
                <li><a href="#">VISION STREET</a></li>
                <li><a href="#">VOX</a></li>
                <li><a href="#">QUICKSILVER</a></li>
                <li><a href="#">ADIDAS</a></li>
        </ul>
    <ul id="brandnavlist" style="font-size:25px;margin-bottom: 5px;">
                <li><a href="#">ELEMENTS</a></li>
                <li><a href="#">VISION STREET</a></li>
                <li><a href="#">VOX</a></li>
                <li><a href="#">QUICKSILVER</a></li>
                <li><a href="#">ADIDAS</a></li>
        <li><a href="#">PONY</a></li>
        <li><a href="#">VOX</a></li>
        </ul>
    <ul id="brandnavlist" style="font-size:17px;">
                <li><a href="#">ELEMENTS</a></li>
                <li><a href="#">VISION STREET</a></li>
                <li><a href="#">VOX</a></li>
                <li><a href="#">QUICKSILVER</a></li>
                <li><a href="#">ADIDAS</a></li>
        <li><a href="#">VOX</a></li>
                <li><a href="#">QUICKSILVER</a></li>
                <li><a href="#">ADIDAS</a></li>
        <li><a href="#">ELEMENTS</a></li>
        </ul>
</div>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21870296
Yep. Makes things work much better. :o)
0
 
LVL 7

Accepted Solution

by:
Brad Dobyns, CSM earned 250 total points
ID: 21875480
If you are satisfied with the answer, would you please go ahead and close the question? :o)

Thanks,
Brad
0
 

Author Closing Comment

by:macegruvy
ID: 31470742
Apologies. I thought I closed this out last night. Thanks again.
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 21875617
No problem. Thanks for the points. :o)

Brad
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question