The site is here. I usually use Chrome and it looks fine, but for some reason when I view it in IE, the menu goes to the bottom and the sidebar moves slightly to the right.

The code containing the menu plugin is below:

#sidebarbox
{
position:fixed;
z-index:5;
left:0px;
top:235px;
font: 12px arial;
text-align:center;

}

Any idea why it’s flocked towards the bottom like that in IE?

I’m having a weird issue that only occurs in IE (surprise.. surprise.) I had hard coded some links in the header file, which looks fine in every other browser. But when I use IE, the site looks fine but the links are not links. They render as plain text.

The site is www.anthonylaurence.net

I thought that there might be an issue with layering with the z-index, so I a conditional statement to give it a z-index of 4 so that it should be the topmost layer. But no dice…..

Does anyone have a clue what the issue is and how to fix it?

body{
text-align:center;
background-color: #CCCCCC;
border-top: 10px #999999 solid;
border-bottom: 10px #CC0000 solid;
border-left: 10px #000000 solid;
border-right: 10px #000000 solid;
}

div#header{
height: 285px;
position:relative;
margin-left:0px;
}

#header_image{
position:absolute;
margin-left:20px;
margin-top:15px;
}

div#container{
text-align:left;
}

div#container{
width:1000px;
margin: 0px auto 0em auto;
background-color:#FFFFFF;
}
div#wrapper{clear:both;
width:485px;
float:left;
}

div#content{
margin-top: 25px;
_margin-top: 100px; /* IE Fix */
margin-left: 25px;
border-top: 1px #CCCCCC solid;
margin-left: 10px;
margin-right: 10px;}

div#content_page{
text-align:left;
width:778px;
height:600px;
}

div#navigation{
overflow:inherit;
float:left;
margin-left: 85px;
margin-top: 25px;
width:300px;
margin-bottom: 1em;
border-top: 1px #CCCCCC solid;
}

div#extra{
position:absolute;
margin: 0;
padding: 0;
left:0;
right:0;
top:15px;
height:285px;
margin-left: 200px;
clear:both;}

div#footer{
clear:both;
width:100%;
height:50px;
text-align: right;
padding-bottom: 15px;}

/*navbar*/

#nav{
position:absolute;
margin: 0;
padding: 0;
right:22px;
bottom: -10px;
width:600px;
}
#navbar{
float: right;}

ul#navbar{
margin:0;
padding:0;}
#navbar li{
display: inline;
}

#navbar li a{
float: left;
color: #000000;
margin-left: 1px;
text-align: left;
font-size: 10px;
line-height: 15px;
padding-left: 5px;
padding-right: 5px;}

What I have in the header.php:
<!–[if IE ]>
<link rel=”stylesheet” href=”iefix.css” type=”text/css” />
<![endif]–>

IE CSS:
div#extra{
position:relative;
float:left;
margin: 0;
padding: 0;
left:0;
right:0;
top:15px;
height:285px;
clear:both;}

I am not sure what is happening with my site. But in Internet explorer it showes part of the top of the header, actually, right beneath the header.

Thanks in advance.

<!–[if IE 7]><link rel=”stylesheet” type=”text/css” href=”style2.css”><![endif]–>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Any help to get this working will be great. Thanks.