teresamar2
07-26-2007, 03:32 PM
How can I get my menu to look the same with foxfire browser as it does in IE? Using foxfire, the horizontal menu is shorter, using 2 lines, using IE it's 1 line. The menu is 900 px, so shouldn't it show the same with both browsers?
<code>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #DEE1FE; /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 100px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid white;
border-left-width: 0px;
text-decoration: none;
color: navy;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ffffff;
}
.suckertreemenu ul li a:hover{
background-color: #bec4fd;
color: black;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #bec4fd url(media/arrow-down.gif) no-repeat center right;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(arrow_right_black.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#">Baby</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/formom.html">Just For Mom</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyornaments.html">Ornaments</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">Plush</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babybedding.html">Quilts/Blankets</a></li>
<li><a href="http://www.ttcollectiblegifts.com/silver.html">Silver</a></li>
<li><a href="http://www.ttcollectiblegifts.com/othergifts.html">Other Special Gifts</a></li>
</ul>
</li>
<li><a href="#">Books</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/civilwar.html">Civil War In East TN</a></li>
<li><a href="http://www.ttcollectiblegifts.com/folklore.html">Folklore & Scary Stories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/hiking.html">Hiking Trails, Maps, & More</a></li>
<li><a href="http://www.ttcollectiblegifts.com/nativeamerican.html">Native American</a></li>
<li><a href="http://www.ttcollectiblegifts.com/nature.html">Nature Lovers</a></li>
</ul>
</li>
<li><a href="#">Candles</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/tyler.html">Tyler</a></li>
<li><a href="http://www.ttcollectiblegifts.com/woodwick.html">WoodWick</a></li>
</ul>
</li>
<li><a href="#">Collectibles</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/dept56villages.html">Dept 56 Villages</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/dickens.html">Dickens</a></li>
<li><a href="http://www.ttcollectiblegifts.com/halloween.html">Halloween</a></li>
<li><a href="http://www.ttcollectiblegifts.com/northpole.html">North Pole</a></li>
<li><a href="http://www.ttcollectiblegifts.com/originalsnow.html">Original snow</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/harley.html">Harley-Davidson</a></li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/webkinz.html">Webkinz</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/elements.html">Elements</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/elements.html">Angles</a></li>
<li><a href="#">Elements Accessories</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/herco.html">Herco</a></li>
<li><a href="http://www.ttcollectiblegifts.com/lifeimpressions.html">Life Impressions</a></li>
<li><a href="http://www.ttcollectiblegifts.com/secondnature.html">Second Nature Black Bears</a></li>
<li><a href="http://www.ttcollectiblegifts.com/willowtree.html">Willow Tree</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/wtangels.html">Angels</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wtfigurines.html">Figurines</a></li>
</ul>
</li>
<li><a href="#">Women Of The Way</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Sculptures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wotwornaments">Ornaments</a></li>
</ul>
</li>
</ul>
<li><a href="http://www.ttcollectiblegifts.com/handbags.html">Handbags</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/beijo1.html">Beijo</a></li>
<li><a href="http://www.ttcollectiblegifts.com/greenbriertotes.html">Greenbrier Totes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/isabellasjourney.html">Isabella's Journey</a></li>
<li><a href="http://www.ttcollectiblegifts.com/marcchantal.html">Marc Chantal</a></li>
</ul>
</li>
<li><a href="#">Home Decor</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/secondnature.html">Black Bear Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/copperworx.html">Copperworx</a></li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/fringe.html">Fringe Stained Glass</a></li>
<li><a href="http://www.ttcollectiblegifts.com/shanmu.html">Shan Mu Baskets & Bowls</a></li>
</ul>
</li>
<li><a href="#">Plush</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">For Baby</a></li>
<li><a href="http://www.ttcollectiblegifts.com/jellycat.html">Jellycat Truffles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/webkinz.html">Webkinz</a></li>
</ul>
</li>
</ul>
<br style="clear: left;" />
</div>
<p id="iepara"></p>
</code>
<code>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #DEE1FE; /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 100px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid white;
border-left-width: 0px;
text-decoration: none;
color: navy;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ffffff;
}
.suckertreemenu ul li a:hover{
background-color: #bec4fd;
color: black;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #bec4fd url(media/arrow-down.gif) no-repeat center right;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(arrow_right_black.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#">Baby</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/formom.html">Just For Mom</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyornaments.html">Ornaments</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">Plush</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babybedding.html">Quilts/Blankets</a></li>
<li><a href="http://www.ttcollectiblegifts.com/silver.html">Silver</a></li>
<li><a href="http://www.ttcollectiblegifts.com/othergifts.html">Other Special Gifts</a></li>
</ul>
</li>
<li><a href="#">Books</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/civilwar.html">Civil War In East TN</a></li>
<li><a href="http://www.ttcollectiblegifts.com/folklore.html">Folklore & Scary Stories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/hiking.html">Hiking Trails, Maps, & More</a></li>
<li><a href="http://www.ttcollectiblegifts.com/nativeamerican.html">Native American</a></li>
<li><a href="http://www.ttcollectiblegifts.com/nature.html">Nature Lovers</a></li>
</ul>
</li>
<li><a href="#">Candles</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/tyler.html">Tyler</a></li>
<li><a href="http://www.ttcollectiblegifts.com/woodwick.html">WoodWick</a></li>
</ul>
</li>
<li><a href="#">Collectibles</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/dept56villages.html">Dept 56 Villages</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/dickens.html">Dickens</a></li>
<li><a href="http://www.ttcollectiblegifts.com/halloween.html">Halloween</a></li>
<li><a href="http://www.ttcollectiblegifts.com/northpole.html">North Pole</a></li>
<li><a href="http://www.ttcollectiblegifts.com/originalsnow.html">Original snow</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/harley.html">Harley-Davidson</a></li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/webkinz.html">Webkinz</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/elements.html">Elements</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/elements.html">Angles</a></li>
<li><a href="#">Elements Accessories</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/herco.html">Herco</a></li>
<li><a href="http://www.ttcollectiblegifts.com/lifeimpressions.html">Life Impressions</a></li>
<li><a href="http://www.ttcollectiblegifts.com/secondnature.html">Second Nature Black Bears</a></li>
<li><a href="http://www.ttcollectiblegifts.com/willowtree.html">Willow Tree</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/wtangels.html">Angels</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wtfigurines.html">Figurines</a></li>
</ul>
</li>
<li><a href="#">Women Of The Way</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Sculptures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wotwornaments">Ornaments</a></li>
</ul>
</li>
</ul>
<li><a href="http://www.ttcollectiblegifts.com/handbags.html">Handbags</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/beijo1.html">Beijo</a></li>
<li><a href="http://www.ttcollectiblegifts.com/greenbriertotes.html">Greenbrier Totes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/isabellasjourney.html">Isabella's Journey</a></li>
<li><a href="http://www.ttcollectiblegifts.com/marcchantal.html">Marc Chantal</a></li>
</ul>
</li>
<li><a href="#">Home Decor</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/secondnature.html">Black Bear Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/copperworx.html">Copperworx</a></li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/fringe.html">Fringe Stained Glass</a></li>
<li><a href="http://www.ttcollectiblegifts.com/shanmu.html">Shan Mu Baskets & Bowls</a></li>
</ul>
</li>
<li><a href="#">Plush</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">For Baby</a></li>
<li><a href="http://www.ttcollectiblegifts.com/jellycat.html">Jellycat Truffles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/webkinz.html">Webkinz</a></li>
</ul>
</li>
</ul>
<br style="clear: left;" />
</div>
<p id="iepara"></p>
</code>