Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1055
  • Last Modified:

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

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
macegruvy
Asked:
macegruvy
  • 5
  • 2
1 Solution
 
Brad Dobyns, CSMScrumMasterCommented:
Add this as the first CSS style:

* {
 margin: 0;
 padding: 0;
}

Thanks,
Brad
0
 
macegruvyAuthor Commented:
OUTSTANDING. Thanks bdobyns, I was unaware you could * (wildcard) styles. nice.
0
 
Brad Dobyns, CSMScrumMasterCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Brad Dobyns, CSMScrumMasterCommented:
Yep. Makes things work much better. :o)
0
 
Brad Dobyns, CSMScrumMasterCommented:
If you are satisfied with the answer, would you please go ahead and close the question? :o)

Thanks,
Brad
0
 
macegruvyAuthor Commented:
Apologies. I thought I closed this out last night. Thanks again.
0
 
Brad Dobyns, CSMScrumMasterCommented:
No problem. Thanks for the points. :o)

Brad
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now