Home/ Questions/Q 774663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T19:10:05+00:00

I’m working on HTML for a small web application; the design calls for a

  • 0

I’m working on HTML for a small web application; the design calls for a content area with rounded corners and a drop shadow. I’ve been able to produce this with CSS3, and it works flawlessly on Firefox and Chrome:

CSS3 Version

However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story:

Internet Explorer Version

Is there an easy, lightweight JavaScript solution that would allow me to either 1) use IE-specific features to achieve this, or 2) modify the DOM (programmatically) in such a way that adds custom images around the content area to emulate the effect?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is my method, I use the conditionals to target CSS files to IE browsers.

    Say you have your div with the id #page_container. In your regular master.css or css3.css file, you would give it your width, height, rounded corners and drop shadow with styles.

    Now, when IE hits your page, it will pull in the condition css you had set up. For that same div#page_container, you may alter the width a bit, height, maybe some padding, then give it a background-image to make it look like the drop shadow, rounded-corner version.

    So your head will have this:

    <head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>

    In the master.css file, you would have this definition for your main div:

    div#page_container {
  width: 960px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background: #ccc;
  drop-shadow: whatever...
  rounded-corner: whatever...
}

    Now, in your ie.css file, and because it is referenced in your second, the definition will cascade down so you can alter it a bit:

    div#page_container {
  width: 960px;
  height: auto;
  padding: 15px 15px 15px 15px; /* this is key */
  background: #ccc url(/path/to/image.file) no-repeat top left;
}

    Add just enough extra padding so the drop shadows fit in with your background-image. Because it cascades down, it will overwrite the original 10px padding you had, expanding the box model to fit in your extra shadow graphics.

    Couple benefits to this method include:

    • Only IE will see this definition and the call to the image. If this is a high volume app, that will save on bandwidth and any delays associated with the call.
    • Likewise, because you didn’t hard code in the rounded corner graphics that every browser would see, your Firefox and Safari users won’t need hit the server with extra image calls.
    • No need to add in yet another javascript plug-in that checks for IE, creates new markup, time, etc…
    • 0