IE compatibility

[jhatter]

Hi, Please can you take a look at this site test page in IE and let me know what I can do to make the top nav bar look as it does when viewed in Firefox and Safari?
Thanks!

http://www.actonfunrun.co.uk/index_css.html

Here is the css:

.indentmenu{
font: bold 11px Arial;
width: 771px; /*leave this value as is in most cases*/
overflow: hidden;
margin-top: 2px;
margin-left: 19px;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 771px; /*width of menu*/
background:url(images/funrun-navbar.png) center center repeat-x;
top: 2px;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
line-height: 56px;
padding: 5px 16px;
text-decoration: none;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
text-decoration: underline;
color: green; /*text color*/
background: url(images/funrun-navbar.png) center center repeat-x;
}

[oye]

hi

your using

font: bold 11px Arial;

Use something like this
font-size:11px;

font-family:Arial;

font-weight:bold;

It will help u alot ..

[oye]

And one more thing u r using png image in the background instead of png use gif if u r unable to use gif use png filter script which avoids black shade in ie6...

[jhatter]

Thanks for your reply.

I have replaced with a gif and altered the font declaration.

The problem I can see is that the green nav bar starts to the right of the white border/frame and over-laps it at the other end. This only happens in IE ( I have attached a screen-grab).

You can view the page at
http://www.actonfunrun.co.uk/index_css.html

The CSS is at:
http://www.actonfunrun.co.uk/funRun-1.css

Thanks