Use CSS depend on if statment

Question

0.00/5 (No votes)

See more:

hello all
i am using ASP.Net, C# in my web application.

how i can use the css file depend on if statment using javascript or css?
The scenario is: if the guest use IE browser i want the web page use one CSS file, and if the guest use chrome i want the web page use the other css file.

also there is another scenario which is: write the both CSS code of IE and Chrome browser in the same css file, and if the guest use IE i want the webpage use the following CSS code from the css file:

CSS

.tp_serv2
{
    margin: 30px  15px   0px 5px;
    direction:ltr;
    font-size:14px;
    position:relative;
    top: -1px;
    left: 815px; /* here is the deferent */
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 14px;
    font-family: "Trebuchet MS", verdana;
}

and if the guest use Chrome i want the webpage use the following CSS code from the css file:

CSS

.tp_serv2
{
    margin: 30px  15px   0px 5px;
    direction:ltr;
    font-size:14px;
    position:relative;
    top: -1px;
    left: 825px; /* here is the deferent */
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 14px;
    font-family: "Trebuchet MS", verdana;
}

how i can do the first scenario or second scenario please?

Thank you

Posted 1-Nov-13 6:06am

Medo-I

Add a Solution

2 solutions

Solution 2

First make Ur css into two classes

<style>

.tp_serv2
{

CSS

margin: 30px  15px   0px 5px;
    direction:ltr;
    font-size:14px;
    position:relative;
    top: -1px;
    left: 815px; /* here is the deferent */
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 14px;
    font-family: "Trebuchet MS", verdana;
}

.tp_serv3
{
margin: 30px  15px   0px 5px;
    direction:ltr;
    font-size:14px;
    position:relative;
    top: -1px;
    left: 825px; /* here is the deferent */
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 14px;
    font-family: "Trebuchet MS", verdana;
}


<style>


<body>


<div id="tblid" style="width:40px ; height:40px"></div>

 
</body>


<script>
$(document).ready()
{


    if ($.browser.msie) {

    
$("#tblid").addClass('tp_serv2');   
        
    }

    else {

       

         $("#tblid").addClass('tp_serv3');
    }

</script></style>

</style>

Posted 1-Nov-13 9:57am

Member 10342533

Updated 1-Nov-13 9:58am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-11-01T08:54:00

Solution 1

As you can use ASP.NET pages, and each page is generated on the server side which receives information from HTTP request, this is not a problem. Please see:
http://msdn.microsoft.com/en-us/library/system.web.httpbrowsercapabilities.aspx[^].

For the code sample referencing different CSS depending on the browser, please see, for example: http://stackoverflow.com/questions/8698352/select-different-css-files-based-on-ie-version-in-asp-net[^].

—SA

Posted 1-Nov-13 8:54am

Sergey Alexandrovich Kryukov

Comments

Medo-I 13-Nov-13 18:21pm

hello
i created two css files, one for Chrome and the other for IE, as following:

<link rel="stylesheet" type="text/css" href="css/styleChrome.css" />
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />

<% HttpBrowserCapabilities browser = Request.Browser; %>

<% if (browser.Browser == "AppleMAC-Safari") { %>
<link rel="stylesheet" type="text/css" href="css/styleChrome.css" media="screen" />
<% } else { %>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" media="screen" />
<% } %>

it is working fine in my local server, but when i uploaded it to server it is not working fine, it doesn't use the chrome css when i use chrome browser, and as i told you it is working fine in the local host for both browsers, it is use both css files depends on which browser i use.
do you have any idea why that happen
thanks

Sergey Alexandrovich Kryukov 13-Nov-13 19:13pm

Something is missing. By this fragment, how to say what?
—SA

Medo-I 14-Nov-13 2:56am

sorry i dont undrestand your question? and what is missing?

Sergey Alexandrovich Kryukov 14-Nov-13 8:19am

I just say: from you information, it's hard to see what is missing.
—SA