tud46355 on "Plugin shows in IE, but not Firefox or Chrome"

Hello! I have started developing a little plug-in to show all the portfolio items and blog posts a site has in an even fashion. I was creating two seperate plug-ins that function in essentially the same way. The plug-in for blog posts (formatted-blog-posts) is working beautifully in all browsers. The plug-in for portfolio items (formatted-portfolio) is as well, but only in Internet Explorer.

I can't find any css that I'm using that is not compatible, and Firebug and Chrome Debugger are not giving any issues relevant to the plug-in.

Apps and Maps Site
The site is a test site that I manage, filled with content from my University.

Here is the full code. If you find anything useful in it for yourself, feel free to use it. I developed most of this code myself, with help from the codex.
PHP Generation

// I cut out the form functions, and initialization bits.
	// I also cut out the script_enqueue and style_enqueue. These parts are working fine, though, and I have verified it myself.
	function widget ($args, $instance)
	{
     		//Set up the instance variables. I cut that part out...

		// Format the title above the portfolio items
		$before_title = "<div class='formatted-portfolio-title'><h3>";
		$after_title = "</h3></div>";

		// Only display the block if there is a title.
		if (!empty($title))
			echo ($before_title . $title . $after_title);

		?>

			<!--FILTERS-->
			<?php
				$pf_terms = get_categories( 'type=portfolio&taxonomy=department&posts_per_page=' . $postsNum );
			?>

			<ul id="filters">
				<li class="current"><div onclick="filter('port-item')" ><?php echo __( 'All', 'responsy' ); ?></div></li>
				<?php
					foreach( $pf_terms as $pf_term )
					{
				?>
					<li>
						<div onClick="filter('<?php echo $pf_term->name; ?>')" ><?php echo $pf_term->name; ?></div>
					</li>
				<?php
					}
				?>
			</ul>
			<!-- end FILTERS -->

			<!-- PORTFOLIO -->
			<div id="portfolio" class="portfolio-items">
				<?php
					$args_portfolio = array( 'post_type' => 'portfolio', 'posts_per_page' => $postsNum );
					$loop_portfolio = new WP_Query( $args_portfolio );

					$pageCount = 0;

					if ( $loop_portfolio->have_posts() )
					{
						while ( $loop_portfolio->have_posts() )
						{
							$loop_portfolio->the_post();

							$terms = get_the_terms( $post->ID, 'department' );
							$categories = '';

							if ( $terms && ! is_wp_error( $terms ) )
							{
								$category_links = array();
								foreach ( $terms as $term )
								{
									$category_links[] = $term->name;
								}
								$categories = join( " ", $category_links );
							}
						?>

						<?php
							$portfolio_item_url = get_permalink();
						?>

						<a href="<?php echo $portfolio_item_url; ?>">
							<div class="port-item <?php echo $categories; ?>" id='port-item-<?php echo ($pageCount); ?>'>
								<?php

									echo "<div class='port-item-container'>";
										if ( '' != get_the_post_thumbnail( $post_id ) )
										{
											$hasThumbs[$pageCount] = true;
											echo "<div class='port-thumb' id='port-thumb-". $pageCount ."'>". get_the_post_thumbnail( $post_id, 'formatted-portfolio-thumb', array( 'alt' => get_the_title(), 'title' => "" )) ."</div>";
										}
										else
										{
											$hasThumbs[$pageCount] = false;
											echo "<div class='port-thumb' id='port-thumb-". $pageCount ."'><img src='" . get_template_directory_uri() . "/img/blog/blog-placeholder.png' alt='". get_the_title() ."'></div>";
										}
										echo ("<div class='port-text' id='port-text-". $pageCount ."'>". get_the_title() ."</div>");
									echo "</div>";
								?>
							</div>
						</a>

						<?php
						$pageCount++;
						}
					}
					wp_reset_query();
				?>
			</div>
			<!-- end PORTFOLIO -->

		<?php

		echo $after_widget;

		// For the javascript code, create an array of Booleans
		$thumbs = json_encode ( $hasThumbs );

		// Create a global javascript variable called thumbnails that holds the array.
		?>
		<script type="text/javascript">
			var thumbs = <?= $thumbs ?>;
		</script>
		<?php
	}

CSS Code:

/* 	The wrapper for the whole widget			*/
.formatted-portfolio-container {
	display:inline-block;
	width:92%;
}

/* 	The container for the title of the widget	*/
.formatted-portfolio-title {
	text-align:center;
	spacing-bottom:6px;
	border-bottom: 1px dotted #888888;
	margin-bottom:14px;
}

/*	The container wrapping each post 			*/
.port-item {
	display:inline-block;
	float:left;
	text-align:center;

	margin-top:0px !important;
	margin-bottom:0px !important;

	height:300px;
	width:22%;
	margin:1% !important;
	padding-top:0px !important;
	padding-bottom:30px !important;

	border-bottom: 1px dotted #888888;

	white-space:normal;
}

/*	The container for the widget title			*/
.port-text {
	text-align:center;
	spacing-bottom:6px;
	margin-bottom:14px;
	max-height:50px;
	font-size:32px;
	display:inline-block;
}

/*	The container for the thumbnail of the post	*/
.port-thumb {
	max-height:240px;
	text-align:center;
	margin:auto;
}

.port-item-container {
	position:relative;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

Shrink Code, which shrinks the text to fit in a limited box set in the CSS:

// REQUIRES 'thumbs', which should be passed by the .php code.
	// This is an array of Booleans that indicates whether a post has a featured image or not.

	// When the window loads or is adjusted, fix the text size...
	// so that all of the posts take up the same size.
	window.onload = function() { resizePort ( ); }
	window.onresize = function() { resizePort ( ); }

	// Create a global variable.
	var columns;

	function resizePort ()
	{
		var thumbnails = thumbs;

		// Get the total width of the browser window.
		var availWid = window.innerWidth;

		// Depending on the size available, change the number of columns.
		if ( availWid < 300 && columns != 1 )
		{
			changeClassSize ( 98, 'port-item' );
			columns = 1;
		}
		else if ( availWid < 600 && availWid >= 300 && columns != 2 )
		{
			changeClassSize ( 48, 'port-item' );
			columns = 2;
		}
		else if ( availWid < 900 && availWid >= 600 && columns != 3 )
		{
			changeClassSize ( 31, 'port-item' );
			columns = 3;
		}
		else if ( availWid >= 1200 && columns != 4 )
		{
			changeClassSize ( 23, 'port-item' );
			columns = 4;
		}

		// For each post, fix the text size.
		for (var index = 0; index < thumbnails.length ; index++)
		{
			shrinkPort(index, thumbnails[index]);
		}
	}

	// Adjust the space that each column takes up depending on the size given.
	function changeClassSize( size, className ) {
		var cols = document.getElementsByClassName( className );

		for ( var i = 0 ; i < cols.length ; i++ )
		{
			cols[i].style.width = size + '%' ;
		}
	}

	// Adjust the text so each post takes the same space.
	function shrinkPort(id, hasThumb)
	{
		// Get the individual parts of an individual post.
		var textbox = document.getElementById('port-text-' + id);
		var box = document.getElementById('port-item-' + id);

		// Get the CSS styling of the text of the portfolio item.
		var classSample = getComputedStyle( document.getElementsByClassName('port-text')[0] );

		var maxHeight = parseInt(classSample.maxHeight);
		var paddingTop = parseInt(classSample.paddingTop);
		var paddingBottom = parseInt(classSample.paddingBottom);

		// The max font size of the text. This will only go down from here.
		textbox.style.fontSize = '48px';

		// The amount of space taken up by the title, not including the padding or margin.
		var spaceTaken = textbox.scrollHeight;

		// If the text is too tall (for the CSS rules) or too wide (for the post box) ...
		while ( spaceTaken > maxHeight || textbox.scrollWidth > box.offsetWidth )
		{
			// stop if the text gets too small.
			if (parseInt (textbox.style.fontSize) <= 7)
			{
				break;
			}

			// Shrink the text by 1 px and reset the conditional.
			textbox.style.fontSize = parseInt(textbox.style.fontSize) - 1 + 'px';
			spaceTaken = textbox.scrollHeight;
		}
	}

And finally, the filter Script code. When a filter is clicked, all of the portfolio items from the clicked department are shown, while the others are set to 'display:none;'.

function filter ( department )
	{
//		alert (department);

		var allBlocks = document.getElementsByClassName( 'port-item' );

		for ( var i = 0 ; i < allBlocks.length ; i++ )
		{
			allBlocks[i].style.display = 'none' ;
//			alert (allBlocks[i].innerHTML);
		}

		var cols = document.getElementsByClassName( department );

		for ( var i = 0 ; i < cols.length ; i++ )
		{
			cols[i].style.display = 'inline-block' ;
//			alert (cols[i].innerHTML);
		}
	}

I'm sorry for the wall of code, but I have no idea what could be causing this problem. Because of this, I felt I should show all the important bits.

Thanks in advance for any and all help.