0

I've a test.css file with the following styles:

....
#body
{
    font-family:Verdana, sans-serif;
    font-size:10pt;
    margin:0;
    padding:0;
}

div#inscreenalertcontainer
{
    margin:32px;
    padding:16px;
    width:100%;
}
....

For IE the attribute width:100%; is necessary in div#inscreenalertcontainer. For other browsers this attribute is not required.

Is there any way to do this in test.css with some conditional operators? Since there are around 100 css files, I dont want to create another 100 css files, specific to IE, just to change one property.

Or is it possible to change in JSP itself.

Here is my JSP code:

<body>
    <div id="InScreenAlertContainer">
    <table  class="inScreenAlert">
    <tr valign="top">
 ....
 ....
</body>

4 Answers 4

1

Use Conditional Comments:

<!--[if IE]>
    <style>
    div#inscreenalertcontainer
    {
        margin:32px;
        padding:16px;
        width:100%;
        /*plus other IE specific rules*/
    }
    </style>
<![endif]-->

This is programmed into all versions of Internet Explorer to serve specific instructions for these browsers. No other browser will pick up on it, it's the best way to tell IE to do something else than what's in the original CSS.

0
0

If the parameter doesn't hurt the other browsers you can leave it there. Or use this to apply it to IE only: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

You can choose for the stylesheet hack or conditional comment (html) to target IE and add a

<style>div#inscreenalertcontainer {width:100%}</style>

in your head tags

0

add this one to your webpage's header section. and here is a very good link to see more http://www.quirksmode.org/css/condcom.html

<!--[if IE]>
div#inscreenalertcontainer
{
    margin:32px;
    padding:16px;
    width:100%;
}
<![endif]-->
0

A common way to target IE is to change your html markup to this :

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

And then in your css you can just write :

.ie #inscreenalertcontainer {
   width: 100%;
}

This technique will allow you to keep your code readable and tidy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.