CSS - Firefox And Ie Positioning Issues

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.

Hi all,

I have a page that is generated through PERL, but I cannot get the positioning right. There are graphics, 1 - 9 depending on what the user chooses, that I need to display at the top of the page. Below this, I need to place text descriptions of the graphics.

However, the text is displaying under the graphics.

The code that I am using for the CSS is:
Code:

.MainWindow{
    position: absolute;
    max-width: 800px;
    width: expression(document.body.clientWidth > 800? "800px": "100%" ); 
    font-family:Trebuchet MS, Arial, Helvetica, sans-serif; 
    font-size:Medium; 
    color:#AF31F4; 
    background-color:white;    
    Height: auto;
    margin: 0 auto ;    
}

.ShowCards {
    position: absolute;
    vertical-align: top;
    margin: 0 auto;
    top: 2px;
    width: 640px;
    height: auto;
    Left: 200px;
    COLOR: #AF31F4; 
    FONT-FAMILY: Verdana, Helvetica, sans-serif; 
    FONT-SIZE: 11pt; 
    FONT-WEIGHT: bold; 
    border-color:Red;
    border-style:solid;
}

.Location2_3 {
position: absolute;
top: 110px;
left: 160px;
width: 85px;
height: 110px;
text-align: center;
}

.Location2_5 {
position: absolute;
top: 110px;
left: 310px;
width: 85px;
height: 110px;
text-align: center;
}

.Location3_4 {
position: absolute;
top: 220px;
left: 235px;
width: 85px;
height: 110px;
text-align: center; 
}

.Text1 {
position: absolute;
top: 100px;
top-margin: 20px;
left: 10px;
width: 500px;
}

This of course is not the complete CSS file, it is only representative. If you need/want to see the complete file, you can go here

And the HTML that gets generated is:
Code:

<Body>
<DIV CLASS="MainWindow">
<div id="printReady">
<DIV CLASS="ShowCards">
<DIV CLASS="Location1_4">
1<BR>
<img src="../tiles/thumbs/ansuz.jpg">

</DIV>
<DIV CLASS="Location2_5">
2<BR>
<img src="../tiles/thumbs/daeg-r.jpg">
</DIV>
<DIV CLASS="Location2_3">
3<BR>
<img src="../tiles/thumbs/fehu.jpg">
</DIV>
<DIV CLASS="Location3_4">
4<BR>
<img src="../tiles/thumbs/nauthiz.jpg">
</DIV>
</DIV>

<DIV CLASS="Text4">
Rune 1<BR>
<font color="#0000FF">Name: Ansuz</font><BR>
<font color="#0000FF">Position 1</font>:&nbsp;&nbsp;Past feelings and desires<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>

Rune 2<BR>
<font color="#0000FF">Name: Fehu</font><BR>
<font color="#0000FF">Position 3</font>:&nbsp;&nbsp;Present feelings and desires<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>
Rune 3<BR>

<font color="#0000FF">Name: Daeg Reversed</font><BR>
<font color="#0000FF">Position 2</font>:&nbsp;&nbsp;Feelings and desires of others<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>
Rune 4<BR>
<font color="#0000FF">Name: Nauthiz</font><BR>

<font color="#0000FF">Position 4</font>:&nbsp;&nbsp;Your heart's deepest desires.  If this rune is positive these desires will come to fruition in the next four months
<br>
<font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR>
<font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P>
</DIV>
</DIV>
</BODY>

If you would like to see an example of this, go here Choose a layout in the drop down on the top left and follow the instructions. Will only take a few seconds, it is not a long process......

Thanks for any help or suggestions.
Jim

I am recoding the site jthensley dot com (The forum wouldn't let me list the site needing assistance) to HTML 5 and CSS. I've redesigned some features, which are basically already in the new layout, at jthensley dot com / 2012alpha The 2 horizontal neon lines and the vertical line are simply repeated outside of the header by the CSS. However, one problem I have is that the vertical line that is repeating becomes unaligned with the header if the browser window is expanded. Is there anyway to have it as a repeating background, set to begin at a certain pixel position, and move to the right to maintain alignment with the header as the page is expanded?

Secondly, at the bottom, you have the copyright line, which I plan to use as a repeating background or image, as well, and my picture to the right, standing on top of the copyright line. Idealy, I would like the picture of myself to be in a certain area, and push down as page contents make the page longer, but maintain it's "link" with the footer. Any suggestions on how to achieve that? Thanks for your help! This is quite a refresher/learning experience for me!

The CSS I have already written is below.

* {
margin: 0 auto;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
color: white;
background-color: #000000;
background-image: url(images/horzneon.png), url(images/horzneon.png), url(images/verneon.png);
background-position: 0px 137px, 0px 172px, 250px 0px;
background-repeat: repeat-x, repeat-x, repeat-y;
}

ul#nav {
height: 185px; width: 1024px;
margin: 0 auto;
background: url(images/header.jpg) no-repeat;
}
height: 185px; width: 1024 px;

I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code:
Code:

<html>

<head>

<style type="text/css">

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
    color: #33C;
    display: block;
    float: left;
    font: bold 16px arial, sans-serif;
    height: 24px;
    margin:0 auto;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #22B;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>


<body>
<div>
	<div style="float:left; width:50%; background-color:#EEE">
		<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
	</div>
	<div style="float:right; width:50%; background-color:#DDD">
		<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
	</div>
</div>
</body>
</html>

And here's a link to the test page:
http://rentalocal.thad.com/test
Does anyone know what I've done wrong?

Thanks,
Thad

I'm having some issues with the positioning of a link in my header. For some reason in IE 7, it does not line up below the search box like it shows in IE 8, Firefox, Chrome and Safari. I cannot figure out for the life of me, what's wrong.

http://trinebay.net/cart/ is the site. You can see in the header the advanced search is the link that wont align in IE7 and probably IE6 as well. Thanks for the help guys