Click to See Complete Forum and Search --> : FF Mac list issues
bradleybebad
07-28-2009, 12:09 AM
I have a menu that is populated using coldfusion and sql. The code works fine, but my css is acting a little weird in ff mac. I have a <ul> with a <li> in it that needs to be display:inline-block. I need the menu <li> to be displayed without line breaks. It works fine in all the others, but in ff mac it does not take away the break if I use inline-block.
ANY IDEA?
Link: http://karavelshoes.com/upgrade/loopproducts.cfm?category_id=1&mw=1
bradleybebad
07-28-2009, 02:30 PM
This might be easier if I paste the code here...
CSS:
.menu {
margin:9px 0px 0px 0px;
}
.menu ul {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;list-style-type:none;width:100%;}
.menu li {
position:relative;
display:inline-block;
}
.menu li a, ul.menu li a:visited {
text-decoration:none;
border:1px #CCCCCC solid;
padding:0px 5px 0px 5px;
margin:0px 4px 15px 0px;
width:112px; height:112px;
display:block;
}
.menu li a:hover
{
text-decoration:none;
border-width:1px;
border-color:#666666;
border-style:solid;
}
.menu li li {
position:relative;
background:#FFFFFF;
border:1px #666666 solid;
width:269px;
padding:0px 0px 45px 0px;
}
.menu p {
position:relative; left:20px; top:10px;
}
.menu ul ul.drop {
visibility:hidden;
position:absolute;
width:277px;
top:40px;left:10px;
padding:0px 0px 0px 23px;
z-index:999999;
}
.menu ul ul.drop2 {
visibility:hidden;
position:absolute;
width:300px;
top:40px;left:-70px;
z-index:999999;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{}
.menu :hover > a, .menu ul ul :hover > a {}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
HTML:
<div class="menu">
<ul>
<cfif IsDefined("URL.category_id") AND IsDefined("URL.subcat_id")>
<cfloop query="getproducts" StartRow="#URL.StartRow#" EndRow="#EndRow#">
<cfoutput>
<li>
<a href="productdisplay.cfm?category_id=#URL.category_id#&subcat_id=#getproducts.subcat_id#&sku=#sku#&mw=#gen der#" style="background: url(#thumbsfolder##sku#.jpg) center no-repeat;"><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if !IE]>-->
<ul class="#style#">
<li>
<p>
<b>Product:</b> #product_name#<br>
<b>Price:</b> #LSCurrencyFormat(price)#<br>
<b>Item Number:</b> #sku#
</p>
<img src="#prodpicsfolder##sku#.jpg" width="220px" alt="#product_name#" style="position:relative; left:23px; top:30px;">
</li>
</ul>
<!--<![endif]-->
</li>
<cfset counter = counter + 1>
</cfoutput>
</cfloop>
</cfif>
</ul>
bradleybebad
07-29-2009, 02:19 PM
Figured it out... It was firefox 2.0 on MAC. Found out a hack for 2.0 though
::]