CSS Internet Explorer骇客

Question

Im using a rockettheme template and have edited some of the css code using a custom css file.

I have managed to get it how I want it to look on Firefox and Chrome however IE looks werid. the navigation is too low (the buttons) and the header is also too low.

The website link is found below.

http://www.colmanprint.co.nz/rfloorings/

as you can see on the link the menubar is down too low and the header.

at the moment im using a css code edit .rt-menubar {padding: 0px !important; margin-left:210px;} when i remove the margin-left:210px; it fixes my problem but then the menu goes behind the logo on chrome and firefox.

so i pretty much need to keep the margin-left:210px for chrome and firefox but have margin-left:0px for internet explorer

any ideas would be great!

Answer 1

For versions of Internet Explorer up to IE9, you could use conditional comments to differentiate between IE and other browsers.

Here's a quick example:

<!--[if IE]> 
  <link rel="stylesheet" type="text/css" href="ie9-and-below.css" />
<![endif]-->

Then in ie9-and-below.css you could apply a style such as:

#ieParagraph.rt-menubar {
   margin-left:0px;
}

Where your HTML could look like so:

<div class="rt-menubar" id="ieParagraph">
   <ul>Other stuff here...</ul>
</div>

If no styling was applied in your other stylesheets to #ieParagraph where the class was also .rt-menubar , this would only change the left margin of the #ieParagraph div to 0px in IE9 and under only .

---

For IE10, conditional comments have been removed - look into using Modernizr for feature detection.