CODEWITHSUNDEEP
csshtml
Hosea146
Hosea146

Reputation: 7722

Rendering a Div Based on Browser Type

I have a div tag that looks as follows:

<div id="loadingDiv" class="loadingDiv"; style="position:absolute; left:400px; top:292px;">
    <strong>Retrieving Data - One Moment Please...</strong>
</div>

It seems that Chrome and IE do not render this the same way. In IE, the text is much further to the left than with Chrome. I don't know why this is. So, is there a way I can create a style that is dependent on the browser type? For example, if the browser is IE, I'd like the left value to be maybe 300px, and 400px if Chrome. Or, is there a better way to handle this?

Upvotes: 0

Views: 642

Answers (1)

Develoger
Develoger

Reputation: 3998

Even if I don't recommend to use browser specific CSS, it is always much better to optimize your CSS to look at least simmilar in all browsers, you can do what you want by using of some javascript combined with CSS.

Here is the code:

<html>
<head>

<title>browser specific css</title>

<style>

    .loadingDiv {

        position: absolute;
        display: none;
        font-weight: bold;

    }

    .loadingDiv.ie {

        display: block;
        left: 300px; 
        top: 292px;
        background: #00CCFF;
        color: #454545;

    }

    .loadingDiv.chrome {

        display: block;
        left: 400px; 
        top: 292px;
        background: #FCD209;
        color: #E53731;

    }

    .loadingDiv.firefox {

        display: block;
        left: 400px; 
        top: 292px;
        background: #D04F16;
        color: #FFFFFF;

    }

    .loadingDiv.default {

        display: block;
        left: 400px; 
        top: 292px;

    }

</style>

<script>

    window.onload = function() {

        var check_for_ie = detect_browser("MSIE");
        var check_for_chrome = detect_browser("Chrome");
        var check_for_firefox = detect_browser("Firefox");

        var browser_name = "";

        var loading_div = document.getElementById("loadingDiv");
        var loading_div_html = loading_div.innerHTML;

        if (check_for_ie == true) {
            browser_name = "Internet Explorer";
            loading_div.className = "loadingDiv ie";
        }
        else if (check_for_chrome == true) {
            browser_name = "Google Chrome";
            loading_div.setAttribute("class","loadingDiv chrome");
        }
        else if (check_for_firefox == true) {
            browser_name = "Firefox";
            loading_div.setAttribute("class","loadingDiv firefox");
        }
        else {
            browser_name = "Unchecked browser";
            loading_div.setAttribute("class","loadingDiv default");
        }

        loading_div.innerHTML = loading_div_html + "(you are browsing with "+browser_name+")";

    }

    function detect_browser(look_for) {

        var user_agent_string = navigator.userAgent;
        var search_for_string = user_agent_string.search(look_for);

        if (search_for_string > -1) {
            return true;
        }
        else {
            return false;
        }

    }

</script>

</head>
<body>

    <div id="loadingDiv" class="loadingDiv" >
        Retrieving Data - One Moment Please...
    </div>

</body>
</html>

And here is the working example:
http://simplestudio.rs/yard/browser_specific_css/browser_specific_css.html

EDIT:

If you need to check for some other browsers look at user agent string of that specific browser and find something that is unique in it and makes a difference between that browser and the others and use that like this:

var check_for_opera = detect_browser("Opera");

Detecting browsers by user agent could be tricky so be careful, even upgrade my function if you need...

  • NOTE, that this is just quick example...

Upvotes: 1

Related Questions