Forums

shemademagic

Hey guys,

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

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

JoshBlackwood

I fired up a clean instance of IE9 in a virtual machine running a clean install on Windows 7, and it looks identical to what I see in the latest versions of Chrome and Firefox on Mac OS X (Mountain Lion).

To fix the white-space, you can do one of two things—add HTML comments between your li elements, like so:

&lt;ul&gt;
  &lt;li&gt;&lt;/li&gt;&lt;!--
 --&gt;&lt;li&gt;&lt;/li&gt;&lt;!--
 --&gt;&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;

Or you can set font-size:0; on the ul and then add it back on the li.

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

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.

treehouse : what would you like to learn today?

Forums

[Solved] URGENT! Several compatibility issues in IE