ie6 absolute div problem

bilsland · Apr 29th, 2008, 09:01

Hi
on this site http://www.39stepsstudio.com/clients...ies/index.html above the nav button for home in IE 6 & 7 a small 2px gap appears, in firefox there is no spacing and everything lines up as it should, i have no padding on this nav area and am foxed as to what could be creating this space?

Code: Select all

<!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>Brockie's Lodge Hotel</title>

<link rel="shortcut icon" href="favicon.ico" type="image/favicon"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">


<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
</head>
<body>


<script language="javascript" type="text/javascript">

</script>


<div id="stripe"></div>

<div id="main">
<div id="headerImage"></div>
<div id="headerBarBottom"><!--to cut down image size--></div>

<div id="navigation"><img src="images/logo.jpg" alt="navtop" width="196" height="50" />

<a id="navhome" href="#" title="Home"><span>Home</span></a>
<a id="navaccomodation" href="#" title="Accomodation"><span>Accomodation</span></a>
<a id="navmenus" href="#" title="Menus and outside catering"><span>Menus and outside catering</span></a>
<a id="navgallery" href="#" title="Gallery"><span>Gallery</span></a>
<a id="navlocal" href="#" title="Local Activities"><span>Local Activities</span></a>
<a id="navuseful" href="#" title="Useful Links"><span>Useful Links</span></a>
<a id="navcontact" href="#" title="Contact Us"><span>Contact Us</span></a>
 
  </div>
<div id="mainWatermark">

<div id="sideBar">
<div id="sideBarContent">

<h1>Special offer</h1>
<p>Our gallery contains an array of different images, from the Lodge Hotel's garden, room types ava.</p>
<div class="hr"></div>

<h1>Book a room</h1>
<p><strong>Bookings call: 07786 388 660</strong><br />
  <br />
Brockie's Lodge Hotel <br />
Kiltarlity, By Beauly, <br />
Inverness-shire, IV4 7HW</p>
<p><strong>M:</strong> 07786 388 660<br />
  <strong>E:</strong> info@brockieslodgehotel.co.uk </p>
<div class="hr"></div>

<h1>Join our mailing list</h1>
<p>Sign up for regular news, offers and information from the lodge</p>

<div id="formfield">
     <form name="Subscription" method="post" action="http://www.mail-interactive.co.uk/accounts/subscribe.php">
     <input type="hidden" name="FormValue_MailListIDs[]" value="330"/>
     <input name="FormValue_Email" type="text" class="formtext" value="" size="28" maxlength="50" style="width: 175px" alt="sign up"/>
     <input name="Subscribe" type="image" class="formbutton" id="Subscribe" value="Submit" src="images/submit.jpg" alt="Submit"/>
     <input type="hidden" name="FormValue_SuccessScreenID" value="MQ%3D%3D"/>
     <input type="hidden" name="FormValue_FailureScreenID" value="Mg%3D%3D"/>
     <input type="hidden" name="FormValue_CustomFieldIDs" value=""/>
</form>
    
     </div>
<div class="hr"></div>



 
</div>
</div>

<div id="content">
<div id="contentTop"></div>
<div id="contentMain">


<h1>Welcome to Brockie&rsquo;s Lodge Hotel</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure. Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation.</p>
<p>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure.</p>



  <div class="divider"><img src="images/dividerLine.gif" alt="" width="455" height="15" /></div>

<h1>The Lodge</h1>
<p><img src="images/image_lodge.jpg" alt="Brockie's Lodge" width="188" height="119" class="imageRight" />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure. Cicero are also reproduced in their exact original form, accompanied by English.</p>



<div class="divider"><img src="images/dividerLine.gif" alt="" width="455" height="15" /></div>




<div class="dialog">
<div class="hd"><div class="c"></div></div>
<div class="bd">
  <div class="c">
   <div class="s">

<!-- COLUMNS -->
<div id="col-one">
<h2>Around Beauly</h2>
<p>Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more</p>
</div>

  <div id="col-two">
  <h2>Loyalty Card</h2>
  <p>Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more</p>
  </div>

<div style="clear: both;"></div>
<!-- COLUMNS END! -->
    </div>
  </div>
</div>
<div class="ft"><div class="c"></div></div>
</div>








                    <div class="clear"></div>
  </div>
<div id="contentBottom"></div>
</div>

