Jump to content

Horizontal drop-down woes in IE

Steven

By Steven
in CSS

Recommended Posts

Steven Member

Steven

Posted
Posted

Hello all,So I found a neat drop-down menu to use over at Listamatic that I decided to modify and implament into a current project of mine.It works like a charm in Firefox, but gets jacked up in IE. Any ideas?Drop-down CSS: http://www.ngaguild.com/steve/sites/mos/blue/css/nav.cssWebpage: http://www.ngaguild.com/steve/sites/mos/blue/Thanks in advance,Steven

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Yes, unfortunately that method does not work in IE6.Here are plenty of links for you to look at, plenty of menus that could work for you:http://www.cssplay.co.uk/menus/dd_valid.htmlhttp://www.noupe.com/css/multilevel-drop-d...-tutorials.htmlhttp://www.dynamicdrive.com/dynamicindex1/droptabmenu.htmhttp://qrayg.com/learn/code/cssmenus/http://www.opencube.com/index.asp

Link to comment
Share on other sites
  • 3 weeks later...
moeneekh Newbie

moeneekh

Posted
Posted

Its funny,I have drop down woes in Firefox 3.0.3. I was able to fix a dropdown menu offset problem with IE7 by adding an IE conditional into the html file for the style that did the drop down. Problem I have though is that in Firefox that the content shifts when the menu is activated. This is not a problem with IE, only firefox. In IE the pulldowns overlay properly. I have the pulldowns in a div tag of their own, then the content that shifts is in a separate div tag. Any ideas what is going on? Thanks in advance!Moniquep.s. Wish I could credit the code, but it was an example I found long ago and then modified and added into my file.Here is the specific CSS code for the pulldowns------------------------#navBar { width: 100%; height: 24px; background-color: #3F2414; vertical-align: middle; padding-top: 4px; clear: both;}/*body { color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em;}*//* pull down menus */div.pdmenu { padding: 0; clear: both;} /* this is controlling the size of the box around the menu */.pdmenu ul { margin: 0; list-style-type: none; font-size: 1em; padding-top: 0; padding-right: 0; padding-bottom: 2px; padding-left: 0; } /* controls the boxes around the main menu */.pdmenu li { width:100px; text-decoration:none; background-color:#3F2414; float:left; margin-right: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: double; border-bottom-style: none; border-left-style: none; border-right-color: #993300; padding-left: 0px; padding-right: 0px; font-size: 1em; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-bottom: 0;} .pdmenu a { text-decoration: none; display: block; color: #FFFFFF; background-color: #3F2414; padding: 2px; margin-left: 0px;}/* rollover color of text */.pdmenu a:hover { text-decoration: none; background-color: #FCE3AB; color: #CC0000; border-bottom: 1px;}.pdmenu li ul { display: none;}/* border around pulldowns */.pdmenu li:hover ul { visibility: visible; display: block; z-index:1; width:100px; padding: 0; margin-right: 2px; margin-left: -50px; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #993300; left: -26px; position: relative; clear: both;} .support { clear: both;}#viewCart { float: right; width: 80px; margin-right: 15px;}---------------------------------------------Here is the html code with most of the extra slop removed.-----------------------------------------------------<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Handmade Equestrian Gifts - For Horse Lovers of All Ages!</title><!-- <title>Stable Solutions Handmade Gifts for Horse Lovers of All Ages!</title> --><meta name="verify-v1" content="pOzUv+dcnPUHNQ4WhuYAqA6emd4hgXYScT7qOKlOy6A=" /> <meta name="keywords" content="stable, stable solutions, horse, equine, equestrian, presents, horse gifts, equestrian gifts, handmade soap,horse lovers, home decor " /><meta name="description" content="Handmade bath soaps and gifts for horse lovers of all ages 1-888-PONIES-9. Most of our products have are horse-themed, but we also have nautical and green product lines, too." /><meta name="author" content="Monique Hodgkinson, MSH Communications, www.msh-communications.com" /><link href="SS.css" rel="stylesheet" type="text/css" /><link href="pulldowns.css" rel="stylesheet" type="text/css" /><style type="text/css">body { background-color: #660000; background-image: url(images/horseshoesTemp1Small.jpg);}hr {color:#999999;}.style17 {color: #996600}.style22 { color: #666666; font-size: .9em; }.style24 {font-family: Arial, Helvetica, sans-serif}</style><!--[if IE]><style type="text/css">.pdmenu li:hover ul { visibility: visible; display: block; position:relative; z-index:1; width:100px; padding: 0; margin-right: 2px; margin-left: -50px; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #993300; left: 26px;} </style> <![endif]--></head><body><div id="Container"> <div id="Banner" align="center" class="Heading"><img src="images/BANNER.jpg" alt="banner" width="982" height="158" border="0" /> </div><div id="navBar"> <div class="pdmenu"> <ul> <li> <div align="center"><a href="#"> Home</a> </div> </li> <li> <div align="center"><a href="#">Products</a> <ul> <li><a href="html/ClassicalCollection.html">Classical Collection</a></li> <li><a href="html/WesternCollection.html">Western Pleasure Collection</a></li> <li><a href="html/giftCollection.html">Gift Horse Collection</a></li> <li><a href="#">Coastal Solutions</a></li> <li><a href="#">Green Line</a></li> </ul> </div> </li> <li> <div align="center"><a href="/html/wholesale.html">Wholesale</a> </div> </li> <li> <div align="center"><a href="#">About </a> <ul> <li><a href="html/About.html">Our Story </a></li> <li><a href="html/About.html">Contact Us</a></li> </ul> </div> </li> <li> <div align="center"><a href="/html/news.html">News </a> </div> </li> <li> <div align="center"><a href="http://www.astablesolution.com/blog">Blog </a> </div> </li> <li> <div align="center"><a href="/html/wheretobuy.html">Where to Buy </a> </div> </li></ul> </div> </div> <div id="Greeting"> <p align="center" class="italicText">Welcome to Stable Solutions. Our fine handcrafted bath soaps are available in a variety of wonderful fragrances and detailed designs for you to enjoy. Great equestrian gifts that are sure to please the horse lovers in your life!<span class="italicTextSmall"><br/> (click on images below to visit collections)</span> </p> </div> <div id="collections"> <p align="center"><a href="html/ClassicalCollection.html"><img src="images/ClassicalCollectionBox300.jpg" alt="Classical Collection" width="300" height="300" border="0" /></a><img src="images/spacer.jpg" alt="." width="10" height="300" /><a href="html/WesternCollection.html"><img src="./images/westernCollectionBox350.jpg" alt="Western Pleasure Collection" width="300" height="300" border="0" /></a><img src="images/spacer.jpg" alt="." width="10" height="300" /><a href="html/giftCollection.html"><img src="images/giftCollectionBox350.jpg" alt="The Gift Collection" width="300" height="300" border="0" /></a></p> <div class="breadcrumbs" id="column1"><a href="html/ClassicalCollection.html">English riders will appreciate soaps from The Classical Collection ... </a></div> <div class="breadcrumbs" id="column2"> <a href="html/WesternCollection.html">The Western Pleasure Collection depicts the spirit of the west.. </a></div> <div id="column3"> <div align="center"><span class="breadcrumbs"><a href="html/giftCollection.html">Looking for a perfect special gift? Our Gift Horse Collection is for you..</a>.</span> </div> </div> <div> <p> </p> <p> </p> <p>Our luxurious, horse-themed bath soaps are so beautiful that you will want to buy two so that you will use one! </p> <p><img src="images/drafts.jpg" alt="draft horses" width="950" height="25" /></p> </div> <div id="column4"> <div> <div align="left" class="breadcrumbs">We make our soaps in an old-barn in Pescadero, California. While this is a production facility, we always welcome guests who stop by. We now proudly feature five collections for you to enjoy. </div> </div> </div> <div id="column5"> <div align="left" class="breadcrumbs">Each of our handmade bath soap is made from high-quality, food grade coconut, palm, safflower, and olive oils. We use essential oils and fragrance oils to mildly scent our beautiful soaps. Artistic combinations of dried botanicals and mineral pigments give each fragrance of soap a unique appearance. </div> </div> <div id="column6"> <div align="left" class="breadcrumbs">From our classy dressage rider to our barrel racer, you are sure to appreciate the fine detail of our molds. Love the ocean? Love a big bar of soap? You'll love our <a href="html/CoastalSolutions.html">Coastal Solutions</a> and Green Line products, too. </div> </div> </div> <div> <p align="center"><img src="images/drafts.jpg" alt="draft horses" width="950" height="25" /></p> </div> <p align="center"> <img src="images/guildSealCP.jpg" alt="soapguild logo" width="200" height="145" border="0" class="style11" longdesc="http://soapguild.org" /><img src="images/guildSealMP.jpg" alt="MP Seal" width="190" height="140" /><a href="https://www.paypal.com/us/verified/pal=moeneekh%40yahoo%2ecom" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal" /></a> </p> <!-- End Official PayPal Seal --><p align="center"> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p> <p align="center" class="copyright">copyright 2006, 2007, 2008 Stable Solutions, all rights reserved, web design by <a href="http://www.msh-communications.com"> <span class="subNav"> <span class="style17">MSH Communications</span></span></a></p> <div align="center"> <p><span class="subNav"> <span class="style22"><a href="html/privacy.html">privacy policy</a></span></span></p> </div> </div></body></html>

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Well, for starters your menu doesn't work in IE6, that's bad, very bad. There are MANY, MANY users out there that still use IE6... yes, I hate that too, can't wait to have that browser out of the F!@# way. In the meantime we have to consider IE6 in our developments.Now, I solved your problem, add position:absolute;:.pdmenu ul { margin: 0; list-style-type: none; font-size: 1em; padding-top: 0; padding-right: 0; padding-bottom: 2px; padding-left: 0; position:absolute;} Try removing that Conditional Comment you used for IE7 and see if it still works.Bytes,

