I have an odd problem with IE8, yet it works in IE6, IE7, Firefox, and every other browser. The simplest fix I could think of was using some sort of CSS that only affects IE8 (such as the #margin: 10px; or _margin: 10px that only affects IE7 and IE6 respectively).

Does anyone know of such a fix? or something similar that I could implement? Thank you so much,

-Karl

  • Yes because again Microsoft was not able to make IE8 completely Standards compliant. IE8 will forever be retarded, and no there's not even a IE8 Conditional Comment so how to fix this? Make it act like IE7 because you need to to the adjustemnts for IE7 anyway. Marcel almost 10 years ago
  • IE8 is pretty almost completely CSS2.1 compliant. And yes, there is an IE8 conditional comment. <!--[if IE 8]>This is IE8<![endif]--> Olly Hodgson almost 10 years ago
  • Ugh, "pretty almost completely"? You wouldn't think English is my first language... ;-) Olly Hodgson almost 10 years ago

6 answers

4
points

Rather than using any sort of hacks, you can use conditional comments to affect specific IE browsers if you're having problems with them (and pretty much every site will have some).

Format for conditional comments goes like this:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

This would have code that only IE6 would see and apply. Can also use "lt" or "lte" which means "less than" or "less than or equal" (or even "gt"/"gte" for "greater than") such as this:

<!--[if lte IE 7]>
Special instructions for IE 7 and less here
<![endif]-->

This will affect IE browsers version 7 and below (less than or equal to). To add code that the IE browsers will ignore, you would use something like this:

    <![if !IE]>
Code for all browsers other than IE.
    <![endif]>

I've not tried using version numbers in the code intended for browsers other than IE (make it work properly in FireFox, then add 'fixes' for IE), but I'm sure there is probably a way to do that. Also of note, this code (strickly speaking) is not compliant html, and I've read that you can modify it to be compliant but haven't tested it. The compliant version is suppose to be something like this:

   <!-- <![if !IE]> -->
Code for all browsers other than IE.
    <!--<![endif]>-->

One thing I try and do when fixing IE bugs, is to make sure the css code that is not displaying correctly is contained in an external css file, then apply the conditional comment in the 'style' section of the document (internal css) and the internal will overwrite the external properties. BUT, since you're using conditional comments it will only overwrite the properties when users are browsing with the IE version specified by your comment.

Hope that helps.

Answered almost 10 years ago by Dave Coykendall
  • This sounds phenomenal, except I cannot get the conditional formatting to work. I'm trying the following: <!--[if IE 8]> <tr class="fixingthisnow"> <![endif]--> <tr> What this is attempting to accomplish is having IE8 use the <tr class="fixingthisnow"> and every other browser use <tr>. Any idea where I'm going wrong? Karl Stelter almost 10 years ago
  • Without actually seeing the page you're working on, I would probably suggest applying the class without the comment, then adding style rules to the page that only IE sees. Other browsers can see the table row class but will do nothing if they have no rules to pair with it. What is it you're trying to fix on your table? There's a chance that you should be applying the class to the cell as opposed to the row. Dave Coykendall almost 10 years ago
  • if IE 8 doesn't exist, or does it now? Did Microsoft get the message that their all new Browser isn't really any better? :D Marcel almost 10 years ago
Marcel 57
2
points

Some would say that this isn't very clean and good, and however, but since Microsoft never will be able to build usable Browsers, i really start to don't care of it.

If you already don all the work to make your site look right in IE7 why doing the same work again? Put this in your head and IE8 will render the page just like IE7 for which you did, and have to, all that adjusting anyway:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

That's it.

Normally i do test my page in all browsers and if IE8 kids with me, how could i treat him especially when there isn't a conditional comment for it? So that's the point when i use EmulateIE7. My Customers are not really willing to pay me for work i do twice.

And on the other hand, maybe is one line of code to emulate IE8 as IE7, cleaner than 50 lines of code to do the same, and even treat "real" browsers, that actually do their job well, as the exceptions!? Would mean that nowadays IE8 is the alpha Browser that defines the standards then.

Answered almost 10 years ago by Marcel
  • I would also suggest you do this to let IE8 run in IE7 compatibility mode. Microsft themselves even posted this as a solution on MSDN. Something else to maybe try is to start using "reset stylesheets" which basically resets most css styles so most A grade browsers will start rendering elements more or less the same. The Yahoo guys over at YUI have a nice reset stylesheer you can use here: http://developer.yahoo.com/yui/3/cssreset/ Ettiene almost 10 years ago
  • "how could i treat him especially when there isn't a conditional comment for it?" -- Well, you could add a conditional comment for it :-) <!--[if IE 8]>This is IE8<![endif]--> Olly Hodgson almost 10 years ago
  • Does the conditional comment for IE8 now exist? it didn't at the first release, so what if somebody surfs with a not up to date IE8? Marcel almost 10 years ago
  • I believe it's been there since the pre-release versions. If you're in IE7 mode it will report that it's IE7, which can be confusing - see http://thinkdrastic.tumblr.com/post/232823108/ Olly Hodgson almost 10 years ago
  • I tried adding the meta tag to a page to test it on my own computer (the site is not actually online yet) and it did not work. Could it be that since it's not officially 'online' the IE7 compatible meta tag doesn't work? Karl Stelter almost 10 years ago
1
point

I use conditional classnames to work around issues like this. Basically I add a class to the body element for each version of IE like so:

<!--[if IE 6]><body class="IE6"><![endif]-->
<!--[if IE 7]><body class="IE7"><![endif]-->
<!--[if IE 8]><body class="IE8"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

Then I can target particular versions of IE like so:

table.foo { margin: 0; }
/* Cure a margin-collapse issue in IE8 */
.IE8 table.foo { margin: 5px; }

Does that make sense?

Answered almost 10 years ago by Olly Hodgson
  • Oh thats a new one... didn't actually saw this solution of IE optimizing until now, only conditional comments for CSS embedding or *htm hack. Nice trick, thanks for sharing! Marcel almost 10 years ago
0
points

IE8 decides to move the entire page down exactly 3px when hovering over an image within a table. How would I style things in CSS to only apply to IE8? (I apologize if I'm being repetitive, I really appreciate the help!)

-Also, I tried adding this as a comment but it wouldn't let me add 2 comments on one post? I'm not sure, new to this forum as well.

Answered almost 10 years ago by Karl Stelter
  • Could you code, or a link to the page you're working on? Dave Coykendall almost 10 years ago
  • I suspect it's something to do with the a:hover styles. Can you give us a link or attach your CSS to the question? Olly Hodgson almost 10 years ago
0
points
    <div id="insidebox">
<center>
    <table border="0" cellspacing="0" cellpadding="0">

        <tr class="fixingthisnow">

            <td>    
            <a href="Variable Speed General.html#Variable_Speed_General"  onmouseover="mouseover('picture')">
            <Img Src="images/home-left01.jpg" border="0" width="225" alt="Variable Speed Fire Pump Controllers"name="picture" ><center><hr></center></a>        
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td> 
            <a href="Video Tutorials.html"  onmouseover="mouseover('video_tutorials')">
            <img src="images/Video-Tutorials-TXT.gif" border="0" width="225" alt="Video Tutorials of Fire Pump Controllers"name="video_tutorials"> <center><hr></center></a>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td> <a href="Photo Gallery.html"  onmouseover="mouseover('photo_gallery')">
            <img src="images/Photo-Gallery-TXT.gif" name="photo_gallery" width="225" alt="Photo Gallery" border="0"><center><hr></center> </a>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td> <a href="Quickpicks.html"  onmouseover="mouseover('quick_picks')" >
            <img src="images/Quick-Pick-TXT.gif" width="225" name="quick_picks" alt="Quick Pick Drawings" border="0"> <center><hr></center></a>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td> <a href="EC Controller.html#EC_Controller"  onmouseover="mouseover('ec')">
            <img src="images/EC-TXT.gif" name="ec" width="225" alt="EC Series Controller" border="0"><center><hr></center> </a>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td> <a href="mcsample/index.html"target="_blank"  onmouseover="mouseover('specwriter')">
            <img src="images/Specwriter-TXT.gif" name="specwriter" width="225" alt="Spec Writer - We'll write your spec for you!" border="0"> </a>
            </td>
        </tr>
    </table>
</center>
</div>

This is the section of code I'm working with. Like you said, if I could get the to only read for IE8 this would be ideal.

Answered almost 10 years ago by Karl Stelter
  • Ugh, it came out not as code but how it would look without CSS. How do I get just the code to show? Karl Stelter almost 10 years ago
  • If you copy and paste your code in, then highlight all the code and click the little icon with 1's and 0's on it and the appearance should change into code. Dave Coykendall almost 10 years ago
  • edited the code, so it shows as code Tony Crockford almost 10 years ago
0
points

I've said this in other forums, but you can use Default Style to remove all browser specific styling and have a clean start for ALL BROWSERS.

Answered almost 10 years ago by Discorax