garethtnash
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 -
And I thought I had my CSS correct -
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
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 & Offers</a></li>
</ul></li>
<li> </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
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.
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
.subright ul li,.subright ol li{
margin: 0;
padding: 0;
display:block
}
Hope this works for you
- Jayant
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?
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I've just changed PC and you are correct, it looks OK...
Where is the compatibility view switch?
Thanks
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you
I use firefox and ie8 and don't see the problem