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!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop down text problem in IE7 and Firefox

Status
Not open for further replies.

tinggg

Technical User
May 15, 2004
69
0
0
NZ
Hi

I'm using expandable blocks (when you click on a heading a block of text drops down to read) and in IE6 they look fine but in IE7 and Firefox 2 when a Heading is clicked the text underneath the clicked heading drops but the other headings underneath do not drop to accommodate the text from the heading above it. Therefore the look on the web page is text over text which is not readable.

I believe this is a browser issue being triggered by the use of javascript for this function.

Can anyone suggest a fix for this or an opinion on what is causing this issue?

Not sure if this is helpful but i've provided the javascript, html and CSS of one of the pages where this problem is occuring.

Many thanks in advance for your help.

JAVASCRIPT
Code:
// -Block-
function toggleBlock(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    if (myDiv.style.display == 'none'){
      showBlock(pstrID);
    } else{
      hideBlock(pstrID);
    }
  }
}
function showBlock(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    myDiv.style.display = 'block';
    var myImage = document.getElementById('i' + pstrID);
    if (myImage){
      myImage.src = 'arrowdown.gif';
      myImage.alt = 'Hide';
    }
  }
}
function hideBlock(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    myDiv.style.display = 'none';
    var myImage = document.getElementById('i' + pstrID);
    if (myImage){
      myImage.src = 'arrowright.gif';
      myImage.alt = 'Show';
    }
  }
}

// -Inline-
function toggleInline(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    if (myDiv.style.display == 'none') 
      showInline(pstrID);
    else 
      hideInline(pstrID);
  }
}
function showInline(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    myDiv.style.display = 'inline';
  }
}
function hideInline(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv) {
    myDiv.style.display = 'none';
  }
}

// -Popup-
function togglePopup(pstrID, pstrHID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    if (myDiv.style.display == 'none'){
      showPopup(pstrID, pstrHID);
    } else{
      hidePopup(pstrID);
    }
  }
}
function showPopup(pstrID, pstrHID){
  var myDiv = document.getElementById('d' + pstrID);
  var myAnchor = document.getElementById(pstrHID);
  if (myDiv && myAnchor){
    myDiv.style.visibility = 'visible';
    myDiv.style.display = '';

    // Calculate x and y position
    var intX = getElementLeft(myAnchor);
    var intY = getElementTop(myAnchor) + myAnchor.offsetHeight;
    var extraX = (intX + myDiv.offsetWidth) - document.body.offsetWidth;
    var extraY = (intY + myDiv.offsetHeight) - document.body.offsetHeight;
    if (extraX > 0) { intX -= extraX; }
    if (extraY > 0) { intY -= myDiv.offsetHeight + (myAnchor.offsetHeight * 1.5); }
    if (intX < 0) { intX = 0; }
    if (intY < 0) { intY = 0; }

    // Set x and y position
    myDiv.style.left = intX + "px";
    myDiv.style.top = intY + "px";
  }
}
function hidePopup(pstrID){
  var myDiv = document.getElementById('d' + pstrID);
  if (myDiv){
    myDiv.style.visibility = 'hidden';
    myDiv.style.display = 'none';
  }
}


// -ShowAll-
function toggleAll(pstrClass, pblnUpdate){
  var aLinks = document.links;
  var myAnchor;
  var myImage;

  for (var i=0; i < aLinks.length; i++) {
    if (aLinks[i].href.indexOf('toggleAll(\''+pstrClass) > -1) {
      myAnchor = aLinks[i];
      if (myAnchor.innerHTML == 'Show All') {
        showAll(pstrClass);
        if (pblnUpdate){
          myAnchor.innerHTML = 'Hide All';
          myAnchor.title = 'Hide All';
          myImage = myAnchor.previousSibling;
          if (myImage.nodeName == 'IMG'){
            myImage.src = 'arrowdown.gif';
            myImage.alt = 'Hide';
          }
        }
      } else{
        hideAll(pstrClass);
        if (pblnUpdate){
          myAnchor.innerHTML = 'Show All';
          myAnchor.title = 'Show All';
          myImage = myAnchor.previousSibling;
          if (myImage.nodeName == 'IMG'){
            myImage.src = 'arrowright.gif';
            myImage.alt = 'Show';
          }
        }
      }
    }
  }

}
function showAll(pstrClass) {
  var aElts = document.getElementsByTagName('div');
  setDisplay(pstrClass, aElts, 'show', 'Block');
  aElts = document.getElementsByTagName('span');
  setDisplay(pstrClass, aElts, 'show', 'Inline');
}
function hideAll(pstrClass) {
  var aElts = document.getElementsByTagName('div');
  setDisplay(pstrClass, aElts, 'hide', 'Block');
  aElts = document.getElementsByTagName('span');
  setDisplay(pstrClass, aElts, 'hide', 'Inline');
}
function setDisplay(pstrClass, paElts, pstrDisplay, pstrType){
  for (var i=0; i < paElts.length; i++) {
    if (paElts[i].className == pstrClass) {
      eval(pstrDisplay + pstrType + '("' + paElts[i].id.slice(1) + '")')
    }
  }
}

