No replies
dewfather
Offline
newbie
Last seen: 6 years 6 weeks ago
Joined: 2008-10-06
Posts: 1
Points: 0

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..