IE layout issues

Discussion in 'CSS' started by bobthebuilder, Aug 17, 2006.

0
  1. #1
    For some reason there is a huge gap between two subdivisions contained in one main division on my site. Everything looks just fine when viewed with firefox. Here is the site: http://vfweurope.net/deptmainV2. There are two main divisions, each of which have one or more subdivisions. The gap is occuring in the divion called "content." Partial HTML code found below, full code will have to pulled from the site. Whenever I add/remove something to/from the other main division, "pagnav", or it's subdivision, "advert", it will increase/decrease the gap between the other subdivions in the other main division. Not sure what is going on. Any help would be appreciated.

    Location of gap in IE:
    [​IMG]

    FULL CSS code:
    /***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
	font-family:Arial, Helvetica, sans-serif;
	color:#333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background: #cccccc url(images/main/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/************** header tag styles **************/

h1{
 font: bold 120% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}


/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
	position:absolute;
	top: 112px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color:#F8EDE9;
}

#tl {
	position:absolute;
	top: -1px;
	left: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#tr {
	position:absolute;
	top: -1px;
	right: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#masthead{
	position: absolute;
	top: 0px;
	left: 2%;
	right: 2%;
	width:95.6%;
	
}

#pageNav{
	float: left;
	width:178px;
	padding: 0px;
	background-color: #F5f7f7;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font: small Verdana,sans-serif;
}

#content{
	padding: 0px 10px 0px 0px;
	margin: 0px 0px 0px 178px;
	border-left: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #ffffff;
	font-weight: normal;
}

/************** utility styles *****************/

#utility{
	font: 75% Verdana,sans-serif;
	position: absolute;
	top: 16px;
	right: 0px;
	color: #919999;
}

#utility a{
	color: #ffffff;
}

#utility a:hover{
	text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
	padding: 0px 0px 14px 10px;
	margin: 0px;
	border-bottom:1px solid #ccd2d2;
}

#pageName h2{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	margin:0px;
	padding: 0px;
}

#pageName img{
	position: absolute;
	top: 0px;
	right: 6px;
	padding: 0px;
	margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 40px;
color:#FFFF33;
padding: 0px;
margin: 0px;
background-image: url(images/main/glbnav_background.gif);
}

#globalNav img{
	margin-bottom: -4px;
 
}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
}

#globalLink{
	position: absolute;
	top: 10px;
	height: 20px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.glink, a.glink:visited{
  	font-size:small;
  	color:#0000FF;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image: url(images/main/glblnav_selected.gif);
	text-decoration: none;
}

.skipLinks {display:none;}

/************ subglobalNav styles **************/

.subglobalNav{
	position: absolute;
	top: 84px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
	font-size: 80%;
	color: #ffffff;
}

.subglobalNav a:hover{
	color: #cccccc;
}

/*************** search styles *****************/

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
	display:none;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
	
}

#search a:hover{
	margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
	padding: 5px 0px 5px 10px;
	font: small Verdana,sans-serif;
	color: #AAAAAA;
	display:none;
}

#breadCrumb a{
	color: #AAAAAA;
}

#breadCrumb a:hover{
	color: #005FA9;
	text-decoration: underline;
}


/************** feature styles *****************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
	min-height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	padding: 30px 0px 5px 0px;
}

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
}
/*** feature tables on tabular pages *************/
.feature th.smsect {
	background-color:#FFFFCC;
}
.feature th.mnsect {
	background-color:#BCE6FA;
}

/*************** story styles ******************/

.story {
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story h3{
	font: bold 125% Arial,sans-serif;
	color: #000000;
}

.story p {
	padding: 0px 0px 10px 0px;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{
	text-decoration: underline;
}

td.storyLeft{
	padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
	clear: both;
	border-top: 1px solid #cccccc;
	font-size: small;
	color:#666666;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
	margin: 0px;
	padding: 0px;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image: url(images/main/bg_nav.jpg);
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}

.relatedLinks a{
	display: block; 
}


/**************** advert styles *****************/

#advert{
	padding: 10px;
}

#advert img{
	display: block;	
}

/********************* end **********************/
    Code (markup):
    Partial 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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>VFW Department of Europe</title>
<link rel="stylesheet" href="main.css" type="text/css" />
[COLOR="red"]JAVASCRIPT REMOVED TO MEET CHARACTER REQUIREMENTS[/COLOR]
</head>
<body onmousemove="closesubnav(event);">
[COLOR="Red"]JAVASCRIPT REMOVED TO MEET CHARACTER REQUIREMENTS[/COLOR]
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="#pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
  <h1 id="siteName">VFW Department of Europe </h1>
  <div id="utility"><a href="#"><span style="cursor:help">Help</span></a> | <a href="mailto:dept.webmaster@vfweurope.net">Contact Us </a> | <a href="https://www.vfw.org/index.cfm?fa=mbr.leveld&amp;did=1211">Join</a> </div>
  <div id="globalNav"> <img alt="" src="images/main/gblnav_left.gif" height="40" width="22" id="gnl" /> <img alt="" src="images/main/glbnav_right.gif" height="40" width="22" id="gnr" />
    <div id="globalLink"> <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Subordinate Units</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Information</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Programs</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Get Involved </a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Membership</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Gallery</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Intranet</a><a href="http://www.vfweurope.net" id="gl8" class="glink" onmouseover="ehandler(event,menuitem8);">Home</a></div>
    <!--end globalLinks-->
    <form id="search" action="">
      <input name="searchFor" type="text" size="10" />
      <a href="">search</a>
    </form>
  </div>
  <!-- end globalNav -->
  <!-- begin subNav -->
  <!-- Subordinate Units subNav -->
  <div id="subglobal1" class="subglobalNav"> <a href="#">Grand Of Europe</a> | <a href="#">District One</a> | <a href="#">District Three</a> | <a href="#">Department Posts & Post Websites</a></div>
  <!-- Information subNav -->
  <div id="subglobal2" class="subglobalNav"> <a href="#">Officers</a> | <a href="#">Department Planer</a> | <a href="#">Department of Europe History</a> | <a href="#">VFW History</a> | <a href="#">POW-MIA</a> | <a href="http://www.vfwdc.org/NLS/1legishomepage.htm" target="_blank">Legislative News and Alerts</a></div>
  <!-- Programs subNav -->
  <div id="subglobal3" class="subglobalNav"> <a href="#">Military Assistance Program</a> | <a href="#">Veteran Services</a> | <a href="#">Community Services</a> | <a href="#">Teachers Award</a> | <a href="#">Scouting</a> | <a href="#">National Recognition Program</a> | <a href="#">Buddy Poppy</a> | <a href="#">Flag Education</a> </div>
  <!-- Get Involved subNav -->
  <div id="subglobal4" class="subglobalNav"> <a href="https://secure2.convio.net/vfw/site/SPageServer?pagename=donation_main" target="_blank">Make A Donation</a> | <a href="http://www.operationuplink.org/" target="_blank">Operation Uplink Phone Cards</a> | <a href="#">VFW Foundation</a> | <a href="#">America Bands Together</a> </div>
  <!-- Membership subNav -->
  <div id="subglobal5" class="subglobalNav"> <a href="#">Why Join?</a> | <a href="#">Member Benefits and Perks</a> | <a href="#">Membership Eligibility</a> | <a href="https://www.vfw.org/index.cfm?fa=mbr.leveld&amp;did=1211">Become A Member</a> | <a href="http://www.vfw.org/index.cfm?fa=mbr.levelc&amp;cid=1891&amp;tok=1" target="_blank">VFW Posts &amp; Websites</a> | <a href="http://www.vfw.org/index.cfm?fa=mbr.levelc&amp;cid=164&amp;tok=1" target="_blank">Member Tools</a> | <a href="http://www.vfw.org/index.cfm?fa=qtrtools.home&amp;tok=1" target="_blank">Quartermaster Tools</a> </div>
  <!-- Gallery subNav -->
  <div id="subglobal6" class="subglobalNav"> <a href="#">Coming Soon!</a></div>
  <!-- Intranet subNav // -->
  <div id="subglobal7" class="subglobalNav"> <a href="intranet/deptlibrary/deptintra.html">Department Members Library</a> | <a href="intranet/grandlibrary/grandintra.html">Grand Members Library</a> | <a href="intranet/IT/itintra.html">IT Section</a></div>
   <!-- Home subNav // -->
  <div id="subglobal8" class="subglobalNav">&nbsp;</div>