// -Fns to determine absolute position of an element-
function getElementLeft(pElt){
  var intX = pElt.offsetLeft;
  while ((pElt = pElt.offsetParent) != null){
    intX += pElt.offsetLeft; 
  }
  return intX;
}
function getElementTop(pElt){
  var intY = pElt.offsetTop;
  while((pElt = pElt.offsetParent) != null){
    intY += pElt.offsetTop;
  }
  return intY;
}

HTML

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
<title> Overview </title>

<link rel="stylesheet" type="text/css" href="main.css">
<script language="javascript" type="text/javascript">
function printWindow(){
bV = parseInt(navigator.appVersion)
if (bV >= 4) window.print()
}
</script><script language="javascript" type="text/javascript"
src="dhtml_popup.js"></script>
<script language="javascript" type="text/javascript"
src="dhtml_popup.js"></script>
</head>

<span style="font-size: 7.5pt; font-family: verdana; color:
gray">You're here:
<a target="_top" href="i10432.htm">
<span style="color: #336699">MyCompany</span></a> </span>
<b>»</b><a class="bread" href="i10432.htm" target="_top">Overview</a>
<table cellpadding="0" cellspacing="0" MyCompany="0">
<tr valign="top">
<td width= "18">
<p class="bodytext"><a href="4963.htm" target="_self"><img
src="124.gif" alt="Next Topic" height="17" width="20" vspace="0"
hspace="0" align="bottom" MyCompany="0"></a></p></td>
</tr>
</table>
<h1 class="heading1">Overview</h1>
<p class="bodytext">The MyCompany Operational Manual contains the
that people wanting to come to MyCompany permanently or for a short
time must follow. It includes the criteria that applicants must
meet, the evidence they must produce to show that they meet the
criteria, and the processes LLL follow to assess and verify
applications. The Manual also contains information about LLL's work
in protecting MyCompany's MyCompany and determining claims for
MyCompany.</p>
<p class="bodytext">By publishing the Operational Manual, LLL meets
its requirements under section 13A of the MyCompany Act 1987 to
publish MyCompany on granting visas and permits. </p>
<p class="bodytext">This Manual is not:</p>
<ul class="listbullet"><li class="listbullet">a step-by-step guide to
work processes, or</li><li class="listbullet">a replacement for the
MyCompany that governs LLL operations.</li></ul><p
class="bodytext">Read it in conjunction with the relevant provisions
of the MyCompany Act 1987, the MyCompany Regulations 1991, and other
applicable statutes.</p>
<p class="subheading">More information</p>
<p class="bodytext"><a id="h10498" class="expandingblocktemplate"
title="Organisation" href="javascript:toggleBlock('10498')"
target="_self"><img id="i10498" class="expandicon"
src="arrowright.gif" alt="" MyCompany="0">How the Manual is
organised</a></p>
<div id="d10498" class="expandingblock" style="display:none"><p
class="bodytext">The table below shows how information in the
MyCompany is grouped.</p>
<p class="bodytext"></p>
<table width="576" cellpadding="2" cellspacing="0" MyCompany="0"
style="MyCompany-collapse:collapse">
<tr>
<td width="180" height="0"></td>
<td width="396" height="0"></td>
</tr>
<tr align="left" valign="top">
<th bgcolor="#EFEEE1" style = "MyCompany:1px solid #010101;"
width="180"><p class="tableheading">Section</p>
</th>
<th bgcolor="#EFEEE1" style = "MyCompany:1px solid #010101;"
width="396"><p class="tableheading">Content</p>
</th>
</tr>
<tr align="left" valign="top">
<td style = "MyCompany:1px solid #010101;" width="180"><p
class="tablebodytext"><strong class="bold"><strong class="bold">Entry
type (MyCompany, Temporary Entry, Limited Purpose)
</strong></strong></p>
</td>
<td style = "MyCompany:1px solid #010101;" width="396"><ul
class="tablelistbullet"><li class="tablelistbullet">The <em
class="emphasis">MyCompany</em> section contains the policies for
people who want to come to MyCompany to live on a permanent basis.
</li><li class="tablelistbullet">The <em class="emphasis">Temporary
Entry</em> and <em class="emphasis">Limited Purpose</em> sections
contain policies for those wishing to come to MyCompany to visit,
study, or work.</li><li class="tablelistbullet">Note that each of
these sections includes a generic section containing requirements
that all applicants for MyCompany or temporary entry must meet,
unless specifically stated otherwise.</li></ul></td>
</tr>
<tr align="left" valign="top">
<td style = "MyCompany:1px solid #010101;" width="180"><p
class="tablebodytext"><strong class="bold"><strong
class="bold">Specific group (MyCompany, MyCompany, MyCompany)
</strong></strong></p>
</td>
<td style = "MyCompany:1px solid #010101;" width="396"><p
class="tablebodytext">The MyCompany, MyCompany, and MyCompany
sections of the Manual detail internal LLL operational policies and
are included in the Manual for ease of access and completeness. </p>
</td>
</tr>
<tr align="left" valign="top">
<td style = "MyCompany:1px solid #010101;" width="180"><p
class="tablebodytext"><strong class="bold"><strong
class="bold">Administration*</strong></strong></p>
</td>
<td style = "MyCompany:1px solid #010101;" width="396"><p
class="tablebodytext">This section contains general information about
lodging applications, how they will be assessed, and any rights of
appeal.</p>
</td>
</tr>
<tr align="left" valign="top">
<td style = "MyCompany:1px solid #010101;" width="180"><p
class="tablebodytext"><strong class="bold"><strong
class="bold">Appendices*</strong></strong></p>
</td>
<td style = "MyCompany:1px solid #010101;" width="396"><p
class="tablebodytext">Additional useful information such as which
office to lodge an application with, fees payable, and which
countries need to use panel doctors.</p>
</td>
</tr>
<tr align="left" valign="top">
<td style = "MyCompany:1px solid #010101;" width="180"><p
class="tablebodytext"><strong class="bold"><strong
class="bold">Glossary</strong></strong></p>
</td>
<td style = "MyCompany:1px solid #010101;" width="396"><p
class="tablebodytext">Contains definitions of all the terms used
within . These can also be accessed directly from the provision by
clicking the hyperlink from the term to the Glossary.</p>
</td>
</tr>
<tr align="left" valign="top">
<td style = "MyCompany:1px solid #010101;" colspan="2" width="576"><p
class="tablebodytext">* Note that the MyCompany, MyCompany, and
MyCompany sections and some of the Appendices in the Manual do not
constitute MyCompany MyCompany as described in section 13A(1) of the
MyCompany Act 1987. </p>
</td>
</tr>

