gap shown in IE 2

kaht · Mar 6, 2006

I've cut the page down considerably so that it will be easier to show my problem. I have a sort list that sits right on top of the scrollable list of exception codes. I need to make a printer friendly version of this page so I wanted to put a link out to the left side of the sort buttons. This works fine in firefox, but in IE it's putting a carriage return after the list of sort buttons, so that they don't sit right on top of the excCodes div. Here's the relevant code so you can copy/paste into a new file to replicate the problem:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>CCAP Exception List</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">

function submitSort(num) {
   document.forms["frm"].elements["sort"].value = num;
   document.forms["frm"].submit();
}

function submitExc(str1, str2) {
   document.forms["frm"].elements["exc"].value = str1;
   document.forms["frm"].elements["rt"].value = str2;
   document.forms["frm"].elements["scrollpos"].value = document.getElementById("excCodes").scrollTop;
   document.forms["frm"].elements["lastsort"].value = 0;
   document.forms["frm"].submit();
}

</script>

<link rel="stylesheet" type="text/css" href="./css/ccap.css" media="screen" />

<style type="text/css">

div#excSortDiv {
   text-align:left;
}

div#excSortDiv ul {
   margin:0px;
   padding:0px;
}

* html div#excSortDiv ul {
   height:1%;
}

div#excSortDiv ul li {
   list-style-type:none;
   border:0px;
   margin:0px;
   float:right;
   background:url(./images/exc-sort-t.gif) top left repeat-x;
}

div#excSortDiv ul li.sortlabel {
   background-color:#eeeeee;
   background-image:none;
}

div#excSortDiv ul li.last {
   border-right:1px solid black;
}

div#excSortDiv ul li div.divider {
   background:url(./images/exc-sort-l.gif) top left no-repeat;
}

div#excSortDiv ul li.first div.divider {
   background:url(./images/exc-sort-l-first.gif) top left no-repeat;
}

div#excSortDiv ul li a {
   text-decoration:none;
   color:#000000;
   display:block;
   text-align:center;
   padding:0px 3px 0px 18px;
}

div#excSortDiv ul li a.sorted {
   color:#ffffff;
}

div#excSortDiv ul li a:hover {
   color:#ffeec2;
}

div#excSortDiv ul li a img {
   margin:0px;
   padding:0px;
   border:0px;
}

div#excCodes {
   overflow:auto;
   height:220px;
   border:solid 1px #000000;
   clear:right;
}

div#excCodes .code {
   border-bottom:1px solid #000000;
   border-right:1px solid #000000;
   cursor:pointer;
   padding:2px 5px 2px 5px; 
}

div#content div#folder {
   margin:15px 0px 0px 0px;
/*   background-color:#f4e8cd;  */
   background-color:#ffeec2;
   color:#000000;
}

div#content div#folder .t {
   background:url(./images/folder-t.gif) top left repeat-x;
}

div#content div#folder .b {
   background:url(./images/folder-b.gif) bottom left repeat-x;
}

div#content div#folder .l {
   background:url(./images/folder-l.gif) top left repeat-y;
}

div#content div#folder .r {
   background:url(./images/folder-r.gif) top right repeat-y;
}

div#content div#folder .lb {
   background:url(./images/folder-lb.gif) bottom left no-repeat;
   margin:0px;
   padding:0px;
}

div#content div#folder .rb {
   background:url(./images/folder-rb.gif) bottom right no-repeat;
   margin:0px;
   padding:0px;
}

div#content div#folder .rt {
   background:url(./images/folder-rt.gif) top right no-repeat;
}

div#content div#folderTab {
   background:url(./images/folder-tab-t.gif) top left repeat-x;
   background-color:#ffeec2;
   font-size:8pt;
   font-weight:bold;
   float:left;
}

div#content div#folderTab .l {
   background:url(./images/folder-tab-lt.gif) top left no-repeat;
   float:left;
}

div#content div#folderTab .r {
   background:url(./images/folder-tab-rt.gif) top right no-repeat;
   float:left;
   padding:4px 25px 3px 13px;
}

div#content div#folderBody {
   padding:20px 10px 30px 20px;
}

div.elinkDiv {
   float:left; 
   border:1px #000000 solid; 
   background-color:#9a9aff; 
   color:#ffffff; 
   padding:0px 5px 0px 5px;
} 

div.rtCodeDiv {
   float:right; 
   text-align:left; 
   width:110px; 
   border:1px #000000 solid; 
   background-color:#9a9aff; 
   color:#ffffff; 
   padding:0px 5px 0px 5px;
}

