Hi,
I cannot for the life of me work out what i’m missing in regards to ie7. I’ve given up with 6, and there are a few versions of firefox that have slight problems, but (6 especially) can suck my balls. IE7 unfortunately needs to be addressed i reckon.
Here is a picture of my site in both firefox and ie7 to explain the problem (it works perfectly in ie8)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="round5.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<!-- Begin JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-1').codaSlider({
dynamicArrows: false,
dynamicTabs: false
});
});
</script>
<!-- End JavaScript -->
</head>
<body class="coda-slider-no-js">
<noscript>
<div>
<p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
<ol>
<li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href="http://www.getfirefox.com">Firefox</a>.</li>
<li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. <a href="http://www.google.com/support/bin/answer.py?answer=23852">Learn how to enable JavaScript</a>.</li>
</ol>
</div>
</noscript>
<div id="floater"><!-- this is to centre/push the content vertically -->
</div><!-- end#floater -->
<div id="centered">
<div id="navbar">
<div id="coda-nav-1" class="coda-nav">
<ul>
<li class="tab1"><a href="#1"></a></li>
<li class="tab2"><a href="#2"></a></li>
<li class="tab3"><a href="#3"></a></li>
<li class="tab4"><a href="#4"></a></li>
</ul>
</div>
<div id="logo">
</div><!-- end#logo -->
<div id="rss">
</div><!-- end#rss -->
<div id="facebook">
</div><!-- end#facebook -->
<div id="twitter">
</div><!-- end#twitter -->
</div><!-- end#navbar -->
<div id="contentwrapper">
<div id="contentnav">
<div id="button1">
</div><!-- end#button1 -->
<div id="button2">
</div><!-- end#button2 -->
<div id="button3">
</div><!-- end#button3 -->
<div id="address">
</div><!-- end#address -->
</div><!-- end#contentnav -->
<div id="contentmain">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Home</h2>
<p>In today's modern health system medical professionals face a wide variety of pressures. Moves toward electronic and integrated care have only increased these demands, ultimately impacting workloads, service levels and costs.</p>
<p>Here at HIS we are committed to helping our clients implement systems that ease this transition, providing natural and intuitive interfaces that complement successful workflows, rather than seeking to change them.</p>
</div><!-- end#panel-wrapper -->
<div id="panel1picture">
</div><!-- end#panel1picture -->
<div class="panel-wrapper2">
<p>Based in academic, primary and secondary care settings, our consultants benefit from working within the industry. This provides the unique ability to accurately understand and reflect your requirements in any proposed solution.</p>
<p>With direct experience in both healthcare and systems engineering, we can ensure that our Digital Pen and iForm System will allow you to deliver flexible care at the very highest level.
</div><!-- end#panel-wrapper2 -->
</div><!-- end#panel -->
<div class="panel">
<div class="iformsystem1">
<h2 class="title">iForm System</h2>
<p>Our iForm System is comprised of two main components; the digital pen, and individually tailored forms (1).</p>
<p> The pen looks and writes like a normal pen, however the integrated </p>
</div><!-- end#iformsystem1 -->
<div class="iformsystem2">
</div><!-- end#iformsystem2 -->
<div class="iformsystem3">
<p>microprocessor can accurately track its position in relation to a barely detectable pattern printed upon the form. This allows the automatic translation of the users handwritting into digital form.</p>
</div><!-- end#iformsystem3 -->
</div><!-- end#panel -->
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Solutions</h2>
<p>Dear Khadi - if you are reading this then everything should be roughly ok - was wondering, are you going to talk about hosted solutions and packages here? </p>
</div><!-- end#panel-wrapper -->
<div id="panel1picture">
</div><!-- end#panel1picture -->
<div class="panel-wrapper2">
</div><!-- end#panel-wrapper2 -->
</div><!-- end#panel -->
<div class="panel">
<div class="contactus">
<h2 class="title">Contact Us</h2>
<p class="heading">Write to us:</p>
<p class="space">Health Informatics Services Ltd</p>
<p class="space">The Primary Care Centre</p>
<p class="space">London</p>
<p class="space">SE6 4JH</p>
<p class="heading">To e-mail us, click <a href="mailto:his@his.com">here</a></p>
<p><b>Tel:</b> 0207 1381727</p>
<p><b>Fax:</b> 0208 6907185</p>
<p class="heading">Directions</p>
<p>Click <a href="http://www.multimap.com/directions/?displayName_2=SE6%204JH&qs_2=SE6%204JH&lat_2=51.44932&lon_2=-0.01802&countryCode_2=GB">here</a> to receive directions from any location</p>
</div><!-- end#contactus -->
<div class="contactus2">
</div><!-- end#contactus2 -->
<div class="contactus3">
</div><!-- end#contactus3 -->
</div><!-- end#panel -->
</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
</div><!-- end#contentmain -->
</div><!-- end#contentwrapper -->
<div id="footer">
<div id="footerimage">
</div><!-- end#footerimage -->
<div id="coda-nav-left-1" class="coda-nav-left"><a href="#" title="Slide left">«</a></div>
<div id="coda-nav-right-1" class="coda-nav-right"><a href="#" title="Slide right">»</a></div>
</div><!-- #endfooter -->
</div><!-- end#centered -->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11432490-1");
pageTracker._trackPageview();
} catch(err) {}</script></body>
<!--
Powered by Clickstream DataSherpa
--></html>
@charset "utf-8";
/* CSS Document */
html, body {
margin:0;
padding:0;
height:100%;
}
body {
background-image:url(background.png);
background-repeat:no-repeat;
background-position:center top;
background-color:#0c1130;
}
#floater {
position:relative;
float:left;
height:50%;
margin-bottom:-350px; /*half the contentwrapper height */
width:1px;
}
#centered {
position:relative;
clear:left;
height:600px;
width:80%;
max-width:850px; /*the width of the footer and header images */
min-width:850px;
margin:0 auto;
background:#fff;
border:4px solid #666;
}
#logo {
background:url(logo1.png);
width:336px;
height:82px;
position:relative;
left:35px;
top:10px;
}
#navbar {
background:url(navbar.png);
background-position:bottom;
background-repeat:no-repeat;
width:850px;
height:150px;
margin:0;
}
#rss {
width:45px;
height:43px;
position:absolute;
left:740px;
top:43px;
background:url(rss.png) no-repeat;
}
#facebook {
width:44px;
height:43px;
position:absolute;
left:775px;
top:43px;
background:url(facebook.png) no-repeat;
}
#twitter {
width:44px;
height:43px;
position:absolute;
left:810px;
top:43px;
background:url(twitter.png) no-repeat;
}
#contentwrapper {
overflow:auto;
height:350px;
width:850px;
padding:0px;
margin:0px;
background:url(contentbackground2.png);
background-repeat:no-repeat;
background-position:205px 10px;
}
#contentnav {
height:290px;
width:190px;
margin:20px 5px 0 0;
float:left;
}
#button1 {
width:179px;
height:39px;
background:url(news-and-publications.png);
position:absolute;
top:200px;
}
#button2 {
width:177px;
height:39px;
background:url(tech-support.png);
position:absolute;
top:250px;
}
#button3 {
width:178px;
height:39px;
background:url(arrange-a-quotation.png);
position:absolute;
top:300px;
}
#adobe {
width:24px;
height:25px;
background:url(adobe.png);
position:absolute;
top:350px;
}
#contentmain {
height:310px;
width:633px;
margin:20px 5px 0 5px;
float:right;
}
#footer {
clear:both;
height:100px;
margin:0;
}
#footerimage {
width:850px;
height:70px;
background-color:#151515;
position:absolute;
top:530px;
border-top:solid #666 2px;
}
#address {
width:122px;
height:70px;
background:url(address.png);
position:absolute;
top:380px;
left:5px;
}
#panel1picture {
height:157px;
width:174px;
background:url(homepicture.png);
background-repeat:no-repeat;
position:absolute;
left:400px;
float:right;
}
/*
jQuery Coda-Slider - sits inside the #content main
*/
noscript div {
background: #ccc;
border: 1px solid #900;
margin: 20px 0;
padding: 15px
}
.coda-slider-wrapper {
padding: 20px 0;
}
/* use this to keep the slider content contained in a box when JavaScript is disabled -- not working*/
.coda-slider-no-js .coda-slider {
height: 200px;
overflow: auto !important;
padding-right: 20px
}
/* slider width (without dynamic arrows) - currently removed */
.coda-slider, .coda-slider .panel {
width: 600px;
}
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a {
background: #151515;
color: #fff;
padding: 5px;
width: 20px;
position:relative;
top:45px;
left:780px;
}
#coda-nav-1.coda-nav ul li.tab1 {
background:url(home.png);
width:86px;
height:16px;
}
.coda-slider .panel-wrapper {
padding: 0 0 0 20px;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.panel-wrapper {
float:left;
width:380px;
max-height:170px;
overflow:hidden;
}
.panel-wrapper2 {
clear:both;
width:550px;
padding:0 0 0 20px;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
}
/* equivalent of the above panel-wrapper for the iforms page*/
.iformsystem1 {
width:200px;
height:150px;
float:left;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
padding:0 0 0 20px;
}
.iformsystem2 {
float:right;
width:370px;
height:150px;
background:url(iFormdiagram.png);
background-repeat:no-repeat;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.iformsystem3 {
clear:both;
width:550px;
padding: 0 0 0 20px;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.panel {
max-height:300px
}
.contactus {
float:left;
width:200px;
height:275px;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
padding:0 0 0 20px;
}
.contactus2 {
float:right;
width:380px;
height:275px;
background:url(map.png);
background-repeat:no-repeat;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.contactus3 {
clear:both;
width:580px;
font:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.heading {
font-weight:800;
}
.space {
line-height:.5px;
}
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Tabbed nav */
.coda-nav ul {
clear: both;
display: block;
margin: auto;
overflow: hidden;
position:absolute;
top:77px;
left:238px;
}
.coda-nav ul li { display: inline;}
.coda-nav ul li a {
height: 49px;
line-height: 49px;
width: 118px;
margin-right: 3px;
color: #fff;
display: block;
float: left;
padding: 0;
text-align: center;
text-decoration: none;
}
/* not yet in use*/
.coda-nav ul li a:hover {}
.coda-nav ul li a.current {}
.coda-nav ul li.tab1 a {
background:url(home.png);
background-repeat:no-repeat;
background-position:center;
}
.coda-nav ul li.tab2 a {
background:url(iformsystem.png);
background-repeat:no-repeat;
background-position:center;
}
.coda-nav ul li.tab3 a {
background:url(solutions.png);
background-repeat:no-repeat;
background-position:center;
}
.coda-nav ul li.tab4 a {
background:url(contactus.png);
background-repeat:no-repeat;
background-position:center;
}
.coda-slider-wrapper {
clear: both;
overflow: auto;
height:280px;
}
.coda-slider { float: left; overflow: hidden; position: relative; background:#fff; }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
Does anyone have any ideas at all? This is only my second site, and I’m struggling to work out what the hell is going on in IE!!!
Thanks,
Jeff