CSS - Positioning In Firefox And Ie

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

The Page

The problem is the div with the controls in it (wheel: <dropdown>, etc.). I need it to be bumped up against the bottom of the large image above it, and it's working fine in Firefox. Unfortunately, IE is bumping it downward to it wraps instead of of nestling into position.

The css for it:

.controls {
clear: both;
width: 660px;
text-align: center;
}

And the instructions box it's bumping up against:

#instructions {
float: left;
width: 300px;
display: inline;
margin-left: 5px;
}

The problem has been there for a while, but wasn't really noticeable until I added the default text for counters section, which pushed the rest off the bottom of the screen (at 1280 x 1024).

Any help would be greatly appreciated.

For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way?

Here is my css:

Code:

div.leftBorder
{
	position:absolute;
	height:100%;
	width:15%;
	background-color:#DDDDDD;
}
p.imgText{
	font-size:18px;
	position:absolute;
	left:1%;
	top:1%;
	color:#CC0000;
}
table.menuTable{
	position:relative;
	top:15%;
}

Here is the html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="specs.css">
  <title></title>
</head>

<body>
<div class="leftBorder"></div>
<p class="imgText">MEDITECH Interface Specifications</p>
<center>
<table class="menuTable" cellspacing=0>
<!-- Spec number menu Title -->
<tr>
	<th class="menuTitle">Spec. Number</th>
	<th class="menuTitle">Description</th>
</tr>
<!-- Spec number menu -->
<tr>
	<td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td>
    <td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td>
</tr>
<tr>
    <td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td>
    <td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility
</tr>
<tr>
    <td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td>
    <td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td>
</tr>
<tr>
    <td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td>
    <td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td>
</tr>
<tr>
    <td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td>
    <td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td>
</tr>
</table>
<iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe>
</center>
</body>
</html>

Hi,

I've been having problems with a design at www.matthewdingley.co.uk/langdale/team.php. On the subpage design, Firefox seems to randomly decide to put scroll bars in instead of pushing the footer to the bottom of the content. This seems to completely random when I press the refresh button (even when absolutely nothing about the code has been changed) although it does seem to be a larger problem with pages with a small amount of content in the left column. There is no problem in Internet Explorer. If anyone knows what the problem might be, their help would be greatly appreciated.

Thanks,

Matthew Dingley

www.matthewdingley.co.uk

hi. i'm having a problem getting my content to show up in the same place in internet explorer and firefox. for some reason the block of text is slightly higher in internet explorer. here is the css:

.content
{
position: absolute;
top: 94px;
left: 163px;
width: 400px;
}

and the html:

<div class="content">
<p>content content content</p>
<div>

has anyone else noticed this? is there a way to fix it?