tinggg
6th December 07, 10:09 PM
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.
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:
}
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 and html of one of the pages where this problem is occuring. I've had to cut out some of the html to make it fit in this post but I included the important bit.
Many thanks in advance for your help.
CSS
.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;
}
HTML
<!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>
</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>
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.
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:
}
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 and html of one of the pages where this problem is occuring. I've had to cut out some of the html to make it fit in this post but I included the important bit.
Many thanks in advance for your help.
CSS
.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;
}
HTML
<!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>
</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>