CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromefirefox
PavKR
PavKR

Reputation: 1621

Firefox returns pixel value, Chrome returns percent value (CSS max-height)

I am trying (via jQuery) to get the max-height of a div set via CSS as a percentage value (45%).

In Firefox - it returns a pixel value, however, in Chrome/Safari, the value is returned as a percentage (45%). The jQuery code I am using to get these values is:

parseInt($('.content-section').css('max-height'))

Am I doing this the wrong way? How do I go about getting a pixel height in Chrome/Safari? Or even, a percentage height in Firefox?

EDIT:

The original CSS: .content-section {width: 880px; margin: 0 auto; max-height: 45%}

The computed CSS in chrome: Chrome Computed

The computed CSS in Firebug: Firebug Computed

Upvotes: 6

Views: 678

Answers (1)

rsahai91
rsahai91

Reputation: 447

Hmm that's odd. One workaround is to use the percentage to calculate the actual max-height. For example:

var percentage = parseInt($('div.container').css('max-height')); //40?
var parentHeight = $('div.container').parent.height(); // i.e. 1000 (this is a px value)
var pixelHeight = parentHeight/percantage; // 400

Not sure exactly what you're code looks like so this of course may not work exactly as written. Also you would need to only do this for the browsers that it's acting funky for!

Upvotes: 0

Related Questions