No replies
kingk1974
Offline
Enthusiast
Orange
Last seen: 11 years 5 weeks ago
Orange
Joined: 2005-02-14
Posts: 66
Points: 0

Hello everyone take a look at this page in IE on the PC

http://www.damonbraces.com/_private/index.htm

I having a problem with the "header image" and the "find a doctor sections" in IE on the PC it's giving me a space below each of the images why?

Here the CSS:
* { margin: 0; padding: 0;}
img * { margin: 0; padding: 0;}
body { background-color: #0068ac; color: #666; font-family: Helvetica, sans-serif; font-size: 62.5%;}
/* container */
#container { margin: 0 auto; position: relative; width: 770px;}
/* header */
#header h2 { display: none;}
#header h3 { display: none;}
#menu2 { border-left: 1px solid #fff; border-right: 1px solid #fff; height: 20px;}
#menu2 ul { float: right; font-size: 1.2em; text-transform: uppercase;}
#menu2 li { float: left; list-style: none; border-left: 1px solid #fff; width: 9em;}
#menu2 li a { display: block; padding: 5px 0 3px; font-weight: bold; text-align: center;}
#menu2 a:link { color: #FFF; text-decoration: none;}
#menu2 a:visited { color: #a4cbe5; text-decoration: none;}
#menu2 a:hover { color: #FFF; text-decoration: underline;}
#menu2 a:active { color: #a4cbe5; text-decoration: none;}
/* wrap */
#wrap { background-color: #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; float: left; width: 768px;}
/* columns */
#column1 { background-image: url(../images/template/gradient.gif); background-position: top; background-repeat: no-repeat; float: left; width: 289px;}
/* menu1 */
#menu1 { float: left;}
#menu1 ol li { list-style: none; margin: 1em;}
#menu1 a { color: #0068ac; font-size: 1.3em; font-weight: bold;}
#menu1 a:link { color: #0068ac; text-decoration: none;}
#menu1 a:visited { color: #01426e; text-decoration: none;}
#menu1 a:hover { color: #FFF; text-decoration: underline;}
#menu1 a:active { color: #0068ac; text-decoration: none;}
/* finder a doctor form */
#findADoctorContainer { float: left; margin: 2em 0; text-align: center;}
#findADoctor { background-color: #0068ac; margin: 0 17px; width: 255px;}
#findADoctor h3 { color: #FFF; font-size: 1.2em; margin: 0 0 .5em 0;}
#findADoctor .button { margin: 0 0 0 3px;}
#finderTopGraphic { background-image: url(../images/boxGraphics/finderG01.gif); background-repeat: no-repeat; height: 7px; margin: 0 17px; width: 255px;}
#finderBottomGraphic { background-image: url(../images/boxGraphics/finderG02.gif); background-repeat: no-repeat; height: 7px; margin: 0 17px; width: 255px;}
/* column2 */
#column2 { float: left; width: 479px;}
/* content */
#content { float: left; padding: 20px;}
#content h1 { color: #0068ac; font-size: 1.8em; margin: 0 0 1em 0;}
#content h2 { color: #0068ac; font-size: 1.6em; line-height: 1.2em; margin: 1em 0 0 0;}
#content h3 { color: #0068ac; font-size: 1.4em; font-weight: lighter; line-height: 1.2em; margin: 1em 0;}
#content p { font-size: 1.2em; line-height: 1.4em; margin: 0 0 1em 0; text-align: left;}
#content ul { font-size: 1.1em; line-height: 1.2em; margin: -.5em 2em 1em; text-align: left;}
#content.homepage { background-image: url(../images/homePage/kidsPic.jpg); background-position: right; background-repeat: no-repeat; height: 271px; width: 420px;}
#content h2.homepage { color: #0068ac; font-size: 2.5em; line-height: 1.2em; margin: 1em 0;}
#content h2.homepage span { font-size: 1em; font-weight: lighter;}
#content h3.homepage { color: #0068ac; font-size: 2.5em; font-weight: lighter; line-height: 1.2em; margin: 1em 0;}
/* imgbox */
#imgbox { float: right; margin: 0 0 0 20px; width: 200px;}
#imgbox img { margin: 0;}
#imgbox p { color: #0068ac; font-size: 1.1em; margin: .5em 0; text-align: left;}
#imgbox p span { font-weight: bold;}
#imgbox p span em { font-style: normal; display: inline; margin: 0 0 0 5.8em;}
/* callout */
#callout { float: right; margin: 1em 0 1em 20px; width: 200px;}
#callout blockquote { color: #0068ac; font-size: 1.4em; font-weight: bold; padding: 10px;}
#callout p { color: #FFF; font-size: 1.2em; font-weight: bold; margin: 0 0 1em 0; text-align: left;}
#callout h4 { color: #b1cadb; font-size: 1.2em; font-weight: lighter; text-align: left;}
/* advertisement */
advertisement { clear: both; margin: 0 auto; width: 770px;}
/* lower container bottom */
#lowerContainerGraphic { background-image: url(../images/template/containerBottomWithoutAd.gif); clear: both; height: 10px; margin: 0 auto; width: 770px;}
/* footer */
#footer { clear: both; margin: 0 auto; width: 768px;}
#footer p { color: #b1cadb; font-size: .9em; padding: 5px 0; text-align: center;}

/* ---- special divs and classes ---- */
.clearthis { clear: both;} /* (this is the code you will use) <div class="clearthis"><!-- this div is not floated and its clear property is set to both --></div> */
img.icons { float: left; margin: -1px 3px 0 0; border: none;}

and here's the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Damon System Braces</title>

<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<img src="images/template/damonLogo.gif" alt="Damon Consumer" />

<h2>A fantastic smile...</h2>
<h3>faster and with outstanding comfort</h3>
<div id="menu2">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="faqs.htm">FAQ's</a></li>
<li><a href="contactUs.htm">Contact Us</a></li>

<li><a href="research.htm">Research</a></li>
</ul>
</div>
</div>

<div id="wrap">
<div id="column1">
<div id="menu1">
<ol>

<li><a href="q01.htm">Why should I get braces?</a></li>
<li><a href="q02.htm">What makes Damon different?</a></li>
<li><a href="q03.htm">Who can wear Damon braces?</a></li>
<li><a href="q04.htm">How long does treatment last?</a></li>
<li><a href="q05.htm">Will I need to have teeth pulled?</a></li>
<li><a href="q06.htm">Will braces hurt?</a></li>

</ol>
</div>
<div id="findADoctorContainer">
<div id="finderTopGraphic"></div>
<div id="findADoctor">
<form action="http://" method="POST">
<h3>Find a Damon doctor near you Zip Code:</h3>
<input class="formFieldText" name="email" type="text" size="20" />

<input type="HIDDEN" name="customerZipCode" value="5541" />
<input class="button" name="GO" type="submit" id="submit" value="GO" />
</form>
</div>
<div id="finderBottomGraphic"></div>
</div>
</div>

<div id="column2">

<div id="content" class="homepage">
<h2 class="homepage">Breakthrough<br /> <span>Technology.</span></h2>
<h3 class="homepage">Damon<br /> self-ligating<br /> system</h3>
</div>
</div>

</div>

<!-- This div is to replace the Lower Container Graphic Div --> <div id="advertisement">
<img src="images/ads/768x75PattersonDental.jpg" width="770" height="74" />
</div> <!-- Only use this div if there is no Advertisment
<div id="lowerContainerGraphic"></div> -->
<div id="footer">
<p>Copyright 2005 Sybron Dental Specialties Inc. All Rights Reserved | Terms of Use | Privacy</p>
</div>

</div>
</body>
</html>