1 reply [Last post]
ticky
ticky's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-4
Joined: 2012-09-25
Posts: 3
Points: 5

Happy to stumble across this website in hope that I can have help with my coding issue.

Just started working at this company and when they found out I used to design websites, I subsequently took over re-designing their website from an outside guy. Most of it was done, but changes and converting A LOT to CSS was what I mostly worked on. It's been more than a few years since I've coding a site, so I'm sure I've missed something along the way here.

The page renders fine in the latest Chrome, Firefox and Safari browsers, but the doesn't load properly in IE. I know I have a few other slight issues and differences between browsers, but obviously this is the big one. Any help would be appreciated.

Website: http://www.convergeadv.com

HTML (not everything, just relevant)

<!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" xml:lang="en" >
<head>
<title>Converge Advertising | We Are Care</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<link href="jquery.bxSlider/bx_styles/bx_styles.css" rel="stylesheet" type="text/css" />
<link href="converge_styles.css" rel="stylesheet" type="text/css" />
<link href="tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript" src='scripts/jquery.tools.min.js'></script>
<script src="jquery.bxSlider/source/jquery.bxSlider.js" type="text/javascript"></script>
<script src="jquery.bxSlider/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
  $('#slider1').bxSlider({
    auto: true,
    pager: true
  });
});
</script>
<script type="text/javascript">
  $(function() {
    $("#tab_nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
    });
</script>
</head>
 
<body>
 
<!-- Banner -->
<div class="wrapper">
	<div class="globalspacer"></div>
	<header class="box large globalnav">
		<div class="content">
			<div id="logo" class="logo"><a id="logo_inner_pages" href="index.html">Converge</a></div>
			<ul id="nav">
  				<li class="current"><a href="index.html">HOME</a></li>
  				<li><a href="company.html">COMPANY</a></li>
  				<li><a href="services.html">SERVICES</a></li>
  				<li><a href="products_and_partners.html">PRODUCTS &amp; PARTNERS</a></li>
  				<li><a href="therapeutic_area.html">THERAPEUTIC AREAS</a></li>
  				<li><a href="contact.html">CONTACT</a></li>
			</ul>
		</div>
	</header>
<!-- End Banner -->

CSS (not everything, just relevant)

@font-face {
	font-family: HumanST;
	src: url(fonts/HumanST.ttf) format("truetype");
}
@font-face {
	font-family: HumanST-Bold;
	src: url(fonts/HumanST-Bold.ttf) format("truetype");
}
 
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #E4E4E4;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
	font: 12px/normal HumanST, sans-serif;
}
.clear {
	clear: both;
}
.hidden {
	display: none;
}
a {
	border: currentColor; color: rgb(76, 185, 217); text-decoration: none;
}
a:hover {
	border: currentColor; color: rgb(76, 185, 217); text-decoration: none;
}
a:active {
	color: rgb(249, 161, 58); text-decoration: none;
}
a:visited {
	border: currentColor; color: rgb(76, 185, 217); text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.wrapper {
	background: url("images/bg_edge.png") repeat-y left top; margin: 0px auto; width: 1003px; overflow: hidden; position: relative; min-height: 100%;
}
.globalspacer {
	background: url("images/spacer_converge.gif"); height: 67px;
}
.globalnav {
	background: url("images/header_corner.png") no-repeat left bottom; top: 0px; margin-top: 15px; z-index: 100 !important; 
}
.box {
	overflow: hidden;
}
.large.box {
	width: 1003px;
	display: block;
}
.small.box {
	padding: 0px 9px; width: 986px; z-index: 2;
}
.feature {
	top: 55px; height: 426px; padding-top: 55px !important;
}
.globalnav .content {
	background: url("images/header_bgblue.png") repeat-x 0px 100%; padding: 0px 0px 0px; height: 51px; color: rgb(255, 255, 255); position: relative;
}
.globalnav .logo {
	background: url("images/header_logo.jpg") no-repeat; width: 218px; height: 51px; text-indent: -9999px; margin-left: 40px; float: left;
}
.globalnav ul {
	float: left; margin-top: 15px; margin-left: -25px;
}
.globalnav li {
	list-style: none; float: left; display: inline-block;
}
.globalnav li a {
	padding: 0px 13px 0px 20px; color: rgb(255, 255, 255); font-family: "HumanST"; font-size: 13px; display: inline-block; text-decoration: none;
}
.globalnav .current a {
	color: rgb(160, 182, 211); text-decoration: none;
}
.globalnav li a:hover {
	color: rgb(249, 161, 58); text-decoration: none;
}
#logo_inner_pages {
	width: 180px; height: 51px; display: block; margin-left: 15px;
}
.home #logo_inner_pages {
	display: none;
}

Thanks in advance

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DTD! if you want to use html5

DTD! if you want to use html5 elements use a general doctype not xhtml

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me