Mon, 2008-10-06 15:33
Hi,
Just stumbled upon this forum, and glad i did, there's lots of useful information and friendly feedback all around. I looked for a solution to my problem, but couldn't find it here, so here goes my first post:
I'm using a .dwt template for my site, which i don't think matters here so much, but it may. On my site i have a lightweight CSS horizontal dropdown nav bar with images as the li placeholders. Most of the time the menu displays nicely and works just fine, but once in a while on an arbitrary basis the line of images breaks and displays all over the place. I changed my code to read li float:left and now I've noticed that this breaking when it happens, it does on very specific lines. In this image you can see the breaking up after "High-Holiday..." and after "Jewish Lifecycles": http://www.jewishbookdistributors.com/images_newsite/screenshot_error.gif
The CSS is as follows:
ul.nav, .nav ul{ /*Remove all spacings from the list items*/ margin:0; padding:0; cursor:default; list-style:none; display:inline-table; height:54px; } ul.nav{ display:table; width:960px; height:54px; table-layout:inherit; padding:0; margin:0; position:inherit; } ul.nav>li{ display:table-cell; position:relative; padding:0; margin:0; height:54px; width:106px; float:left; } ul.nav li>ul{ /*Make the sub list items invisible*/ display: none; position:relative; width: 140px; margin-left: 0px; margin-top: -4px; border: 1px solid #ff9900; border-bottom: 3px solid #ffa621; border-right: 2px solid #fe9e0e; } ul.nav li:hover>ul{ /*When hovered, make them appear*/ display : block; height:auto; } .nav ul li a{ /*Make the hyperlinks as a block element, sort of a hover effect*/ display: block; padding: 2px 10px; } /*** Menu colors (customizable) ***/ ul.nav, .nav ul, .nav ul li a{ background-color: #e7ebf6;; color: #694d13; } ul.nav li:hover, .nav ul li a:hover{ background-color: #694d13; color: #fff; } ul.nav li:active, .nav ul li a:active{ background-color: #694d13; color: #fff; } ul.nav, .nav ul{ border: 0; } .nav a{ text-decoration: none; }
The HTML is as follows (I know, I know, I'm using tables and all, but I did out of convenience, so I wont have to deal with IE errors, and in order to save time) I believe you can ignore the if IE line, because the issues are with all other browsers. This menu totally doesn't function in IE, and so I created a static no-dropdown option for IE:
<tr align="center" height="54"> <td colspan="2" nowrap height="54" align="left"><!--[if IE]><div id="IEmenuFloat"><a href="http://www.jewishbookdistributors.com/categories.asp?cat=30" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Siddurim','','../images_newsite/linkbar/siddur_h.gif',1)"><img src="../images_newsite/linkbar/siddur.gif" name="Siddurim" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/categories.asp?cat=40" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Machzorim','','../images_newsite/linkbar/machzor_h.gif',1)"><img src="../images_newsite/linkbar/machzor.gif" name="Machzorim" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/categories.asp?cat=31" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bibles_Tikkuns','','../images_newsite/linkbar/bible_h.gif',1)"><img src="../images_newsite/linkbar/bible.gif" name="Bibles_Tikkuns" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/products.asp?cat=32" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Talaisim_Kippoth','','../images_newsite/linkbar/talis_h.gif',1)"><img src="../images_newsite/linkbar/talis.gif" name="Talaisim_Kippoth" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/stam.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('STAM','','../images_newsite/linkbar/stam_h.gif',1)"><img src="../images_newsite/linkbar/stam.gif" name="STAM" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/categories.asp?cat=33" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Education','','../images_newsite/linkbar/education_h.gif',1)"><img src="../images_newsite/linkbar/education.gif" name="Education" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/categories.asp?cat=85" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('holidays','','../images_newsite/linkbar/holiday_h.gif',1)"><img src="../images_newsite/linkbar/holiday.gif" name="holidays" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/categories.asp?cat=34" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Lifecycles','','../images_newsite/linkbar/lifecycles_h.gif',1)"><img src="../images_newsite/linkbar/lifecycles.gif" name="Lifecycles" width="106" height="54" border="0"></a><a href="http://www.jewishbookdistributors.com/pres.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Presentation_Gifts','','../images_newsite/linkbar/gifts_h.gif',1)"><img src="../images_newsite/linkbar/gifts.gif" name="Presentation_Gifts" width="112" height="54" border="0"></a></div></td><![endif]--> <![if !IE]> <ul class="nav"> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=30" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Siddurim','','../images_newsite/linkbar/siddur_h.gif',1)"><img src="../images_newsite/linkbar/siddur.gif" name="Siddurim" width="106" height="54" border="0"></a> <ul> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=36">Conservative</a></li> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=37">Orthodox</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=39">Reform</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=106">Edot Hamizrach</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=38">Reconstructionist</a></li> </ul> </li> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=40" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Machzorim','','../images_newsite/linkbar/machzor_h.gif',1)"><img src="../images_newsite/linkbar/machzor.gif" name="Machzorim" width="106" height="54" border="0"></a> <ul> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=41">Conservative</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=42">Orthodox</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=44">Reform</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=107">Edot Hamizrach</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=43">Reconstructionist</a></li> </ul> </li> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=31" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bibles_Tikkuns','','../images_newsite/linkbar/bible_h.gif',1)"><img src="../images_newsite/linkbar/bible.gif" name="Bibles_Tikkuns" width="106" height="54" border="0"></a> <ul> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=80">Conservative</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=79">Orthodox</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=81">Reform</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=83">Tikkuns</a></li> </ul> </li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=32" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Talaisim_Kippoth','','../images_newsite/linkbar/talis_h.gif',1)"><img src="../images_newsite/linkbar/talis.gif" name="Talaisim_Kippoth" width="106" height="54" border="0"></a> </li> <li><a href="http://www.jewishbookdistributors.com/stam.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('STAM','','../images_newsite/linkbar/stam_h.gif',1)"><img src="../images_newsite/linkbar/stam.gif" name="STAM" width="106" height="54" border="0"></a> </li> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=33" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Education','','../images_newsite/linkbar/education_h.gif',1)"><img src="../images_newsite/linkbar/education.gif" name="Education" width="106" height="54" border="0"></a> <ul> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=66">Judaism & Practice</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=72">Conversion</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=75">The Talmud</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=74">Kabbalah</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=65">The Jewish Calendar</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=94">Language</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=73">Idiot's Guides</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=76">Bible Commentary</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=63">Kashruth</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=105">Sociological Issues</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=113">Software</a></li> </ul> </li> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=85" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('holidays','','../images_newsite/linkbar/holiday_h.gif',1)"><img src="../images_newsite/linkbar/holiday.gif" name="holidays" width="106" height="54" border="0"></a> <ul> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=54">High-Holidays</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=99">Sukkoth</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=56">Purim</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=57">Pesach</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=58">Tisha B'Av</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=64">Sabbath</a></li> </ul> </li> <li><a href="http://www.jewishbookdistributors.com/categories.asp?cat=34" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Lifecycles','','../images_newsite/linkbar/lifecycles_h.gif',1)"><img src="../images_newsite/linkbar/lifecycles.gif" name="Lifecycles" width="106" height="54" border="0"></a> <ul> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=98">Calendars</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=59">Child Birth</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=60">Bar/Bat Mitzvah</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=61">Weddings</a></li> <li><a href="http://www.jewishbookdistributors.com/products.asp?cat=62">Death & Mourning</a></li> </ul> </li> <li><a href="http://www.jewishbookdistributors.com/pres.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Presentation_Gifts','','../images_newsite/linkbar/gifts_h.gif',1)"><img src="../images_newsite/linkbar/gifts.gif" name="Presentation_Gifts" width="112" height="54" border="0"></a> </li> </ul> <![endif]> </td> </tr>
Note: I tried changing doctype to strict (right now it's transitional) but it was messing with a lot of the styling on my site..
