Could somebody please help me! go to http://www.omegadm.co.uk/index_new.htm 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>
<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>
<div id="maincontent"><p>Main</p></div>
<div id="rightcontent">
<li>request proposal</li><li>call a professional</li><li>see results</li><li>free newsletters</li><li>white papers</li>
</div>
<div id="footer">
<div id="bottomlinks">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</div>
</div>
</div>
</div>
</html>
Thanks for any help
Inline List Items not Padding in IE 5!!
It appears it may be a box model problem in IE. I suggest using Tanteks Box Model Hack. http://tantek.com/CSS/Examples/boxmodelhack.html.
Good Luck!
Various box model hacks
Here is a good list of various box model hacks and the drawbacks of each. Depending on what browsers you need to support fully and what browsers you can let your layout degrade in.
I personally use method 3 most often as it seems the most straight forward to my mind.