12 Replies Latest reply on Sep 16, 2011 10:46 AM by John Espirian

    border-radius CSS rule doesn't work in IE9

    John Espirian

      Hi, all.

       

      I wonder whether anyone has got a border-radius CSS rule to work with RoboHelp's WebHelp/WebHelp Pro output in IE9?

       

      I've tried creating a blank, new project and have used some simple embedded CSS (no external CSS is called), namely:

       

      <style type="text/css">

      div {

      border-radius:15px;

      background-color:#f00;

      }

      </style>

       

      and then, in the <body>, just this:

       

      <div>

      <p>Hello world.</p>

      </div>

       

      The output is exactly as expected when viewed in Safari, Chrome and Firefox, but IE9 stubbornly refuses to display curved corners on the div. The same code works perfectly in IE9 when I write it in Dreamweaver.

       

      I thought I might have come across a workaround when I found a site that suggested adding the following code to the <head>:

       

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

      This seemed to work when previewing the topic with the 'View Selected Item' button (looks like a pair of spectacles), but when the WebHelp output was generated, the rounded corners were again gone in IE9. The same is true when outputting with WebHelp Pro.
      So, is RoboHelp's output process doing something to suppress the application of the border-radius rule in IE9? Specifying individual border-radius values for each side of the div didn't help either.
      I'm using RoboHelp 9.0.1.232.