PDA

View Full Version : Inline DIV on Table



krish
10-09-2005, 01:54 PM
Hi

I am building a new site with CSS. I have Table with a single row of columns acts as a menu. Each column has a inline DIV defined. And I got two basic classess for the DIVs

This is for the general define (When the submenu is hidden)
div.menuNormal
{display: none;
position: static;}

This is for the menu hover action(When the submenu is shown)
div.menuHover
{border: 2px solid #8888aa;
background-color: #ffffff;
display:inline;
position: absolute;}

Similarly the TD where i am writing this DIV got two CSS style definitions:
For just to show with hidden submenu
td.menuNormal
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;}

When displaying the submenu
td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: #cccccc;}

Now in the HTML page coding I got as
<td valign='middle' class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<a HREF='#' class='menuitem'>Group Corporate Profile</a>
<div class='menuNormal'><table class='menu' width='130'>
<tr><td class='menuNormal'>
<a HREF='gcprofile/location.asp' class='menuitem'>Kingdom of Bahrain</a></td></tr>
<tr><td class='menuNormal'><a HREF='gcprofile/about_intercol.asp' class='menuitem'>About Intercol</a></td></tr>
<tr><td class='menuNormal'><a HREF='gcprofile/the_management.asp' class='menuitem'>Management</a></td></tr></table>
</div></a></td>

The functions expand(this); and collapse(this); are defined in a JS file the details of the functions are
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);

td.className = "menuHover";
d.className = "menuHover";
}

function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);

td.className = "menuNormal";
d.className = "menuNormal";
}

Now when I am viewing this page in IE it is all perfect.
In Opera -> the submenu which pops down when you hover, is not getting hide.
In Netscape -> sometime the submenu not getting hide. You have to hover again and take mouse out to make it hide. And also the window border and background is not appearing for the whole text. The inline DIV text is fully appearing but the Inline DIV border is drawn inside the parent table only.

what to do for getting this fixed. ? Pls help me.

You can have a look of this site @ http://newsite.intercol.com

Thanks
Krish