4 replies [Last post]
benjaminbaker
benjaminbaker's picture
Offline
newbie
Last seen: 6 years 15 weeks ago
Timezone: GMT-4
Joined: 2013-07-17
Posts: 2
Points: 3

Hello!

I'm new to the forum and relatively new to web development. I would be very grateful for some assistance with a website I've been working on: http://www.jameskimballdds.com

The website works with no problems in Firefox, Safari, and Chrome. However, in Internet Explorer, it's not showing up correctly. Elements are overlapping and the slideshow is not working.

Can anyone give me some specific solutions to this issue? It's difficult not knowing what in the world Internet Explorer doesn't like about my code, so your help would be awesome.

If you need me to past in the code, I can.

Thank you!

Ben

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

Please address document

Please address document markup errors (W3C Validator) before posting questions, they are fairly glaring ones Smile

IE later versions will likely sort themselves out when you present them with a properly formed document if not re-state the issue and in which IE browser version.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

No DTD

You failed to include a DocType Declaration, which causes IE to act like IE5; iwo, stupid.

Make the first line of the html page (before the html element) <!DOCTYPE html>.

You have syntax errors that need to be fixed.

You have typos in your css file.

Fixing these won't necessarily fix the page, but it's where to start.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 4 years 38 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

some css syntax errors

some CSS syntax errors:

AttachmentSize
css-syntax-errors.jpg 361.96 KB
benjaminbaker
benjaminbaker's picture
Offline
newbie
Last seen: 6 years 15 weeks ago
Timezone: GMT-4
Joined: 2013-07-17
Posts: 2
Points: 3

THANKS! Still having one issue...

Your feedback was very helpful—thanks.

Unfortunately my client is still noticing some overlapping when they use Internet Explorer 8 (8.0.6001.18702).

However, I tested it at browsershots.org, and it seems fine:

Any idea what the problem could be?

Thanks!

Ben
--------------------------------------------------------------

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
<link href="kimballdds.css" type="text/css" rel="stylesheet" >
		<title>James F. Kimball, DDS | Chattanooga Dentist</title>
 
<meta name="description" content="Welcome to Dr. Kimball's office!">
<meta name="keywords" content="Dentist,Chattanooga,Dr. Kimball,James Kimball,DDS,James F. Kimball, D.D.S.">
<meta name="author" content="James Kimball">
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<link rel="icon" type="image/ico" href="http://www.jameskimballdds.com/images/favicon.ico" >
<script type="text/javascript" src="slideshow.js"></script>
 
	<script type="text/javascript">
		$(function() {
 
			$("#slideshow > div:gt(0)").hide();
 
			setInterval(function() { 
			  $('#slideshow > div:first')
			    .fadeOut(1000)
			    .next()
			    .fadeIn(1000)
			    .end()
			    .appendTo('#slideshow');
			},  3000);
 
		});
	</script>
 
	</head>
	<body>
 
 
	<div id="wrap">
		<h1>
			<a href="index.html">
			<img src="images/logo.png"
			alt="James F. Kimball, DDS" ></a>
		</h1>
		<ul id="navigation">
			<li><a href="index.html" class="selected" >HOME</a></li>
			<li><a href="services.html">SERVICES</a></li>
			<li><a href="ourteam.html">OUR TEAM</a></li>
			<li><a href="financialinfo.html">FINANCIAL INFO</a></li>
			<li><a href="ouroffice.html">OUR OFFICE</a></li>
		</ul>
 
		<div class="column1of2">
 
<div id="slideshow">
   <div>
     <img src="images/office_1.jpg" alt="Office">
   </div>
   <div>
     <img src="images/services_1.jpg" alt="Services">
   </div>
<div>
     <img src="images/lobby_door_1.jpg" alt="Lobby Door">
   </div>
   <div>
     <img src="images/lobby_view_1.jpg" alt="Lobby View">
   </div>
	<div>
     <img src="images/lobby_1.jpg" alt="Lobby">
   </div>
 
 
</div>
 
		<h2>Welcome to Dr. Kimball's office!</h2>
		<p>Achieving ideal oral health and a pleasing smile requires personalized attention, a comprehensive approach, excellent technical skills and an emphasis on prevention education.
Dr. Kimball and his team's goal is to offer every patient the services which will provide successful outcomes for any and all dental needs.</p>
 
		</div>
 
 
 
 
		<div class="column2of2">
		<hr>
		<h3>ADDRESS</h3>
			<p>951 Riverfront Parkway
			<br>Suite 303
			<br>Chattanooga, TN 37402
			<br><a id="map" href="http://goo.gl/maps/NkLDE" target="_blank">Map</a></p>
		<hr>
		<h3>CONTACT</h3>
			<p>OFFICE: 423-266-7927</p>
			<p>FAX: 423-266-7650</p>
			<p>EMAIL:
			<a id="email" href="mailto:[email protected]">contact@jameskimballdds.com</a></p>
		<hr>
		<h3>HOURS</h3>
			<p>Mon-Thurs: 8AM-5PM
			<br>Select Fridays: 8AM-12PM</p>
			<p><em>Emergencies will be treated on an individual basis.</em>
			</p>
 
		<h4><a href="https://dl.dropboxusercontent.com/u/1956414/Dr.%20Kimball/IMAGES/Patient_Forms.pdf">NEW PATIENT FORMS</a></h4>
 
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fdrkimball&amp;send=false&amp;layout=standard&amp;width=300&amp;show_faces=true&amp;font=verdana&amp;colorscheme=light&amp;action=like&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:80px;" allowTransparency="true"></iframe>
 
 
		</div>
 
		<div id="footer">
		<hr>
		&copy; 2013 James F. Kimball, DDS
		</div>
 
	</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=9091974; 
