Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-06-25
7
Medium Priority
?
1,049 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
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!

 
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 1000 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

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!

Question has a verified solution.

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

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.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 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