Hi,
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">
<head>
<meta charset="UTF-8" />
<title>ie6 Test</title>
<meta name="generator" content="WordPress 3.0" />
<style type="text/css">
/* RESET LARK */
/* CSS Document */
html,body{margin:0;padding:0}
body{font: 76% 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;
padding-top:2px;
font-size:80%
}
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}
div#wrapper{float:left;width:100%}
div#navigation{float:left;width:185px;margin-left:-900px;padding-top:12px}
div#extra{float:left;width:175px;margin-left:-185px;margin-top:100px;}
#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}
</style>
</head>
<body>
<div id="holder">
<div id="wrapper">
<div id="maintext">
<div id="container">
<div id="content" role="main">
<p>test</p>
</div><!-- #content -->
</div><!-- #container -->
</div>
</div>
<div id="navigation">
<ul id="mainnav">
<li id="flexipages-2" class="widget-container flexipages_widget">
<ul>
<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>
<ul>
<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>
</ul>
</li>
<li class="page_item page-item-26"><a href="/?page_id=26" title="Contact Us">Contact Us</a></li>
</ul>
</li>
</ul>
</div><!-- #primary .widget-area -->
<div id="extra">
</div>
</div>
</body>
</html>