troubleshooting Question

Whats Wrong with my CSS??

Avatar of garethtnash
garethtnashFlag for United Kingdom of Great Britain and Northern Ireland asked on
ASPCSSHTML
9 Comments2 Solutions214 ViewsLast Modified:
Hi Experts,

Would be grateful for a little CSS advise please...

I've been trying to build a navigation bar -

  <ol>
    <li class="header">Quick Links</li>
  <li><ul>
    <li><a href="/xxx.asp">Bulletins</a></li>
    <li><a href="/xxx.asp">Events</a></li>
    <li><a href="/xxx.asp">Supplier News &amp; Offers</a></li>
  </ul></li>
  <li>&nbsp;</li></ol>

And I thought I had my CSS correct -

@charset "utf-8";
/* CSS Document */
body,#top3 ul,#top1 .center ul,#top2 .center .top form ul,#top2 .center .bottom ul,#breadcrumbs ul,#top3 li,#top2 .center .bottom li,#top2 .center .top form li, #threecolumnleft ul, #threecolumnleft ol, #threecolumnright ul, #threecolumnright ol, .subleft ul, .subleft ol,.subright ul,.subright ol {
margin:0;
padding:0;
}
#top1 .center ul,#top1 .center li,#top2 .center .top form,#top2 .center .top form ul,.mainright,.subright,#threecolumnright {
float:right;
}
#top3 ul,#top1 .center ul,#top2 .center .top form ul,#top2 .center .bottom ul,#breadcrumbs ul, .form ul, #threecolumnleft ul, #threecolumnleft ol, #threecolumnright ul, #threecolumnright ol, .subleft ul, .subleft ol,.subright ul,.subright ol{
list-style:none;
}
.subright,.subleft,#threecolumnright,#threecolumnleft {
width:200px;
}
#threecolumnleft ul, #threecolumnleft ol, #threecolumnright ul, #threecolumnright ol, .subleft ul, .subleft ol,.subright ul,.subright ol {
	margin: 0px;
	padding: 0px;
}
#threecolumnleft ul, #threecolumnleft ol, #threecolumnright ul, #threecolumnright ol, .subleft ul, .subleft ol,.subright ul,.subright ol {
	margin: 0px;
	padding: 0px;
}
#threecolumnleft .header, #threecolumnright .header, .subleft .header, .subright .header{
	padding:5px 8px 3px 8px;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 2px solid #a1006b;
	background-color: #47002E;
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	margin: 0px;
}
.subright ul li,.subright ol li{
	margin: 0;
	padding: 0;
}
.subright ul li a,.subright ol li a{
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 5px 8px 3px 8px;
	width: 182px;
	display: block;
	border-bottom: 1px solid #ccc;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

But when I view the navigation bar here, i get whitespace between the Navigation Bar head and its links -

Which looks like the attached screendump -

Appreciate any assistance available - thanks Experts
dump.jpg
ASKER CERTIFIED SOLUTION
Lefarfadais

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros