#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    2
    Rep Power
    0

    Question Absolute positioning within a relative table not working with Firefox. Firefox Bug!?


    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:
    #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:
    <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.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, deenfoxx.

    This is not a bug, but it is one thing that Firefox handles differently from other browsers.

    In this case, I'd give "left:auto; margin-left:-99px;" to "#nav li ul".

    By the way, it's more user friendly for screen-reader users if you use something like "left:-9999px" to hide the sub-menus instead of display:none.

    P.S. Are you aware that IE7 doesn't support display:table-cell?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    2
    Rep Power
    0
    Thank you for the information. It looks like your fix is going to work, with a bit of tweaking in Magento's overly-classed style sheet. I realize IE7's going to require some hacks... it always does... but I'm more concerned with the 47% of the population using Firefox than the 8% using IE7. :-) I'll post back once I get it working.

IMN logo majestic logo threadwatch logo seochat tools logo