URGENT! Several compatibility issues in IE

[shemademagic]

Hey guys,

This is the website I’m working on at the moment ( & obiviously my first ) :

[Gardening Website](http://eleanorgallahergardening.co.uk/home.html “http://eleanorgallahergardening.co.uk/home.html”)

FIRSTLY – MAJOR issue – horizontal navigation with a logo in the center looks okay in all browsers, except IE 9 – I have tried everything and I can’t seem to fix it. I need it to be centered and horizontally aligned. Ideally manage to even the white space between li’s as it renders in Chrome. It’s killing me and I really need to finish the website asap.

This is the CSS for it:

/* Navigation */

ul#nav1 {
display: inline-block;
}

ul#nav1 li{
display: inline-block;
padding-right: 15px;
text-align: left;
margin-left: -15px;
}

#logo {
display:inline-block;
margin: 0 auto;
padding-top:10px;
margin-bottom: -10px;
}

ul#nav2 {
display: inline-block;
margin-right: -13px;
}

ul#nav2 li{
display: inline-block;
text-align: right;
padding: 5px;
}

a {
text-decoration: none;
color: black;
}

/* Dotted Underline Images*/

#homedots{
display:block;
margin-top: 5px;
margin-left: -40px;
}

#servicesdots{
display:block;
margin-top: 5px;
}

#portfoliodots{
display:block;
margin-top: 5px;
}

#contactdots{
display:block;
margin-top: 5px;
}
/* End of Dotted Underline Images*/

SECONDLY All content in IE 9 appears in italics????? I have not specified font-style in body, only for certain elements. Does anyone know how to fix it?

I would really appreciate some help!

Thank you

[wolfcry911]

or use floats…
http://codepen.io/wolfcry911/full/lFLvH

I took the liberty of redoing the page. You’ve used far too many ids and classes. My markup could use even further refining, but I just wanted to quickly show how this could be done.

[shemademagic]

Thank you @wolfcry911, much appreciated. I’ll try it out.

[shemademagic]

Hey @wolfcry911 , everything looks great but I don’t really get how this code :

#footer {
margin: 15px 0;
background: #88AF3C;
clear: both;
overflow: hidden;
}

#footer>div {
float: left;
font-size: 16px;
line-height: 22px;
color: #4E4442;
margin: 0 10px 0 20px;
}

#footer h3 {
border-bottom: 1px solid #D1E889;
color: #FFF;
font-size: 17px;
text-transform: uppercase;
}

actually aligns the footer on the left. I tried doing it but it doesn’t come out like yours?

– [This page](http://eleanorgallahergardening.co.uk/home.html “”)

[wolfcry911]

you’ve got a few errors – you’re missing the closing div tag for the #sidebar, which then places the footer within it. The .testimonial div is missing a bracket, and a break tag in the header is malformed.

[Author]

Posts