What ie-specific CSS do I need to add to my WordPress site to fix this issue?

2 comments

1. You are presently using negative margins to adjust layout, which is giving wildly different results in all three major rendering engines (Trident, Blink, and Gecko). I would advise against this, as it’s likely these vendors will need to discuss whose approach is correct, or if all three need to adjust to be in better conformance with a fourth alternative.

   The primary issue is is the over-hang of your logo beyond your negative margin. If you were to position the image absolutely, you could get more consistent results. However, upon doing so you will need to restore the layout of your header since a crucial element will no longer contribute to its dimensions.

   #logo {
       position: absolute;
   }
   
   #main-header {
       min-height: 160px;
   }
   

   The above two rules appear to restore the layout for me in IE, and Firefox. That being said, I still think Chrome may be in the wrong here – you should always test your layout regularly in all three major browsers to ensure you aren’t building on top of a browser bug.

   I work on the Internet Explorer team, and have filed an issue internally for us to investigate this particular layout anomaly further. I’ve created a reduced demo of the issue as a public fiddle as well.

   If you need to test Internet Explorer from a Mac in the future, please visit http://modern.ie.

   Log in to Reply

2. Thank you all for the help. I was having a mental blockage and once again this community helped me to move forward.

   Jonathan Sampson was correct that the root cause was that the CSS was not originally done correctly. I did the CSS edits myself and I am self-taught, so this was no surprise to me, haha. However, I had already come up with a solution.

   My Solution:

   I used the famous CSS Browser Selector script which can be found here: http://rafael.adm.br/css_browser_selector

   I added it to my JS folder (mysite.com/wp-includes/js/css_browser_selector.js) and then added:
   <script src="css_browser_selector.js" type="text/javascript"></script>
   right before the </head> tag in the header.php file.

   At that point I was able to just create browser-specific CSS. It’s dumb that FF and IE are so picky when it originally worked fine how I had it in both Chrome and Safari… But oh well.

   Here is the code for Chrome/Safari vs. the code for Firefox/IE:

   Chrome/Safari (Webkit):

   .webkit #logo {
   margin-bottom: 10px;
   max-height: 110px;
   position: relative;
   z-index: 99999;
   background: #fff;
   border-radius: 150px;
   border: 20px solid #fff;
   }
   .webkit #main-header {
   padding: 10px 0 0 0;
   margin-bottom: -65px;
   margin-top: -20px;
   }
   

   Firefox (and same used for IE as well):

   .gecko .et_pb_slider {
   top: -60px;
   margin-bottom: -63px;
   }
   .gecko #logo {
   margin-bottom: 10px;
   max-height: 110px;
   position: relative;
   z-index: 99999 !important;
   background: none repeat scroll 0% 0% #FFF;
   border: 20px solid #FFF !important;
   border-radius: 150px;
   }
   .gecko #main-header {
   margin-top: -20px;
   }
   

   So yeah I didn’t see Jon’s answer until after I had “fixed” the issue. So, I will leave it as is.. although I’m sure my CSS is very sloppy! 😛

   Screenshot of IE browser now that it is fixed:
   http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3

   Thanks,
   Chris

   Log in to Reply