<div style="clear:both;"></div>
</div>
<div id="mainBottom"></div>
</div>
<div id="footer"><div class="content">
  <p>R & J Hospitality Limited Registered in Scotland Registered Office: 12 Coiltie Crescent, Kilmore, <br />
      Drumnadrochit, IV63 6TR  Company Registration No: SC336767 | Design by <a href="http://www.39stepsstudio.com">39steps</a> | valid <a href="#">css</a> & <a href="#">html</a></p>
  </div>
</div>
&nbsp;




</body>
</html>

Code: Select all

body {margin:0;padding:0;
background:#321908;
font-family:"Times New Roman", Times, serif;
text-align:center;}

a img {border:none;}

#stripe {
margin:0;
padding:0;
width:100%;
height:190px;
background:#40230d url('images/stripe.gif');
position:absolute;
left:0;
top:50px;
}

#main {
margin:0 auto;
padding:0;
padding-top:280px;
width:800px;
margin:0 auto;
overflow:hidden;
background:url('images/bodyBackground.jpg') repeat-y;
position:relative;
text-align:left;
}

#headerImage {
margin:0;
padding:0;
width:800px;
height:240px;
background:url('images/headerImage.jpg');
position:absolute;
left:0;
top:0;
}

#headerBar {
margin:0;
padding:0;
width:800px;
height:189px;
background:url('images/headerBar.jpg') repeat-y;
position:absolute;
left:0;
top:174px;
}

#headerBarBottom {
margin:0;
padding:0;
width:800px;
height:24px;
background:url('images/headerBarBottom.jpg') no-repeat;
position:absolute;
left:0;
top:240px;
}

/*-----------------------------------NAVIGATION----------------------------------------*/

#navigation {
margin:0;
padding:0;
width:196px;
position:absolute;
left:49px;
top:0px;
}

#navhome{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_home.jpg") no-repeat 0 0;}

#navhome:hover{background-position: 0 -33px;}

#navhome span{display: none;}

#navaccomodation{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_accomodation.jpg") no-repeat 0 0;}

#navaccomodation:hover{background-position: 0 -33px;}

#navaccomodation span{display: none;}

#navmenus{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_menus.jpg") no-repeat 0 0;}

#navmenus:hover{background-position: 0 -33px;}

#navmenus span{display: none;}

#navgallery{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_gallery.jpg") no-repeat 0 0;}

#navgallery:hover{background-position: 0 -33px;}

#navgallery span{display: none;}

#navlocal{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_local.jpg") no-repeat 0 0;}

#navlocal:hover{background-position: 0 -33px;}

#navlocal span{display: none;}

#navuseful{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_useful.jpg") no-repeat 0 0;}

#navuseful:hover{background-position: 0 -33px;}

#navuseful span{display: none;}

#navcontact{
display: block;
width: 196px;
height: 33px;
background: url("images/nav_contact.jpg") no-repeat 0 0;}

#navcontact:hover{background-position: 0 -36px;}

#navcontact span{display: none;}

/*-----------------------------------NAVIGATION----------------------------------------*/

#mainWatermark {
margin:0 20px;
padding:0;
width:100%;
}

#mainBottom {
margin:0;
padding:0;
width:800px;
height:30px;
background:url('images/mainBottom.jpg');
}

/*-----------------------------------FOOTER----------------------------------------*/
#footer {
margin:0;
padding:0;
}

#footer .content {
width:760px;
margin:auto;
text-align:left;
height:30px;
}

#footer img {
float:right;
}

#footer p {
text-align:left;
float:left;
font-size:10px;
font-family: Arial, Helvetica, sans-serif;
color:#665c44;
line-height:14px;
}

#footer a {
color:#7d735c;
text-decoration:none;
}

#footer a:hover {
color:#8f7e4d;
text-decoration:none;
}

p {
margin:0;
padding:10px;
line-height:14px;
}

/*-----------------------------------HEADER----------------------------------------*/

#headerBarBackground {
margin:0;
padding:0;
padding-left:470px;
height:189px;
background:url('images/headerHome.jpg') 245px 0px no-repeat;
}

#headerBarBackground.about {
background:url('images/headerAbout.jpg') 245px 0px no-repeat;
}

#headerBarBackground.wines {
background:url('images/headerWines.jpg') 245px 0px no-repeat;
}

#headerBarBackground.press {
background:url('images/headerPress.jpg') 245px 0px no-repeat;
}

#headerBarContents {
width:290px;
padding-top:20px;
}

#headerBarContents p {
margin-top:10px;
padding:0;
color:#F5E7D6;
font-size:12px;
line-height:16px;
}

