[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1051
  • 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, CSMCommented:
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, CSMCommented:
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
Technology Partners: 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!

 
Brad Dobyns, CSMCommented:
Yep. Makes things work much better. :o)
0
 
Brad Dobyns, CSMCommented:
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, CSMCommented:
No problem. Thanks for the points. :o)

Brad
0

Featured Post

Independent Software Vendors: 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!

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