Inline List Items not Padding in IE 5!

[mumford]

Could somebody please help me! go to [omegadm.co.uk...] and look at the bottom numbers (1-5) these are inline list items.

They do what there supposed to do in all the browsers except IE 5.

Somebody please tell me what i am doing wrong and how to get them to render properly in IE 5

Below is the CSS :

/* ====================================================================
Elements
-------------------------------------------------------------------- */
body{
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:0;
background-color:#fff;
text-align:center;
background-image:url(images/bground.gif);
background-repeat:repeat;
}
p{
padding: 0 0 0 22px;
margin-top:0px;
margin-bottom:0px;
font:11px/18px Verdana, Arial, Helvetica, Geneva, sans-serif;
}
a{
font:11px Verdana, Arial,Geneva, Helvetica, sans-serif;
text-decoration:underline;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
color:#FF7911;
}
a:hover{
font:11px Verdana, Arial,Geneva, Helvetica, sans-serif;
text-decoration:none;
margin:0 0 0 0;
padding:0 0 0 0;
color:#D9D9D1;
}
a:visited{
font:11px Verdana, Arial,Geneva, Helvetica, sans-serif;
text-decoration:none;
margin:0 0 0 0;
padding:0 0 0 0;
color:#676752;
}

/* ====================================================================
Classes
-------------------------------------------------------------------- */
#wrapper{
width:760px;
text-align:left;
border:1px solid #000000;
voice-family: "\"}\"";
voice-family: inherit;
width:758px;
background-color:#fff;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
/*for Opera*/
html > body #wrapper{
width:758px;
background-color:#fff;
}
#header{
height:60px;
width:758px;
background-color:#fff;
color: #000;
border-top:7px solid #676752;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;

}
.textorange{
font:bold 14px Trebuchet MS, Verdana, Arial, Helvetica, Geneva, sans-serif;
color:#FF7911;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#logo{
float:left;
width:30px;
height:30px;
voice-family: inherit;
border:1px solid red;
padding:0 0 0 0;
margin:15px 0 0 10px;

}
#logotext{
float:left;
width:225px;
height:30px;
font:bold 14px Trebuchet MS, Verdana, Arial, Helvetica, Geneva, sans-serif;
voice-family: inherit;
border:1px solid red;
padding:5px 0 0 0;
margin:15px 0 0 10px;
color:#353568;
}
#titleblock {
height:89px;
background-color:#000;
border-bottom:1px solid #fff;
color: #fff;
voice-family: inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#navbar {
height:21px;
background-color:#000;
width:758px;
voice-family: inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#rightcontent {
float:right;
background-color:#EFEEE9;
width:111px;
border-top:1px solid #000;
text-align:right;
font:9px Verdana, Arial, Helvetica, Geneva, sans-serif;
voice-family: inherit;
margin:0 0 0 0;
padding:0 0 5px 0;
}
#rightcontent ul{
color:#676752;
voice-family: inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#EFEEE9;
}
#rightcontent ul li{
list-style-type: none;
color:#676752;
margin:0;
padding-right:10px;
voice-family: inherit;
margin:10px 5px 0 0;
padding:0 0 0 0;
background-color:#EFEEE9;
}
#rightcontent li a{
list-style-type: none;
color:#676752;
text-decoration:none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
voice-family: inherit;
}
#rightcontent li a:hover{
list-style-type: none;
color:#000;
voice-family: inherit;
}
#maincontent {
float:left;
width:645px;
background-color:#fff;
border-right:1px solid #000;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
voice-family: inherit;
}
#titlebox {
float:right;
width:111px;
height:89px;
background-color:#D9D9D1;
border-left:1px solid #fff;
font:bold 16px Trebuchet MS, Verdana, Arial, Helvetica, Geneva, sans-serif;
text-align:center;
color:#676752;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
voice-family: inherit;
}
#taglinebox {
float:left;
width:172px;
height:89px;
background-color:#676752;
border-right:1px solid #fff;
voice-family: inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#headerimages {
float:left;
width:473px;
height:89px;
background-color:#676752;
voice-family: inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#bottomlinks ul{
white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color: #fff;
color:#676752;
voice-family: inherit;
}
#bottomlinks ul li{
display: block;
list-style-type: none;
display: inline;
padding: 0 0 0 40px;
margin:10px 5px 0 0;
font:bold 10px Verdana, Arial, Helvetica, Geneva, sans-serif;
background-color: #fff;
color:#676752;
voice-family: inherit;
}
#bottomlinks li a{
display: block;
list-style-type: disc;
display: inline;
background-color: #fff;
font:bold 10px Verdana, Arial, Helvetica, Geneva, sans-serif;
color:#676752;
text-decoration:none;
voice-family: inherit;
}
#bottomlinks li a:hover{
display: block;
list-style-type: disc;
display: inline;
background-color: #fff;
color:#000;
voice-family:inherit;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#footer {
clear: both;
width:758px;
background-color:#fff;
color: #333333;
border:1px solid black;
border-width:1px 0 0 0;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align:center;
voice-family: inherit;
}
.smallbr {
clear:both;
font:8px Verdana, Arial, Helvetica, Geneva, sans-serif;
height:8px;
background-color:#fff;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.smallbr2 {
clear: both;
font: 7px Verdana, Arial, Helvetica, Geneva, sans-serif;
height:7px;
background-color:#fff;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.medbr {
clear: both;
font: 8px Verdana, Arial, Helvetica, Geneva, sans-serif;
height:8px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#fff;
}
.largebr {
clear: both;
font: 25px Verdana, Arial, Helvetica, Geneva, sans-serif;
height:25px;
background-color:#fff;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.onepixspacer{
clear: both;
font: 1px Verdana, Arial, Helvetica, Geneva, sans-serif;
height: 1px;
line-height: 1px;
background-color:#fff;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

Below is the HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<LINK rel="stylesheet" href="app_stylesheet_new.css" type="text/css" />
<META name="keywords" content="search engine, promotion, optimisation, positioning, placement, marketing, web site promotion, web site optimisation, optimization, SEO, uk" />
<META name="description" content="Search engine promotion by Search Engine Professionals - an established UK specialist." />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div align="center">
<div id="wrapper">
<div id="header"></div>
<div id="titleblock">
<div id="taglinebox"></div>
<div id="headerimages"></div>
<div id="titlebox">welcome</div>
</div>
<div id="navbar"></div>
<br class="medbr">
<div id="maincontent"><p>Main</p></div>
<div id="rightcontent">
<ul>
<li>request proposal</li><li>call a professional</li><li>see results</li><li>free newsletters</li><li>white papers</li>
</ul>
</div>
<br class="onepixspacer">
<div id="footer">
<div id="bottomlinks">
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

Thanks for any help

[BlobFisk]

Welcome to WebmasterWorld, mumford!

You may want to trim down you code to only the relevant CSS and HTML, as it makes it very cumbersome to read, and people are less inclined to wade through the mass of code to find the relavent piece! Please review the TOS [webmasterworld.com] regarding posting URL's.

Why do you have both display:block and display:inline in your ul and li CSS? Also, could you describe what is happening in IE5 - this may help in diagnosing the issue.

[mumford]

point taken sorry! What happens in IE5 is that all the numbers are crunched up together there is no spacing between the numbers.

Here is the relevant CSS :

#footer {
clear: both;
width:758px;
background-color:#fff;
color: #333333;
border:1px solid black;
border-width:1px 0 0 0;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align:center;
voice-family: inherit;
}
#bottomlinks ul{
white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color: #fff;
color:#676752;
voice-family: inherit;
}
#bottomlinks ul li{
list-style-type: none;
display: inline;
padding: 0 0 0 40px;
margin:10px 5px 0 0;
font:bold 10px Verdana, Arial, Helvetica, Geneva, sans-serif;
background-color: #fff;
color:#676752;
voice-family: inherit;
}

[BlobFisk]

Try adding a left margin in #bottomlinks ul li?

[mumford]

i already tried adding margin-left:20px;

still not worky!

[SuzyUK]

I think it only adds padding on block-level items, so try making the li's display: block; float: left;

haven't got IE5 to test this though

Suzy

[mumford]

thanks suzy!

That seemed to work but it now screws up in netscape 6, could you please take a look!

Just getting this template to look right in the browsers has been a nightmare!

[SuzyUK]

hi mumford, sorry not too much time to test, but are you referring to the list floating right over to the left now?

I notice that you have list link classes, if the items are all going to be links, you could go back to your original way but remove the padding from the <li> and make your links display: block and add padding: 0 20px; to them instead?

Suzy

[mumford]

nice one! that seems to of done the trick

Suzy x