PHP with call to load css file works in all browsers except IE

PHP
1

Hi,
I have a taxonomy.php file from my Wordpress install. I have a different taxonomy file for 1 section of the site. The only difference is that this one calls an extra CSS file at the beginning. All is fine on every browser except IE all versions. On IE the page layout is messed up.

It is not the CSS itself that is upsetting IE as I made a completely empty CSS file and called that. The page was still messed up in the same way. Everything to the right.
You can see it here http://thecraftcircle.com.au/shop/products-page/100-percent-wool-felt/

can I not call a css file like this. Is my syntax wrong and IE is more picky?
Please assist, I thought I was ready to go until I tried IE!
Full taxonomy file code is below it is quite short. Works fine without that very first line.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/customfelt.css" />
<?php get_header(); ?>
<div id="container" class="container_24">
<?php
$image_width = get_option('product_image_width');
if (get_option('storefront_shop_layout') == '3 Column') {$sidebargrid = 6;$contentgrid = 12;$prodcont = 455;} else {$sidebargrid = 5;$contentgrid = 19;}
if (get_option('storefront_shop_layout') == 'Full Width') {$pageclass = "full-width-page-content"; $contentgrid = 24;}
if (get_option('storefront_shop_layout') == 'Left Sidebar') {$pageclass = "left-sidebar-page-content";}
if (get_option('storefront_shop_layout') == 'Right Sidebar') {$pageclass = "right-sidebar-page-content";}
$textcolwidth = $prodcont - $image_width - 10;
?>

	<?php if ((get_option('storefront_shop_layout') == '3 Column') || (get_option('storefront_shop_layout') == 'Left Sidebar')) { ?>
	<style>#content {padding-left:5px;}</style>
	<?php if (get_option('storefront_shop_layout') == 'Left Sidebar') { ?>
	<style>#content {margin-right:-5px;}</style>
	<?php } ?>	
	<div id="left-sidebar" class="grid_<?php echo $sidebargrid;?> sidebar">
		<?php dynamic_sidebar('Page Sidebar Left'); ?>
	</div>
	<?php } ?>
	
	<div id="content" class="grid_<?php echo $contentgrid;?> <?php if (get_option('storefront_shop_layout') == '3 Column') {echo "center-column";}?>">
		<div class="page-content  <?php echo $pageclass;?>">
		<h1><?php the_title();?></h1>
			<?php the_content(); ?>
		</div>
	</div>
	
	<?php if ((get_option('storefront_shop_layout') == '3 Column') || (get_option('storefront_shop_layout') == 'Right Sidebar')) { ?>	
	<div id="right-sidebar" class="grid_<?php echo $sidebargrid;?> sidebar">
		<?php dynamic_sidebar('Page Sidebar Right'); ?>
	</div>
	<?php } ?>

	<div class="clear"></div>
</div>
<?php include(TEMPLATEPATH . '/includes/footer/footer-widgets.php'); ?>
<?php get_footer(); ?>
2

The problem is that you are calling your stylesheet above the get_header() function. This function spits out all of the code in the <head></head> tag, so your CSS link is appearing as the first thing in your page code (view the source of your page in any browser to see this).

You’ll need to edit the header.php file and place the link to your CSS file near the main stylesheet code. If you know the id of the page you are targeting you could do this:

<?php if( is_page(page_id) ){ ?><link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/customfelt.css" /><?php } ?>

Just substitute the id number for “page_id”. That will load the css file only on that page.