Perfect in Chrome/FF, too much padding in IE6


I have a very basic bit of navigation on my site.

It looks great in Chrome/FF, but in IE6 some of the list items have too much padding-top.

I would love to get some help with this. Always seem to get stuck at these points.

I have attached the code below.

It’s in the ul#mainnav where the issue lies.

Many thanks

<!DOCTYPE html>

<html dir="ltr" lang="en-US">


<meta charset="UTF-8" />

<title>ie6 Test</title>

<meta name="generator" content="WordPress 3.0" />

<style type="text/css">


/* CSS Document */

body{font: 76&#37; arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
#navigation a{display:block;color: #981793;padding:10px}

/* Resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
:focus {
	outline: 0;
body {
	color: #515151;
	background: #fff;
	font: 100.1%/120% Arial, Helvetica, sans-serif;
ul {
	list-style: none;

ul, ol, li, dl, dt, dd {
		margin: 0;
		padding: 0;

/**************** General rules *********************/
html{height:100%; }
body {height:101%; line-height:110%; color: #000; text-align: left;}

table {
	vertical-align: baseline;
	border-collapse: separate;
	border-spacing: 0;
caption, th, td {
	text-align: left;
	font-weight: normal;
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
blockquote, q {
	quotes: "" "";
pre, code { 	
    display: block; 	
    margin: 25px 0; 
    padding: 15px; 
	border-left: 3px solid #abb0b0; 
    background: #e0e5e5;
	font-size: 1.5em;
p > code { 	
	font-size: 1.0em;
	line-height: 1.2em;
pre code { 
	border: none; 
acronym {
	cursor: help;
	border-bottom: 1px dashed #333;
strong {
	font-weight: bold;
em {
	font-style: italic;
hr {
	display: none;
.right {
	float: right;
.left {
	float: left;
.hide {
	display: none;
.clear {
	clear: both;
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
.clearfix {
	display: block;
html[xmlns] .clearfix {
	display: block;
* html .clearfix {
	height: 1%;

/********************** Other Stuff ******************/ 
abbr, acronym, .help {border-bottom: 1px dotted #333;cursor: help;}  
blockquote {background: url(/images/quotemarks.gif) left top  no-repeat;margin-left:22px;padding-left:10px;margin-bottom:40px;}
cite {background: url(/images/quotemarks1.gif) right top no-repeat;padding:5px 20px 0 10px; margin-top:-10px;text-align:right;float:right;width:80%; font-style:normal;font-weight:bold;}
#sidebar2 blockquote {margin-top:20px;}
#sidebar2 cite {font-size:70%;margin-top:-15px;width:90%;}
sup {font-size:70%;}
hr {height: 1px;background-color: #E5E5E5;color: #E5E5E5;border: none;padding: 0;margin: 1em 0;}
#result_report, #results {margin-left:20px;}
.haslayout {position:absolute;}
/***************** Clearfix ****************/
.clearfix:after {content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden;}
/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

div#holder{text-align:left;width:900px;margin:0 auto}

#navigation ul#mainnav {display:block;background:#949599 url('/wp-content/themes/twentyten/images/nav-bar-bottom.jpg') bottom left no-repeat;height:430px;list-style:none;margin:20px 0 0 0;padding:15px 0 0 0}
#navigation ul li {margin:0;padding:0;}
#navigation ul li a, #navigation ul li a:link {font-size:0.9em;text-decoration:none;color:#fff;border-bottom:1px solid #555759;padding:6px 14px 5px 14px;margin-top:0}

#navigation ul li.current_page_item a, #navigation ul li.current_page_parent a {background:#fff url('/sourceturkey/wp-content/themes/twentyten/images/arrow.jpg') center right no-repeat;color:#874D12;border:0}

#navigation ul li.current_page_item ul, #navigation ul li.current_page_item ul li, #navigation ul li.current_page_item ul li a,
#navigation ul li.current_page_parent ul, #navigation ul li.current_page_parent ul li, #navigation ul li.current_page_parent ul li a {background:#874D12!important;color:#fff!important}




  <div id="holder">
    <div id="wrapper">
      <div id="maintext">    
    		<div id="container">
    			<div id="content" role="main">
    			</div><!-- #content -->
    		</div><!-- #container -->
    <div id="navigation">
      <ul id="mainnav">
        <li id="flexipages-2" class="widget-container flexipages_widget">
        	<li class="page_item page-item-2"><a href="/" title="Home">Home</a></li>
        	<li class="page_item page-item-8"><a href="/?page_id=8">Lorem ipsum</a></li>
        	<li class="page_item page-item-10 current_page_item"><a href="/?page_id=10">Lorem ipsum</a>	
          		<li class="page_item page-item-58"><a href="/?page_id=58" title="Case Study 1">Case Study 1</a></li>
          		<li class="page_item page-item-60"><a href="/?page_id=60" title="Case Study 2">Case Study 2</a></li>
          		<li class="page_item page-item-62"><a href="/?page_id=62" title="Case Study 3">Case Study 3</a></li>
        	<li class="page_item page-item-26"><a href="/?page_id=26" title="Contact Us">Contact Us</a></li>

  		</div><!-- #primary .widget-area -->  
    <div id="extra">

When i hear about too much padding on IE i think about double margin/padding bug on floated elements. One trick (maybe is not the good one) is to declare your padding with !important statement (for your FF CHROME, etc) and underneath another line with half padding. This way, because IE6 can’t recognize !important will overwrite the first line

Thanks for the reply Johnny.

Unfortunately I’ve given that a shot and don’t seem to be much further forward.

Any ideas?

Thanks again for looking at the thread.

Can someone take a look at this and point me in the right direction?

Thank you