The following works *somewhat* fine in chrome, but is garbage in IE and FF. I can not seem to figure out why .height is not working. Any help is appreciated. The goal is to have the img in the light box stay within the viewport (actually a bit smaller then the viewport) *please note, I am a rookie to jquery and I am sure the below could be improved or changed.
Code:
$('.mainContent a').has('img').addClass('lightbox_trigger');

	$('.lightbox_trigger').click(function(e) {

        e.preventDefault();
    
        var image_href = $(this).attr("href");

            var lightbox =
            '<div class="lightbox">' +
                '<p>Click to close</p>' +
                '<div class="lightbox_content">' + 
                    '<img src="' + image_href +'" />' +
                '</div>' +
            '</div>';
    
            $('body').append(lightbox);
            $('.lightbox').hide();
            var maxheightvalue = $(".lightbox").height - 60;
			$(".lightbox img").css("max-height", maxheightvalue + "px");
            $('.lightbox').fadeIn(400);
    });

    $(document.body).on('click', '.lightbox', function() {
    $('.lightbox').fadeOut(300, function() {
	    
    	$('.lightbox').remove();

    	});
    });