</table>
<p class="bodytext"></p>
</div><p class="bodytext"><a id="h10499"
class="expandingblocktemplate" title="Finding information"
href="javascript:toggleBlock('10499')" target="_self"><img
id="i10499" class="expandicon" src="arrowright.gif" alt=""
MyCompany="0">How to find information in the Manual</a></p>
<div id="d10499" class="expandingblock" style="display:none"><p
class="bodytext">There are three main ways to search for information
in the MyCompany:</p>
<ol class="listnumber"><li class="listnumber">Using the left hand
Contents menu: The pane to the left of the screen displays the
different types of visa and permit applications grouped according to
permanent and temporary entry. Click on the plus icon next to the
topics to open the menus and locate the appropriate .</li><li
class="listnumber">Using the top menu: Policies are grouped the same
way in the menu across the top of the screen. You can click these
directly from any screen while you are in the Manual.</li><li
class="listnumber">Using the search facility: This is located on the
tab behind the Contents tab to the left of the screen. Enter one or
more keywords and press enter to start the search.</li></ol></div><p
class="bodytext"><a id="h10500" class="expandingblocktemplate"
title="Moving around" href="javascript:toggleBlock('10500')"
target="_self"><img id="i10500" class="expandicon"
src="arrowright.gif" alt="" MyCompany="0">How to move around the
Manual</a></p>
<div id="d10500" class="expandingblock" style="display:none"><p
class="bodytext">The MyCompany has the same navigation features as
other websites:</p>
<ul class="listbullet"><li class="listbullet"><strong
class="bold">Breadcrumbs</strong>: these show you exactly where you
are in the Manual. Clicking any of the breadcrumbs takes you
directly to that piece of .</li><li class="listbullet"><strong
class="bold">Hyperlinks</strong>: any words underlined and in blue
allow you to click on them with your mouse and be taken directly to
further information. Visited links change to red so you know you've
already clicked on them.</li><li class="listbullet"><strong
class="bold">Expanding menus</strong>: a plus icon <img src="793.gif"
alt="plus icon" height="15" width="13" vspace="0" hspace="0"
align="bottom" MyCompany="0"> next to a word in the contents means
there are further topics grouped underneath. Click the icon to
expand the menu. The icon will change to a minus icon <img
src="794.gif" alt="minus icon" height="15" width="13" vspace="0"
hspace="0" align="bottom" MyCompany="0"> to show the menu is fully
expanded. The <img src="795.gif" alt="last icon" height="15"
width="15" vspace="0" hspace="0" align="bottom" MyCompany="0"> icon
next to a topic means that there are no further topics beneath
it.</li><li class="listbullet"><strong class="bold">Tabs</strong>:
these work like dividers in a ring binder. Select the tab by
clicking on the header at the top.</li><li class="listbullet"><strong
class="bold">Toolbar</strong>: use the buttons on the existing
toolbar at the top of your screen to move back and forward between
pages and print. You can also use the restore down icon <img
src="796.gif" alt="restore down icon" height="23" width="27"
vspace="0" hspace="0" align="bottom" MyCompany="0"> (top right) if
you want to have the toolkit open at the same time you are
processing.</li><li class="listbullet"><strong class="bold">Up and
down arrows</strong>: use the up and down arrows at the top of each
page <img src="1141.gif" alt="Up &amp;amp; down arrows" height="21"
width="41" vspace="0" hspace="0" align="bottom" MyCompany="0"> to
move to the next step in the procedure.</li><li
class="listbullet"><strong class="bold">Scroll bar</strong>: Increase
or decrease the size of the left hand menu by running your cursor
over the vertical scroll bar between the menu on the left and the
main window until you see the double ended arrow <img src="10437.gif"
alt="Navigation: Double ended arrow." height="9" width="33"
vspace="0" hspace="0" align="bottom" MyCompany="0">. Hold the left
mouse button down and move the mouse to resize the
panes.</li></ul></div><p class="bodytext"><a id="h10501"
class="expandingblocktemplate" title="Changes to "
href="javascript:toggleBlock('10501')" target="_self"><img
id="i10501" class="expandicon" src="arrowright.gif" alt=""
MyCompany="0">How to tell the difference between current and previous
</a></p>
<div id="d10501" class="expandingblock" style="display:none"><p
class="bodytext">All has a date at the end of the provision to show
when that is effective from. When changes are made to , the
previous version is still held in the Manual but the way it looks is
changed so users can tell whether they are referring to current or
previous . Access previous by clicking the links in the left hand
navigation, in the box under the title of current , or in the
Previous box at the end of the provision.</p>
<p class="bodytext"><img src="10442.gif" alt="Image: Current vs
previous ." height="860" width="731" vspace="0" hspace="0"
align="bottom" MyCompany="0"></p>
</div><p class="bodytext"><a id="h10502"
class="expandingblocktemplate" title="Legal references"
href="javascript:toggleBlock('10502')" target="_self"><img
id="i10502" class="expandicon" src="arrowright.gif" alt=""
MyCompany="0">Understanding legal references within the Manual</a></p>
<div id="d10502" class="expandingblock" style="display:none"><p
class="bodytext">Some in this Manual summarises sections of the
MyCompany Act 1987, the MyCompany Regulations 1991, and other
statutes and international agreements. Where this occurs, references
to the specific Act or Regulation are noted in italics immediately
after the section or subsection heading. </p>
<p class="bodytext">These are intended as a guide to the legal
provisions relevant to the particular provision that they precede,
and are not necessarily comprehensive.</p>
<p class="bodytext">The summarised legal provisions are declaratory
only. This means that if the interpretation of the summarised legal
provisions conflicts with the interpretation of the MyCompany itself,
then the interpretation of the MyCompany is decisive.</p>
<p class="bodytext">Also note that the legal provisions do not in
themselves constitute MyCompany MyCompany .</p>
<p class="bodytext"></p>
</div><p class="bodytext"><a id="h10503"
class="expandingblocktemplate" title="Role of LLL"
href="javascript:toggleBlock('10503')" target="_self"><img
id="i10503" class="expandicon" src="arrowright.gif" alt=""
MyCompany="0">Role of MyCompany</a></p>
<div id="d10503" class="expandingblock" style="display:none"><p
class="bodytext">MyCompany is part of the MyCompanyr, a MyCompany
department that helps people achieve high-quality working lives in
thriving and inclusive communities through linking their social and
economic interests.</p>
<p class="bodytext">LLL aims to increase the economic and social
framework of MyCompany by:</p>
<ul class="listbullet"><li class="listbullet">facilitating MyCompany
and temporary entry into MyCompany, and</li><li
class="listbullet">ensuring that those who cross MyCompany's
MyCompanys observe the provisions of MyCompany's MyCompany and
MyCompany.</li></ul><p class="bodytext">Most of LLL's operational
work is focused on deciding MyCompany, returning resident's visa and
temporary entry applications, but it also provides information and
responds to general enquiries. In addition, LLL removes people who
are in breach of MyCompany law, or resolves their MyCompany status in
other ways.</p>
<p class="bodytext">Another responsibility is to determine claims for
MyCompany in MyCompany under the 1951 Convention Relating to the
Status of MyCompany and the 1967 Protocol. It selects quota
MyCompany and escorts them to MyCompany, as well as arranging for
their accommodation and induction after they arrive in MyCompany.</p>
<p class="bodytext">Visa officers in the MyCompanye may be
responsible for limited MyCompany operations at overseas posts where
there is no . Customs officers act as MyCompany officers at places
of entry to MyCompany.</p>
<p class="subheading">Help</p>
<p class="bodytext">Underpinning all our activity is the desire to
provide the best possible service and to demonstrate honesty,
fairness, confidentiality and respect in all our dealings. If you
need help understanding the in this Manual, please <a
class="[URL unfurl="true"]wwwtemplate"[/URL] title="My website - contact page"
href="[URL unfurl="true"]http://www.MyCompany.com/contactus.htm"[/URL]
target="Popup_window">contact us</a>.</p>
<p class="bodytext"></p>
<p class="bodytext"></p>
<p class="bodytext"></p>
<p class="bodytext"></p>
<p class="bodytext"></p>
</div>


