Solved

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

Posted on 2008-06-25
7
1,039 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
  • 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 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