* html #folder, #folder .t, #folder .r, #folder .l, #folder .b, #folder .rt, #folder .lb, #folder .rb {
   height:1%;
}

div#printDiv {
   display:none;
}

</style>

</head>
<body>

<div id="wrapper">

   <!-- ************** -->
   <!--     Header     -->
   <!-- ************** -->

   
   <div id="headercontainer">
      <div id="logo">
         <img src="./images/ccaplogo2.gif" style="border:0px; padding:0px; margin:0px" alt="This is the logo" />
      </div>
      <div id="header"><div class="l"><div class="r"><div class="t"><div class="b"><div class="lt"><div class="rt"><div class="lb"><div class="rb">
         <div id="loginInfo">
            You are logged in as <strong>******</strong> | <a href="ccaplogin.asp?logout=true" style="color:#ffeec2">Logout</a>
         </div>
         <div id="currentTime">
            Current Date and Time: <strong>2006-03-06 09:30:05.566</strong>
         </div>
         <div id="headerSpacer">&nbsp;</div>

<div style='display:block; font-weight:bold; padding:0px 0px 10px 0px'>Welcome to blah blah blah blah</div>
      </div></div></div></div></div></div></div></div></div>
      <hr class="floatBreaker" />
   </div>

   <div id="contentContainer">



      <!-- ************** -->
      <!--      Menu      -->
      <!-- ************** -->

            <div id="menu">
               <div class="menuItem"><div class="l"><div class="r"><div class="b"><div class="lb"><div class="rb">
         
            <h3 class="menuHeader">Navigation</h3>
                        <div id="navList2">             
               <ul>
                  <li><a href="ccapmain.asp" title="Click here to change pay periods and edit schedules">Main</a></li>
                  
                  <li><a href="ccapnonrt.asp" title="Click here to manage Clerical and Non-ACD employees">Clerical/Non-ACD</a></li>
                  <li><a href="ccapreports.asp" title="Click here to run reports">Reports</a></li>
                  <li><a href="#" title="Click here to run PreSubmission Check">Pre-Sub</a></li>
                  <li><a href="#" title="Click here to submit this pay period">Submit</a></li>
                  
                  <li><a href="ccapexc.asp" title="Click here to view Exc Code Details">Exception Codes</a></li>
                  <li><a href="ccapcostalloc.asp" title="Click here to view manager Cost Allocations">Cost Allocation</a></li>
                  
                  <li><a href="ccapusagereport.asp" title="Click here to view Usage Report">Usage Report</a></li>
                  
                  <li><a href="#" title="Click here to make Global Modifications">Global Mod</a></li>
                  <li><a href="ccapReport9115.asp" title="Click here view the 9115 Form">Form 9115</a></li>
               </ul>
            </div> 

         </div></div></div></div></div></div>
               </div>
      

      <!-- ************** -->
      <!--     Content    -->
      <!-- ************** -->
      
            <div id="content"><div class="l"><div class="r"><div class="b"><div class="lb"><div class="rb">
      
         <h3 class="menuHeader">Exception List</h3>
         <form id="frm" action="" method="post">
            <div>
               <input type="hidden" name="exc" value="" />
               <input type="hidden" name="rt" value="" />
               <input type="hidden" name="sort" value="1" />
               <input type="hidden" name="scrollpos" value="0" />
               <input type="hidden" name="lastsort" value="1" />
            </div> 
         </form>
         <div style="margin:12px 0px 5px 0px; color:#ffffff; padding:3px; background-color:#777777; border:solid 1px #000000; font-size:7pt">
            *Exception Codes with a dark gray background can have a Cost Allocation Association.
         </div>
         
                  <div id="excSortDiv">
                     <ul>
                        <li class="last">
                           <div class="divider">
                              <a href="javascript:submitSort(4)" class="">
                                 Exception Description
                                 
                              </a>
                           </div>
                        </li>
                        <li>
                           <div class="divider">
                              <a href="javascript:submitSort(3)" class="">
                                 Cost Allocation
                                 
                              </a>
                           </div>
                        </li>
                        <li>
                           <div class="divider">
                              <a href="javascript:submitSort(2)" class="">
                                 RT Code
                                 
                              </a>
                           </div>
                        </li>
                        <li class="first">
                           <div class="divider">
                              <a href="javascript:submitSort(1)" class="sorted">
                                 Elink Code
                                 
                                          <img src="./images/sort.gif" alt="Sort ascending order" width="11" height="12" />
                                       
                              </a>
                           </div>
                        </li>
                        <li class="sortlabel">Sort By:</li>
                     </ul>
                     <!--<input style="font-size:7pt; background-color:#eeeeee; border:0px" type="button" value="Printer Friendly Version" onclick="window.print()" />-->
                     <a href="ccapexc.asp?print=true" title="Click here to load a printer friendly version of the page">Printer Friendly Version</a>
                  </div>
                  <div id="excCodes">
                     
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?9963', '?9963')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?9963</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">?9963</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Short Notice Day Denied
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?DIFB', 'N/A')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?DIFB</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">N/A</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Bilingual Differential Paid - Employee speaks bilingual language for less than preponderance of scheduled time.  Use on and after 06-01-2001 only.
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?DIFD', 'N/A')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?DIFD</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">N/A</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Bilingual Differential Paid - Employee speaks bilingual language for preponderance of scheduled time.  Use on and after 09-03-2001 only.
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?DIFO', '?DIFO')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?DIFO</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">?DIFO</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Manual Treatment Code
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?DIFR', '?DIFR')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?DIFR</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">?DIFR</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Manual Treatment Code
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?DISU', 'N/A')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?DISU</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">N/A</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Disability - Uncertified
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?DP01', 'N/A')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?DP01</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">N/A</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Certified Partial Disability
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?EP01', 'N/A')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?EP01</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">N/A</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Excused Work Day Paid - 2, 4, 6, 8 or 10 hours
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?EU01', 'N/A')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?EU01</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">N/A</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Excused Work Day Not Paid
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?EXTA', '?EXTA')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?EXTA</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">?EXTA</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Manual Treatment Code
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?MAFM', 'MAFM')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?MAFM</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">MAFM</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Wage Distribution treatment is necessary -- Mandatory Affiliate Activities During Meetings
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?MAFP', 'MAFP')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?MAFP</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">MAFP</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Wage Distribution treatment is necessary -- Mandatory Affiliate Activities Working on Affiliate Projects
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?MAFT', 'MAFT')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?MAFT</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">MAFT</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Wage Distribution treatment is necessary -- Mandatory Affiliate Activities During Training
                                 </div>
                              </div>
                           
                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?MCEL', 'MCEL')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">
                                       Elink Code: <span style="font-weight:bold">?MCEL</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">MCEL</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">
                                    Cellular Sales - Business Office
                                 </div>
                              </div>
                           
                  </div>
                  <div id="folder"><div class="t"><div class="b"><div class="r"><div class="l"><div class="rt"><div class="lb"><div class="rb">
                     <!-- tab definition here -->
                     <div id="folderTab"><div class="l"><div class="r">
                     Reason Code for ?9963
                     </div></div></div>
                     <!-- body definition here -->
                     <div id="folderBody">
                     <div style="margin-top:5px">No reason codes found for this exception code.</div>
                     </div>
                  </div></div></div></div></div></div></div></div>
                     </div></div></div></div></div></div>
            <hr class="floatBreaker" />
   </div>
   

   <!-- ************** -->
   <!--     Footer     -->
   <!-- ************** -->

      <div id="footer"><div class="l"><div class="r"><div class="t"><div class="b"><div class="lt"><div class="rt"><div class="lb"><div class="rb">
      Copyright © 2005 Millennium Software, Inc.  All rights reserved.
   </div></div></div></div></div></div></div></div></div>
   

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

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

cLFlaVA · Mar 6, 2006

kaht...

are you sure this is the entire code?

*cLFlaVA
----------------------------
[tt]( )¹³ * ( <.)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

kaht · Mar 6, 2006

awesome, guess I should check next time - it got cut off, here's the rest starting from the beginning of the div with the onmouseover and onmouseout handlers:

Code:

                              <div class="code" style="color:#000000; background-color:#eeeeee" onmouseover="this.style.backgroundColor='#ffeec2'; this.style.color='#000000'" onmouseout="this.style.backgroundColor='#eeeeee'; this.style.color='#000000'" onclick="submitExc('?MAFP', 'MAFP')">
                                 <div style="margin:0px 0px 2px 0px">
                                    <div class="elinkDiv">

                                       Elink Code: <span style="font-weight:bold">?MAFP</span>
                                    </div>
                                    <div class="rtCodeDiv">
                                       RT Code: <span style="font-weight:bold">MAFP</span>
                                    </div>
                                 </div>
                                 <div style="clear:left; margin:0px 20px 0px 20px">

                                    Wage Distribution treatment is necessary -- Mandatory Affiliate Activities Working on Affiliate Projects
                                 </div>
                              </div>
                           
                           
                  </div>
                  <div id="folder"><div class="t"><div class="b"><div class="r"><div class="l"><div class="rt"><div class="lb"><div class="rb">
                     <!-- tab definition here -->
                     <div id="folderTab"><div class="l"><div class="r">
                     Reason Code for ?9963
                     </div></div></div>
                     <!-- body definition here -->

                     <div id="folderBody">
                     <div style="margin-top:5px">No reason codes found for this exception code.</div>
                     </div>
                  </div></div></div></div></div></div></div></div>
                     </div></div></div></div></div></div>
            <hr class="floatBreaker" />
   </div>
   

   <!-- ************** -->

   <!--     Footer     -->
   <!-- ************** -->

      <div id="footer"><div class="l"><div class="r"><div class="t"><div class="b"><div class="lt"><div class="rt"><div class="lb"><div class="rb">
      Copyright © 2005 blah blah blah blah blah
   </div></div></div></div></div></div></div></div></div>
   

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

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