<p align="left">
<a title="Print this page" href="javascript:printWindow()"> <img
class="toolbar" src="print.gif" alt="Print this page" vspace="0"
hspace="0" align="bottom" MyCompany="0" width="27" height="17"><span
style="font-size: 8pt; font-family: verdana"><font
color="#000000">Print this page</font></span></a></p>
</html>

CSS
Code:
 .expandingblock 
{font-family: "Verdana", verdana, arial, helvetica, sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 10pt;
        color: #000000;
        background-color: #E2E2E2;
        word-spacing: normal;
        letter-spacing: normal;
        vertical-align: baseline;
        text-decoration: none;
        text-transform: none;
        line-height: normal;
        margin-top: 4px;
        margin-bottom: 4px;
        margin-left: 4px;
        margin-right: 4px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
        border-color: #AFAFAF;
        border-top-style: dotted;
        border-top-width: 1px;
        border-top-color: #AFAFAF;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
        border-bottom-color: #AFAFAF;
        border-left-style: dotted;
        border-left-width: 1px;
        border-left-color: #AFAFAF;
        border-right-style: dotted;
        border-right-width: 1px;
        border-right-color: #AFAFAF;
        float: none;
        clear: none;
        text-align: left;
        text-indent: 0cm;
        width: 90%;
        height: 0px;
        white-space: normal;
       }
 
