Skip navigation
MFitz721
MFitz721
Currently Being Moderated

Background image not showing in IE9 only

Jul 26, 2012 9:37 AM

Tags: #not #image #ie9 #showing

The grey image (GreyBack.jpg) around the 9 centered product images on this site are not displaying in only IE9:

www.Deltron.com

 

Screenshot here: http://deltron.com/images/deltron-shot.jpg

 

It works perfectly in IE7, IE8, FF, Safari, and Chrome.

Any ideas?

 

Here is the CSS for that section:

 

.RoundedBox {

width: 479px;

padding: 10px;

border: 1px solid #E4E4E4;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

behavior: url(border-radius.htc);

margin-top: 0;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

background-image: url('images/GreyBack.jpg');

 

 

 

And the HTML:

 

<div class="RoundedBox">

      <p><img src="images/BannerHome.jpg" width="350" height="28" alt="Deltron Precision Product Line-up" /></p>

    <table width="73%" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td width="30%"><a href="javascript:;" onmouseover="MM_swapImage('Image20','','images/linear_slide_crossed_r oller_bearings2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/linear_slide_crossed_roller_bearings1.jpg" alt="Linear Slides Ball Slides Crossed Roller Slides" width="153" height="148" border="0" id="Image20" onclick="MM_goToURL('parent','Linear_Slides_Ball_Slides_Crossed_Rolle r_Slides.html');return document.MM_returnValue" /></a></td>

        <td width="2%"> </td>

        <td width="29%"><a href="javascript:;" onmouseover="MM_swapImage('Image21','','images/positioning_stages2.jp g',1)" onmouseout="MM_swapImgRestore()"><img src="images/positioning_stages1.jpg" alt="Micrometer Positioning Stages" width="153" height="148" border="0" id="Image21" onclick="MM_goToURL('parent','Micrometer_Positioning_Stages.html');re turn document.MM_returnValue" /></a></td>

        <td width="3%"> </td>

        <td width="34%"><a href="javascript:;" onmouseover="MM_swapImage('Image26','','images/cross_roller_bearings2 .jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/cross_roller_bearings1.jpg" alt="Linear Bearings Crossed Roller Tables" width="153" height="148" border="0" id="Image26" onclick="MM_goToURL('parent','Linear_Bearings_Crossed_Roller_Tables.h tml');return document.MM_returnValue" /></a></td>

      </tr>

      <tr>

        <td><a href="javascript:;" onmouseover="MM_swapImage('Image28','','images/linear_actuators2.jpg' ,1)" onmouseout="MM_swapImgRestore()"><img src="images/linear_actuators1.jpg" alt="Linear Actuators Lead Screw Actuators" width="153" height="148" border="0" id="Image28" onclick="MM_goToURL('parent','Linear_Actuators_Lead_Screw_Actuators.h tml');return document.MM_returnValue" /></a></td>

        <td><img src="images/spacer.gif" alt="" width="10" height="20" /></td>

        <td><a href="javascript:;" onmouseover="MM_swapImage('Image27','','images/non-magnetic-slides2.j pg',1)" onmouseout="MM_swapImgRestore()"><img src="images/non-magnetic-slides1.jpg" alt="Non Magnetic Slides" width="153" height="148" border="0" id="Image27" onclick="MM_goToURL('parent','Non_Magnetic_Slides.html');return document.MM_returnValue" /></a></td>

        <td><img src="images/spacer.gif" alt="" width="10" height="20" /></td>

        <td><a href="javascript:;" onmouseover="MM_swapImage('Image23','','images/lead_screw_actuators2. jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/lead_screw_actuators1.jpg" alt="Lead Screw Actuators Lead Screw Stages" width="153" height="148" border="0" id="Image23" onclick="MM_goToURL('parent','Lead_Screw_Actuators_Lead_Screw_Stages. html');return document.MM_returnValue" /></a></td>

      </tr>

      <tr>

        <td><a href="javascript:;" onmouseover="MM_swapImage('Image22','','images/crossed_roller_bearing s2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/crossed_roller_bearings1.jpg" alt="Crossed Roller Bearings Crossed Roller Rails" width="153" height="148" border="0" id="Image22" onclick="MM_goToURL('parent','Crossed_Roller_Bearings_Crossed_Roller- Rails.html');return document.MM_returnValue" /></a></td>

        <td> </td>

        <td><a href="javascript:;" onmouseover="MM_swapImage('Image25','','images/slide_guides2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/slide_guides1.jpg" alt="Slide Guides" width="153" height="148" border="0" id="Image25" onclick="MM_goToURL('parent','Slide_Guides.html');return document.MM_returnValue" /></a></td>

        <td> </td>

        <td><a href="javascript:;" onmouseover="MM_swapImage('Image24','','images/belt_drives2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/belt_drives1.jpg" alt="Belt Drive Actuators Linear Actuators" width="153" height="148" border="0" id="Image24" onclick="MM_goToURL('parent','Belt_Drive_Actuators_Linear_Actuators.h tml');return document.MM_returnValue" /></a></td>

      </tr>

    </table>

</div>

 

Thank you!

 

 

Matt

1152 Views   11 Replies   Latest reply: MFitz721, Jul 27, 2012 2:07 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jul 26, 2012 10:10 AM   in reply to MFitz721
    Report

    On line 293 of your code, map name and ID are mismatched.  They should be the same.

    <map name="Map3" id="Map32">

     

     

    Nancy O.

     

     


     


     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Jul 26, 2012 10:24 AM   in reply to Nancy O.
    Report

    The likely culprit is this:

     

    behavior: url(border-radius.htc);

     

    Border-radius.htc is a hack for older IE browsers.  IE9 already supports rounded borders so it doesn't need the hack. 

     

    Move your behavior rule into a conditional comment for pre-IE9.

     

     

    Nancy O.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Jul 26, 2012 10:31 AM   in reply to Nancy O.
    Report

    Yes - this is the result of that hack:

     

    <div class="RoundedBox v08vnSVo78t4JfjH" style="border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;">

     

    Dump it!

     
    |
    Mark as:
  • MFitz721
    Currently Being Moderated
    4. MFitz721,
    Jul 26, 2012 10:58 AM   in reply to MurraySummers
    Report

    Thanks for the replies Nancy O. and Murray.

     

    It's been so long since I did this hack (for FireFox), I don't remember anything about it.

     

    I believe I should delete lines 80 & 81, and leave everything else, right?:

     


    		-moz-border-radius: 20px;

    		-webkit-border-radius: 20px;

     

    Is there anything else I need to do?

     

    Murray, where did you get this code?:

    Murray *ACP* wrote:

     

    Yes - this is the result of that hack:

     

    <div class="RoundedBox v08vnSVo78t4JfjH" style="border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;">

     

    Dump it!

     

    Thanks again, both of you!

     

    Matt

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Jul 26, 2012 11:07 AM   in reply to MFitz721
    Report
    I believe I should delete lines 80 & 81, and leave everything else, right?:

     


    		-moz-border-radius: 20px;

    		-webkit-border-radius: 20px;

     

    Wrong.  If you do that, you won't see rounded borders in older Firefox and Safari browsers.

     

    You need to delete the behavior rule that points to border-radius.htc (script).  That's the hack for IE browsers which is creating problems.

     

     

    Nancy O.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Jul 26, 2012 11:34 AM   in reply to MFitz721
    Report

    It was what I see in IE's Developer tools (F12).  I presume it is the generated code that results from the application of that linked *.htc file.

     
    |
    Mark as:
  • MFitz721
    Currently Being Moderated
    7. MFitz721,
    Jul 27, 2012 6:06 AM   in reply to MurraySummers
    Report

    Hi.

     

    I really don't understand this hack OR how to fix it. Thanks for your replies though.

     

    By removing line 83

    behavior: url(border-radius.htc);

    the rounded corners work in the versions I have of FF, Safari, Chrome, and Opera, but NOT in IE 8.

     

    Heck I don't even understand under what circumstances this behavior gets run and how it works. If there is a method of accomplishing the rounded corners that will work with all modern browsers but display straight corners for all older browsers, I'll do that.

     

    Bottom line: What exactly would you suggest I do to have these rounded corners work in modern browsers (including IE9, which was the reason someone pointed it out to me)?

     

    Thanks again.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    8. Nancy O.,
    Jul 27, 2012 11:47 AM   in reply to MFitz721
    Report

    IE9 supports the CSS border-radius property just fine. 

     

    Pre-IE9 browsers do not.

      

    The .HTC hack is a script to force rounded borders to display in older IE browsers.  But it creates unwanted side effects in modern IE9 and IE10. 

     

    Best advice, ditch the .HTC hack and move on to more important things. Rounded borders are not critical, they're just eye candy.

     

     

    Nancy O.

     
    |
    Mark as:
  • MFitz721
    Currently Being Moderated
    9. MFitz721,
    Jul 27, 2012 11:57 AM   in reply to Nancy O.
    Report

    Nancy O. wrote:

     

      Best advice, ditch the .HTC hack and move on to more important things. Rounded borders are not critical, they're just eye candy.

     

     

    Nancy O.

    Thanks for the reply, Nancy O, but I don't understand exactly what you're recommending.

     

    I can probably sell the customer on my doing the rounded corners at the price of older browsers not showing them, but should I be accomplishing it a completely different way? In other words, after I delete all references to the .htc script and lines 80, 81, and 83, then what?

     

    Thanks again.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    10. Nancy O.,
    Jul 27, 2012 12:30 PM   in reply to MFitz721
    Report

    DO NOT remove -moz or -webkit border-radius properties.  You need those.  Simply delete  behavior.

     

    .RoundedBox {

    width: 479px;
    padding: 10px;
    border: 1px solid #E4E4E4;
    -moz-border-radius: 20px;  /**keep this is for older Firefox**/
    -webkit-border-radius: 20px; /**keep this is for older Chrome/Safari**/
    border-radius: 20px;  /**keep this is for ALL standards-compliant browsers**/
    behavior: url(border-radius.htc);  /**delete this IE hack**/
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #E4E4E4;
    }

     

     

    Nancy O.

     


     
    |
    Mark as:
  • MFitz721
    Currently Being Moderated
    11. MFitz721,
    Jul 27, 2012 2:07 PM   in reply to Nancy O.
    Report

    Thanks Nancy O.

     

    I actually did exactly that yesterday but didn't think that was right. The rounded corners now work in all modern browsers except for IE8. IE9 is fine.

     

    Have yourself a great weekend and thank you very much for the help.

     

    Matt

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points