Solved

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

Posted on 2008-06-25
7
1,037 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

864 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now