kaht · Mar 7, 2006

Ok, so for lack of a better webhost, here's a link to my problem:

http://www.geocities.com/jasta94/ccap.html

When viewing this page in IE you can see right above the list of exceptions that the sort buttons are shifted upwards. This happened when I added the "printer friendly" link.

I do not get this behavior in firefox, but the geocities page looks all messed up in firefox for whatever reason (local copy on my pc looks fine in firefox). However, viewing the geocities copy in firefox will show that the sort buttons and the printer friendly link are aligned horizontally.

So the question - How do I prevent the gap that IE is putting between the exception list div and the sort buttons?

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

BabyJeffy · Mar 7, 2006

Here is something to attempt:

Code:

#excSortDiv { position:relative; }
#excSortDiv a { position:absolute;top:0; }

I can't really check it properly - but hopefully it'll do the trick for you.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

BillyRayPreachersSon · Mar 7, 2006

Remove this rule from your page to fix it:

Code:

* html div#excSortDiv ul {
   height:1%;
}

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

kaht · Mar 7, 2006

Jeff, that makes all the links float out to the right on top of eachother since they are removed from the page layout. However, it does remove the gap.

I'd really rather stay away from an absolute positioning solution if I can avoid it.... just a matter of preference I guess. Thanks for the suggestion.

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

kaht · Mar 7, 2006

That did it Dan, I had put that in earlier to fix another problem that I had and now I don't remember what it was. However, whatever it was doesn't seem to be showing up anymore because they're all lined up.

Out of curiosity, do you know why it was causing the jump?

Thanks for the help.

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

BillyRayPreachersSon · Mar 7, 2006

Erm... [looks sheepish] no... It was the first thing I tried removing - for some reason... and it worked

Maybe 1% of the height of the browser window was bigger than you thought?

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BabyJeffy · Mar 7, 2006

Dan practises Web Development as an art form. There is no way to describe exactly how he does something - and like all art - he isn't always able to explain it to his disciples. He does have an uncanny way of figuring out these kinds of problems though.

Maybe he has a Demonic Tutor up his sleeve? [smile]

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

kaht · Mar 7, 2006

I just put 1% for height because IE will stretch the DIV to that proportion to make it fit. It's the magic holly hack that seems to fix a ton of problems. And I just reverse engineered the page to see why I put it there in the first place.

Leave out the style and remove the "printer friendly" link. When viewed in IE it puts a small gap between the sort buttons and the excCodes div, until you hover over the excCodes div, at which point the gap closes (this is even more pronounced when the background images for the page are loaded). The 1% style applied to the ul fixed that gap from appearing. However, having the "printer friendly" link in place makes that gap never appear in the first place, so no need for the style apparently.

Thanks again.

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

kaht · Mar 7, 2006

Maybe he has a Demonic Tutor up his sleeve?

Wonder how many people will get that one? [wink]

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

BillyRayPreachersSon · Mar 7, 2006

It took me a while!

(scary!)

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

gap shown in IE 2

kaht

Programmer

cLFlaVA

Programmer

kaht

Programmer

kaht

Programmer

BabyJeffy

Programmer

BillyRayPreachersSon

Programmer

kaht

Programmer

kaht

Programmer

BillyRayPreachersSon

Programmer

BabyJeffy

Programmer

kaht

Programmer

kaht

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor