SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    dublin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding boxes are expanding but text underneath not dropping

    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've attached a snapshot of what this looks like.

    These webpages are in a frameset, in case that makes any differience. As part of troubleshooting this problem I added the following to the stylesheet but it didn't make a difference:

    Code:
     }
    expandingblocktemplate {
    clear:both
    }
    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 CSS, javascript and html of one of the pages where this problem is occuring.

    Many thanks in advance for your help.

    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: 4px;
    	  padding: 8px;
            border: 1px dotted #AFAFAF;
            float: none;
            clear: none;
            text-align: left;
            text-indent: 0cm;
            width: 90%;
            height: 0px;
            white-space: normal;
           }

    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" "http://www.w3.org/TR/html4/loose.dtd">
    <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="wwwtemplate" title="My website - contact page"
    href="http://www.MyCompany.com/contactus.htm"
    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>
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like Gary said at CSSCreator, you need to get your HTML valid before the rest of the problem can be looked at.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you set a height: 0px; then the modern browsers will do exactly that an any text that exceeds this will simply overflow.

    IE6 and below misinterpret this and will treat height as a min height and will therefore expand to cater for any overflow.

    As John pointed out though, you really should validate your code as MyCompany="0" is HTML that I've never seen before

    Here's the code fixed up...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html {
    	overflow-y: scroll;
    }	
    .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: 4px;
    	padding: 8px;
    	border: 1px dotted #AFAFAF;
    	float: none;
    	clear: none;
    	text-align: left;
    	text-indent: 0cm;
    	width: 90&#37;;
    	white-space: normal;
           }
    </style>
    <script type="text/javascript">
    // -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;
    }
    </script>
    <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>&#187;</b><a class="bread" href="i10432.htm" target="_top">Overview</a>
    <table cellpadding="0" cellspacing="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" ></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="">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" 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="">
    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="">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"> 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"> 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"> 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"> (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"> 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">. 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="">
    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"></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="">
    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="">
    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="wwwtemplate" title="My website - contact page"
    href="http://www.MyCompany.com/contactus.htm"
    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" width="27" height="17"><span
    style="font-size: 8pt; font-family: verdana"><font
    color="#000000">Print this page</font></span></a></p>
    </html>
    However, you should really consider not using tables for layout and should use a strict doctype where possible so that you're separating presentation from content. If you decide to use a different font or font size in future you'll have a huge job changing things which would be a lot simpler if you used CSS for styling.

    Also there's a lot of styles in that block which aren't doing anything and you could probably get rid of...

    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: 4px;
    	padding: 8px;
    	border: 1px dotted #AFAFAF;
    	float: none;
    	clear: none;
    	text-align: left;
    	text-indent: 0cm;
    	width: 90%;
    	white-space: normal;
           }
    All the styles specified in bold above can probably be removed (unless they're being set in a parent and you're deliberately using them to reset? I suspect this isn't the case though).

    Hope that helps.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    dublin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey csswiz

    Thank you so much, I changed the stylesheet and it works! Your comments also alerted me to causes of other problems i've been having with the site.

    Your help is very much appreciated
    Nicola


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •