how to set different height for different browser?

Question

I have div that has a height: 300px; and overflow: auto;. It looks good in Chrome, but in Firefox it start scroll the page. When I decrease the height to height: 200px;` it looks good.

Can we give different div height when html page open in Chrome and Firefox?

score 1 · Accepted Answer · answered May 07 '14 at 06:36

1

Use the below CSS block for firefox

@-moz-document url-prefix() { 
  .selector {
     width:200px;
  }
}

and use the below CSS block for chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .selector {
     width:300px;
  }
}

answered May 07 '14 at 06:36

Aditya Singh

9,118
5
30
53

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

You can write browser specific code by detecting browser. Here is the link for browser detection Browser detection in JavaScript?

edited May 23 '17 at 12:28

Community

1
1

answered May 07 '14 at 06:12

Sandeeproop

1,716
1
12
17

Ullas · Answer 3 · 2014-05-07T06:19:41.787

Give the condition according to the browser using javascript

if (!!window.chrome == true) {
  //condition for chrome
 }
 else if (typeof InstallTrigger !== 'undefined') {
 //condition for firefox
 }
 else if (/*@cc_on!@*/false == true) {
       //condition for safari
    }
    else if (!!window.opera || navigator.userAgent.indexOf('Opera') >= 0) {
        //condition for opera
    }
    else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
        //condition fo IE
    }

This javascript code will detect the browser. Give onload function for body and give the code for that function.

score 0 · Answer 4 · edited May 22 '14 at 08:26

0

Use different styles sheets (css) based on the browser.

E.g.

<script type="text/javascript"> 
    var browser=navigator.appName; 
    if browser == "Microsoft  Internet Explorer" 
    { 
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">"); 
    } 
    else if browser == "Firefox" 
    { 
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"Firefox.css\">"); 
    } 
    else 
    { 
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">"); 
    } 
</script>

or

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

edited May 22 '14 at 08:26

Howli

11,217
17
44
70

answered May 07 '14 at 06:15

swgkg

174
5

how can you please give one small exxample – May 07 '14 at 06:17
– swgkg May 07 '14 at 06:25
or – swgkg May 07 '14 at 06:25
navigator.appName can't use here. Because for chrome, safari and firefox appName is Netscape. – Ullas May 07 '14 at 06:37

swgkg · Answer 5 · 2014-05-07T06:34:20.767

0

I think better way to change the css files based on the browser. As I think it is better to separate the styles functionality from the JavaScript. It will be good coding practice and maintainability will be easier.

edited May 07 '14 at 06:34

answered May 07 '14 at 06:19

swgkg

174
5

can you give simple example – May 07 '14 at 06:20

how to set different height for different browser?

5 Answers5