Link to home
Start Free TrialLog in
Avatar of garethtnash
garethtnashFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Whats Wrong with my CSS??

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>

Open in new window


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;
}

Open in new window


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
Avatar of Eyal
Eyal
Flag of Israel image

in what browser do you see the problem?
I use firefox and ie8 and don't see the problem
ie9 does not show that whitespace either. I think CSS is correct.

Maybe you should consider some kind of CSS reset before applying your own styles, to clear possible undesired defaults. Look here for a good one.
Add display:block property in css

.subright ul li,.subright ol li{
      margin: 0;
      padding: 0;
        display:block
}

Hope this works for you

- Jayant
Avatar of garethtnash

ASKER

Hi All,

I'm using IE9...

As above FF doesn't cause an issue -

Jayant added Display Block - still showing the whitespace..

Is it possible that it is just my IE9?
SOLUTION
Avatar of miguelangelcampos
miguelangelcampos
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I've just changed PC and you are correct, it looks OK...

Where is the compatibility view switch?

Thanks
It is normally at the end of the address bar of the browser, an icon looking like a paper sleeve cut in two halves, right after the search icon. It looks dimmed when inactive, and blueish when active.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you