#headerBarContents h1 {
margin-top:10px;
margin-bottom:0px;
padding:0;
color:#80684D;
font-size:30px;
font-weight:normal;
}

#headerBarContents a {
color:#FF0000;
text-decoration:none;
}


/*-----------------------------------SIDEBAR----------------------------------------*/

#sideBar {
float:left;
width:252px;
}

#sideBarContent {
margin:0;
margin-left:39px;
margin-right:37px;
margin-top:23px;
padding:0;
}

div.hr {
border-top:1px solid #e8ddc2;
background:#f8f3e7;
height:1px;
font-size:1px;
margin:10px 0px 10px 0px;
}

#sideBarContent h1 {
margin:0;
padding:10px 0;
color:#80684D;
font-size:18px;
font-weight:normal;
}

#sideBarContent p {
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
color:#baaa81;
padding:0;
margin:0px 0px 10px 0px;
}

#sideBarContent a {
color:#CC0000;
}

#sideBarContent a:hover {
color:#CC0000;
text-decoration:none;
}

/*-----------------------------------CONTENT----------------------------------------*/

#content {
float:left;
width:490px;
}

#content #contentTop {
height:18px;
background:url('images/contentTop.gif');
}

#content #contentMain {
background:url('images/contentBackground.jpg');
}

#content #contentBottom {
height:23px;
background:url('images/contentBottom.gif');
}

#content p {
font-size:12px;
line-height: 16px;
color:#baaa81;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:10px 20px;
}

#content h1 {
font-size:21px;
color:#655634;
font-weight:normal;
text-align:left;
margin:0;
padding:10px 20px;
}

#content h2 {
font-size:16px;
font-weight:normal;
text-align:left;
color:#655634;
margin:0;
padding:0;
margin:10px 20px;
margin-bottom:0;
}

#content h3 {
font-size:14px;
color:#2A1B00;
margin:0;
padding:0;
margin:10px 20px;
margin-bottom:0;
}

#content div.divider {
clear:both;
text-align:center;
background:url('images/dividerLine.gif') repeat-x;
margin:0 10px;
}

#content .imageRight {
float:right;
margin-left:10px;
margin-right:0px;
}

#content a {
color:#CC0000;
}

#content a:hover {
color:#CC0000;
text-decoration:none;
}



div.clear {clear:both;}


/*-----------------------------------FORM----------------------------------------*/

.formtext{
font-size: 11px;
color: #655634;
height: 18px;
background-color: #f8f3e7;
border: 1px solid #efe3c1;
font-family: Arial, Helvetica, sans-serif;
}

#formfield{
padding: 0px 0px 0px 0px;
}
.formbutton{
}
form {
margin:0;
padding:0;
}

/*-----------------------------------HOME PAGE COLUMNS----------------------------------------*/

#col-one {
float: left;
width: 210px;
}

#col-one p {
font-size:11px;
line-height: 14px;
color:#baaa81;
font-family: Arial, Helvetica, sans-serif;
margin:0;
}

#col-two {
float: right;
width: 210px;
}

#col-two p {
font-size:11px;
line-height: 14px;
color:#baaa81;
font-family: Arial, Helvetica, sans-serif;
margin:0;
}

.dialog {
width:455px;
margin:0px auto;
min-width:20em;
color:#fff;
}

.dialog .hd .c,
.dialog .ft .c {
font-size:1px; /* ensure minimum height */
height:13px;
}

.dialog .ft .c {
height:14px;
}

.dialog .hd {
background:transparent url(images/tl.gif) no-repeat 0px 0px;
}

.dialog .hd .c {
background:transparent url(images/tr.gif) no-repeat right 0px;
}

.dialog .bd {
background:transparent url(images/ml.gif) repeat-y 0px 0px;
}

.dialog .bd .c {
background:transparent url(images/mr.gif) repeat-y right 0px;
}

.dialog .bd .c .s {
margin:0px 8px 0px 4px;
background:#f9f5ea url(images/ms.jpg) repeat-x 0px 0px;
padding:5px;
}

.dialog .ft {
background:transparent url(images/bl.gif) no-repeat 0px 0px;
}

.dialog .ft .c {
background:transparent url(images/br.gif) no-repeat right 0px;
}

html>body .dialog pre {
font-size:1.1em;
}

any help would be greatly appreciated!

shalom_m · Apr 29th, 2008, 12:43

Have you tried making the logo.jpg graphic 55px high as opposed to 50px?
Have you tried including the logo.jpg in your CSS as background as opposed calling it from html?