I don't know about your problem... but you should really learn to combine your styles. That whole CSS block you posted could be compacted into about a quarter of the size... so instead of this:

Code:
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
border-color: #AFAFAF;
border-top-style: dotted;
border-top-width: 1px;
border-top-color: #AFAFAF;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #AFAFAF;
border-left-style: dotted;
border-left-width: 1px;
border-left-color: #AFAFAF;
border-right-style: dotted;
border-right-width: 1px;
border-right-color: #AFAFAF;

You can use this:

Code:
margin: 4px;
padding: 8px;
border: 1px dotted #AFAFAF;

If that's not an improvement, I don't know what is.

Hope this helps,
Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Thanks Dan - I didn't do any of the code, it's just been handed to me to make live and i've noticed these browser problems. Have made your suggested changes though, all improvements welcome - the changes didn't have any effect on the orginal problem though.

BTW - This webpage is in a frameset (not sure if that makes any difference)
 
Thanks Dan - I didn't do any of the code, it's just been handed to me to make live and i've noticed these browser problems. Have made your suggested changes though, all improvements welcome - the changes didn't have any effect on the orginal problem though.

BTW - This webpage is in a frameset (not sure if that makes any difference)
 
Hi Dan unfortunately this part of the site isn't live yet so there isn't a live url I can provide. I added the following to the CSS but it didn't make any difference either:

}
expandingblocktemplate {
clear:both
}
 
Just to close this off - the problem was that in the expandingblock css it had height: 0px; - I removed this and it worked.

Thanks for all your help.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top