</div>
<!-- end masthead -->
<div id="pagecell1">
  <!--pagecel1-->
  <img alt="" src="images/main/tl_curve_white.gif" height="6" width="6" id="tl" /> <img alt="" src="images/main/tr_curve_white.gif" height="6" width="6" id="tr" />
  <div id="breadCrumb"> <a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> / <a href="#">Breadcrumb</a> / </div>
  <div id="pageName">
    <h2>Welcome!</h2>
  </div>
  <div id="pageNav">
    <div id="sectionLinks"> <a href="#">Crusader Program </a> <a href="#">Bier Busters </a> <a href="http://www.vfwstore.org/" target="_blank">VFW Store </a> <a href="http://www.vfwnationalhome.org/" target="_blank">VFW National Home </a> <a href="http://patriotfiles.org/HallOfHeroes.htm" target="_blank">Hall of Heroes </a> </div>
    <div class="relatedLinks">
      <h3>Supporting Our Troops   </h3>
      <a href="http://www.anysoldier.com/" target="_blank">Any Soldier.com </a> <a href="http://www.booksforsoldiers.com/" target="_blank">Books for Soldiers </a> <a href="http://www.americasupportsyou.mil" target="_blank">America Supports You </a> <a href="http://www.amillionthanks.org/" target="_blank">A Million Thanks</a> <a href="http://patriotfiles.org/HallOfHeroes.htm" target="_blank">Hall of Heroes </a> <a href="http://www.operationhomefront.net/" target="_blank">Operation Homefront</a> <a href="http://www.treatsfortroops.com/" target="_blank">Treats for Troops </a> <a href="http://www.uswardogs.org/" target="_blank">US War Dogs  </a> <a href="#"></a> </div>
    <div class="relatedLinks">
      <h3>News</h3>
      <a href="http://www.vfw.org/index.cfm?fa=news.levelc&amp;cid=729" target="_blank">VFW News</a> <a href="http://www.stripes.com/" target="_blank">Stars and Stripes </a> <a href="http://abcnews.go.com/" target="_blank">ABC</a> <a href="http://www.bbc.co.uk/" target="_blank">BBC</a> <a href="http://www.cnn.com/" target="_blank">CNN</a> <a href="http://www.foxnews.com/" target="_blank">FOX</a> <a href="http://news.google.com/" target="_blank">Google News </a> </div>
    <div id="advert"> 
      <a href="http://www.operationuplink.org/" target="_blank"><img src="images/shared/logos/uplinkSM.jpg" alt="Operation Uplink Phone Cards" width="152" height="41" border="0" /></a>
      <p>
      A unique program that keeps military personnel and hospitalized veterans in touch with their families and loved ones by providing them with a free phone card.</p>
    </div>
  </div>
  <div id="content">
    <div class="feature"> <img src="" alt="" width="280" height="200" />
      <h3>Feature Title </h3>
      <p> TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES </p>
    </div>
    <div class="story">
      <h3>Something</h3>
      <p>TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES </p>
      <p>TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES TEXT TEXT NEWS NEWS UPDATES </p>
    </div>
[COLOR="red"]THE LAST OF THE TABLES, SOME HTML, AND JAVASCRIPT REMOVED TO MEET CHARACTER REQUIREMENTS[/COLOR]
    Code (markup):
     
    bobthebuilder, Aug 17, 2006 IP