var sc_invisible=1; 
var sc_security="d9122d57"; 
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="web analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/9091974/0/d9122d57/1/"
alt="web analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
 
	</body>
</html>

CSS:

body {
	background-color: #F8F8F2;
	margin-top: 35px;
	overflow-y: scroll;
}
 
#wrap { 
	width: 1000px;
	margin: 0 auto; 
}
 
#slideshow { 
    position: relative; 
    width: 620px; 
    height: 480px;
}
 
#slideshow > div { 
    position: absolute; 
}
 
p {
	font-family: Palatino, Times, serif;
	font-size: 14px;
	line-height: 19px;
}
 
 
h1 {
	height: 28px;
	width: 362px;
	margin-top: 4px;
	margin-left: -4px;
	float: left;
	background-image: url("images/logo.png");
	background-repeat:no-repeat;
	max-width:100%;
}
 
#map {
	color: #4FB468;
	text-decoration: none;
}
 
#map a:hover {
	color: #4FB468;
	text-decoration: underline;
}
 
 
#email {
	color: #4FB468;
}
 
#email a:hover {
	text-decoration: underline;
}
 
#navigation {
	float: right;
	margin-top: 2px;
	display: inline;
	position: relative;
	padding-left: 0px;
}
 
#navigation a:link {
	color: #000000;
	text-decoration: none;
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 2px;
	margin-top: 9px;
	margin-left: 32px;
	float: left;
}
 
 
#navigation a:visited {
	color: #000000;
	text-decoration: none;
}
 
#navigation a:hover {
	color: #000000;
	text-decoration: none;
	height: 18px;
	margin-top: 12px;
	line-height: 10px;
	border-bottom: 1px solid #4FB468;
}
 
#navigation a:visited:hover {
	color: #000000;
	text-decoration: none;
}
 
#navigation a.selected {
	text-decoration: none;
	height: 18px;
	margin-top: 12px;
	line-height: 10px;
	border-bottom: 1px solid #4FB468;
}
 
#navigation a:active {
	color: #4FB468;
	text-decoration: none;
}
 
#navigation li {
	display: inline;
	float: left;
}
 
 
 
.column1of2 {
	float: left;
	width: 620px;
	clear: left;
	margin-top: 0px;
	margin-bottom: 0px;
 
}
 
 
.column1of2 img {
	margin-top: 10px;
    padding: 10px; 
    box-shadow: 0 0 10px #999999;
	background-color: #FFFFFF;
}
 
.column1of2 a {
	text-decoration: none;
	color: #4FB468;
}
 
.column1of2 a:hover {
	text-decoration: underline;
	color: #4FB468;
}
 
h2 {
	font-family: Verdana, Arial, sans-serif;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0px;
	padding-top: 15px;
	color: #4FB468;
	margin-top: 0px;
	margin-bottom: -5px;
}
 
 
hr {
    border: 0;
    height: 1px;
    background: #4FB468;
	width: 100%;
}
 
.column2of2 {
	float: left;
	width: 350px;
	margin-left: 30px;
	position: relative;
}
 
.column2of2 a {
	text-decoration: none;
}
 
strong {
	font-weight: bold;
	letter-spacing: .1em;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	color: #4FB468;
}
 
em {
	letter-spacing: 0em;
}
 
 
h3 {
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: .15em;
	color: #4FB468;
	text-transform: uppercase;
	margin-bottom: -3px;
}
 
 
#dentalservices {
	font-family: Palatino, Times, serif;
	font-size: 14px;
	margin-left: -24px;
	line-height: 21px;
	position: relative;
}
 
#insurancecompanies {
	font-family: Palatino, Times, serif;
	font-size: 14px;
	margin-left: -24px;
	line-height: 21px;
}
 
#links {
	width: 250px;
}
 
#links a {
	color: #4FB468;
}
 
#links a:hover {
	color: #4FB468;
	text-decoration: underline;
}
 
#bold {
	font-weight: bold;
	font-size: 15px;
	color: #000000;
	text-decoration: none;
}
 
h4 {
	font-family: Verdana, Arial, sans-serif;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #4FB468;
	text-transform: capitalize;
	float: left;
	margin-top: 16px;
	margin-bottom: 65px;
}
 
h4 a {
	font-family: Verdana, Arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #FAFAF0;
	text-decoration: none;
	background-color: #4FB468;
	padding: 8px 10px 8px 10px;
	border-radius: 5px;
	float: left;
}
 
h5 {
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: .15em;
	margin-bottom: -2px;
	margin-top: 15px;
	color: #4FB468;
	text-transform: uppercase;
}
 
 
 
#footer {
	position: relative; 
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #000000;
	padding-top: 10px;
	margin-bottom: 20px;
	clear: both;
	width: 100%; 
}