Link to comment
Share on other sites
moeneekh Newbie

moeneekh

Posted
Posted

Thanks Ricardo!That worked to fix the Firefox problem. I had tried setting the position in one of the other rules, which didn't make any difference. Removing the conditional gives me a shift in IE, so that the menus are too far to the left. I'll work on making it work for IE6. Although, I wanted to forget about that beast. :) Monique

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

OFFTOPIC:I don't see Monique's question as highjacking, at all... and I'm not confused either, at all.Monique's intervention is legit, her problem is exactly the same problem as Steven's... actually, what she did was pretty smart, since there was no need to create another forum with the same exact problem.ONTOPIC:Glad to help Monique :)One small tip about <ul>'s: As you know the <ul> contains the list items <li>'s, so when dealing with menus like yours (and well, actually, in ANY case), consider the <ul> like a 'container' for the links, just like a DIV would be. In other words, think of the <ul> as a block element. With this in mind you can start foreseeing how to treat list items even when you're in the design phase.I don't know if what I'm saying makes sense than what the 'obvious' would be (some may think that what I'm saying is so obvious that I shouldn't be even saying at all, hehe :)), but from personal experience, once I started 'seeing' the <ul> just as I would see a DIV, I could then figure out so many weird behaviors (like your's for example) on menus and lists and that sort of things and fix them very fast.Aaaanyway, let us know if you need anything else.Bytes :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...