0

I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.

I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.

Here is the link to the demo: Demo blog

Essentially, what I've done is created an absolutely positioned div, with an inside image:

<div id="logo2">
  <a href="">
    <img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
  </a>
</div>

and the associated CSS:

#logo2 {
  position:absolute;
  top: -25px;
  right: -50px;
  z-index: 999;
}

I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.

I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.

Per @Dubious' suggestion, I added the following without success (the image is still clipped):

.tabs-outer, .tabs-inner {
    <!-- [if ie 9]>
      z-index: -1;
    <![endif]>
    position: relative;
}
erik
  • 3,810
  • 6
  • 32
  • 63

1 Answers1

3

Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"

Edit:

Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.

So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.

Conditional Comments

I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.

I really hope this solves your problem, good luck!

JonahAaron
  • 398
  • 1
  • 9
  • I see... I did not think to check it in chrome, is done in fact fix the problem in IE oddly enough. – JonahAaron Aug 08 '12 at 01:33
  • You could try adding an IE9 conditional comment (http://stackoverflow.com/a/7364911/1073053) to only add a z-index of -1 for IE9. – JonahAaron Aug 08 '12 at 01:46
  • Edited answer to explain why the problem was occurring. – JonahAaron Aug 09 '12 at 13:48
  • Thanks, your mention of IE7 was spot on. Apparently blogger was forcing it to render in IE7 quirks mode. I simply commented that meta tag out, and now it is working just fine. – erik Aug 09 '12 at 20:01