CODEWITHSUNDEEP
cssjsp
user1945492
user1945492

Reputation:

Conditions in CSS

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>

Upvotes: 0

Views: 1063

Answers (4)

wakooka
wakooka

Reputation: 1428

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.

Upvotes: 0

naresh kumar
naresh kumar

Reputation: 2241

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]-->

Upvotes: 0

MultiformeIngegno
MultiformeIngegno

Reputation: 7059

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

Upvotes: 0

Kyle
Kyle

Reputation: 67194

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.

Upvotes: 1

Related Questions