CSS - Div Positioning/discrepancies Between Ie And Firefox

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.

I'm not sure if this should go here or in the ASP.NET section. If the other is more relevant, please move my post.

I'm trying to create an extremely simple layout for a web page I'm creating. When I fire up notepad and write it all down, it loads exactly how I want it to look. However, when I do it in asp.net, I do not get the look that I was going for.

Here is the code for the layout that I wrote in notepad:
Code:

<html> <head> <style type="text/css"> <!-- body {   margin: 0px;   padding: 0px;   height: 100%; } .header {   background: #aabbbb;   height: 9%;   width: 100%;   margin-bottom:1%; } .leftcol {   background: #aabbbb;   float: left;   width: 15%;   height: 89%; } .content {   background: #aabbbb;   float: right;   width: 84%;   height: 89%; } --> </style> </head> <body> <div id="header" class="header">Header</div> <div id="leftcol" class="leftcol">LeftNav</div> <div id="content" class="content">Content</div> </body> </html>

and this is what it looks like
URL
http://i.imgur.com/ANEjp.png

Now here is the .aspx page and css file for the asp.net project:
Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudentHome.aspx.cs" Inherits="Website.StudentHome" %>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>Certmanager: Student Access</title> <link rel="Stylesheet" type="text/css" href="MyStyle.css" /> </head> <body>     <form id="form1">         <div id="studentHeader" class="header">header</div>         <div id="leftNav" class="leftcol">left</div>         <div id="content" class="content">content</div>             </form> </body> </html>

css
Code:

body {   margin:0px;   padding:0px;   height:100%; }  .header {   background:#aabbbb;   width:100%;   height:9%;   margin-bottom:1%; }  .leftcol {   background:#aabbbb;   float:left;   width:15%;   height:89%; }  .content {   background:#aabbbb;   float:right;   width:84%;   height:89%; }  div#CredentialsDiv { 	margin:15%; 	background: #aabbbb; 	width: 350px; 	margin-left: auto; 	margin-right: auto; 	padding: 5px; }

and finally, here is what we have for the asp.net project:
URL
http://i.imgur.com/Efg2L.png

Please tell me what I'm doing wrong

I have some css issues between browsers and was wondering if anyone could help. I'm new here so it won't let me post the URL, but here's a description.

In safari and firefox I get a small gap between the top of the browser window and the content container, so my background shows on top. In IE it's all flush to the top. I want flush to the top everywhere, with the background only visible along the left and right sides.

In IE and safari there's a box around the (clickable) logo, in safari there's not. I don't want the box. I specified no border, but I still get the box.

I specified the image midway down the main content area to align left so the text would wrap around it to the right. I see this take effect in dreamweaver's design view, but not live.

html Code:
Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style = "text/css"> .main { width:200px; height:300px; position:absolute; background:yellow; top:0px; overflow:hidden; } .container { display:inline; position:absolute; width:100px; height:100%-; _height:100%; margin-bottom:auto; top:151px; bottom:0px; background:red; overflow:hidden; } .test { display:inline; position:absolute; width:100px; height:100%; background:blue; } </style> </head> <body> <div class ="main"> <div class="container"> <div class="test"></div> </div </div> asdfasasdfsdaf </body> </html>

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <style = "text/css">
        .main {
            width:200px;
            height:300px;
            position:absolute;
            background:yellow;
            top:0px;
            overflow:hidden;
        }
        .container {
            display:inline;
            position:absolute;
            width:100px;
            height:100%-;
            _height:100%;
            margin-bottom:auto;
            top:151px;
            bottom:0px;
            background:red;
            overflow:hidden;
        }

        .test {
            display:inline;
            position:absolute;
            width:100px;
            height:100%;
            background:blue;
        }
    </style>
</head>
<body>
<div class ="main">
    <div class="container">
        <div class="test"></div>
    </div
</div>
asdfasasdfsdaf
</body>


</html>

Basically I have a div that fills up the main div(main). The reason that there are 2 other divs is because one is slightly translucent and I didn't want the text to be translucent so it is for sitting on top of it and displaying the text, (I know it doesn't do that right now, this is just example code). My problem is that I want the div(test) to fill up the main div(main) from a certain point down, that is make it start 151px from the top and then expand until the bottom of the main div. I discovered that you can do this in firefox and opera by placing a - at the end of the height:100%. I don't know if this is correct, but it works. It does not work however in ie6. i can chop it using overflow:hidden;, but thats not really the functionality I want since the div in the final version will have a border on it. Is there someway to make it display the same way in Internet Explorer 6 as in firefox?

Thanks
akurtis

Take a look at the Firefox positioning and the disastrous positioning in IE and let me know what I need to do fix the div tag:
Code:

function areYouSure(){
	var newDiv = document.createElement("div");
	newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;');
	newDiv.setAttribute('id', 'add_to_db');
	newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='javascript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>";
	// And then inject it:
	document.body.appendChild(newDiv);
}
function cancelAddToDb(){
	var olddiv = document.getElementById('add_to_db');
	if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){
		olddiv.parentNode.removeChild(olddiv);
	}
}