Hi guys,
Been trying to work out why my CSS file works in FF but not in IE. Most of it does but the heading tags and navigation bar text won't display in IE.
Here is my CSS
Code:
#header {height:419px;position:relative}
#header .row-1 {height:88px}
#header .row-1 .fleft {padding:20px 0 0 22px}
#header .row-1 .fright {padding:34px 34px 0 0}
#header .row-1 .fright ul li {float:left;padding-left:23px}
#header .row-2 {background:url(images/nav-tail.gif) repeat-x left top;margin-bottom:-3px;position:relative}
#header .row-2 .left {background:url(images/nav-left.gif) no-repeat left top}
#header .row-2 ul {height:58px;width:100%;overflow:hidden;background:url(images/nav-right.gif) no-repeat right top}
#header .row-2 ul li {float:left;text-transform:uppercase;font-size:16px;line-height:1.2em;background:url(images/divider.gif) no-repeat right 4px;padding:4px 2px 0 0}
#header .row-2 ul li.last {background:none;padding-right:0}
#header .row-2 ul li.last a {width:188px}
#header .row-2 ul li a {text-decoration:none;color:#fff;width:186px;text-align:center;display:block;padding:14px 0 0 0;cursor:pointer;background:url(images/spacer.gif)}
#header .row-2 ul li a span {display:block;height:40px}
#header .row-2 ul li a:hover,
#header .row-2 ul li a.active {background:url(images/nav-act.png) repeat-x left top}
#header .row-2 ul li a:hover span,
#header .row-2 ul li a.active span {background:url(images/nav-arrow.gif) no-repeat center bottom}
#header .row-3 {height:276px;overflow:hidden;background:url(images/header-tail.gif) repeat-x left top}
#header .row-3 .inside {padding:35px 0 0 50px;width:350px;position:relative;z-index:2}
#header .row-3 .inside p {color:#fff;line-height:1.5em}
#header .extra {position:absolute;left:0;top:142px}
Here is part of my index.html page
Code:
<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<cfparam name="url.action" default="home">
<head>
<title>Murrays Transport Havant </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Place your description here" />
<meta name="keywords" content="Vehicles, Trucks, Removals" />
<meta name="author" content="Katie Simms Consulting" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_600.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_BT_400.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_BT_700.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_Dm_BT_400.font.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, #header .row-2 ul li a, .extra img, #search-form a, #search-form a em, #login-form .field1 a, #login-form .field1 a em, #login-form .field1 a b');
</script>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body id="page1">
<div id="main">
<!-- HEADER -->
<div id="header">
<div class="row-1">
<div class="fleft"><a href="home.html"><img src="images/MURRAYLOGO.JPG" alt="" /></a></div>
<div class="fright">
<ul>
<li><a href="linkedin.com"><img src="images/icon1-act.gif" alt="" /></a></li>
<li><a href="twitter.com"><img src="images/icon2.gif" alt="" /></a></li>
<li><a href="facebook.com"><img src="images/icon3.gif" alt="" /></a></li>
</ul>
</div>
</div>
<div class="row-2">
<div class="left">
<ul>
<li><a href="home.html" class="active"><span>home</span></a></li>
<li><a href="about-us.html"><span>about</span></a></li>
<li><a href="articles.html"><span>gallery</span></a></li>
<li class="last"><a href="sitemap.html"><span>testimonials</span></a></li>
<li><a href="contact-us.html"><span>contact</span></a></li>
</ul>
</div>
</div>
<div class="row-3">
<div class="inside">
<h2> Call us now on <br/>023 9247 3388</h2>
<p>Providing assistance for a variety of different transportation needs. Our fleet of specialist vehicles can get the job done.</p>
<a href="#" onclick="document.getElementById('search-form').submit()" class="link1"><em><b>Send an Enquiry</b></em></a>
</div>
</div>
<div class="extra"><img src="images/header-img.png" alt="" /></div>
</div>
<!-- CONTENT -->
Any ideas why it won't display the text in IE?
Much appreciated
