PDA

View Full Version : Smooth Navigational Menu CSS Holly Hack



bokkeguitar
11-21-2008, 10:53 AM
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
Hi Guys

First of all, great scripts guys! I noticed that in IE7 and below the SNM (Smooth Navigational Menu) the top level menu barely had a height where there were no link elements (so no padding could be applied, i saw that the menu got its height from the padding of the links, since there is no height specified). I gave the menu a height (knowing well that the ie box model bug would come in to play, but it still didn't change the height in IE7 and below.

I then noticed that you guys used the the Holly hack to make the nav bar 1% for IE7 and below, and thats what caused the nav to have such a small height in IE7. I removed it and now the menu has a perfect height in IE7. But what is the reason you guys used it in the CSS? On your demo page it does not break in ie7 and below, but I used it as is, without any changes, but mine break in IE& and below.

Thanks! Lenner

PS. you should start charging for support!

ddadmin
11-22-2008, 06:24 AM
The Holly hack was mainly added for IE6 if I recall correctly, where the sub menus may appear "disjointed" without it during my testing. Are you saying it's causing issues in IE7- only when you remove a link inside a LI element? If so I've only tested the menu with the assumption all LI elements contain a child link.

bokkeguitar
11-24-2008, 06:23 AM
Please have a look at the link http://www.personal.co.za/acs/index.php in IE7

No it's not when I remove a link inside a LI element? Its when there is no top level li element eg. there is only 5 links on the nav bar, but to the right of that, the rest of the nav bar has a very small height? You will see in the link.

Without the Holly hack, the script seems fine in IE6 and IE7, I cannot replicate the "disjointed" sub menus in IE6 without the hack.Thanks!

Update
I realized that you are refering to * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
} and that does effect IE6 sub menus if removed.

I'm refering to <!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
The latter effects the menu height in IE7 (gives it a really small height)

fallenangel
03-25-2009, 12:17 PM
Hi I know this is an older thread but i am having a problem with this hack,

you can view the test page here, www.fallenangeldesign.net/BPCC/index.html

the HTML code is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bonus Pastor Catholic College</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<style type="text/css">
<!--
.style1 {color: #FFCC00}
body {
background-image: url();
background-repeat: no-repeat;
}
-->
</style>
<style type="text/css">

/*Example CSS for demo ticker*/

#ajaxticker1{
width: 100%;
height: 100px;
border: 1px ridge black;
padding: 5px;
color:#BBBBBB
}

#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}

.someclass{ //class to apply to your scroller(s) if desired
}

</style>

<script src="ajaxticker.js" type="text/javascript">

/***********************************************
* Ajax Ticker script (txt file source)- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>
</head>
<body>

<div id="logo-wrap">
<div id="logo">
<img src="images/shield.jpg" alt="BPCC Logo" width="93" height="100" vspace="4" align="left" /><br />
<br /><h1>Bonus Pastor Catholic College </h1>
<br /></div>
</div>

<!-- start header -->
<div id="header">
<div id="menu">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="#">headteachers&nbsp;Message</a></li>
<li><a href="#">school&nbsp;policies</a></li>
<li><a href="#">staff&nbsp;vacancies</a></li>
<li><a href="#">ICT&nbsp;in&nbsp;the&nbsp;Community</a></li>
</ul></li>
<li><a href="#">Results</a></li>
<li><a href="#">Departments</a>
<ul>
<li><a href="#">Useful&nbsp;Links</a></li>
<li><a href="#">Staff&nbsp;Links</a></li>
</ul>
</li>
<li><a href="#">school&nbsp;update</a></li>
<li><a href="#">Contacts&nbsp;us</a></li>
</ul>
<br style="clear: left" />
</div></div>
</div>
<!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start content -->
<div id="content">
<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="830" height="240" title="Introduction Banner">
<param name="movie" value="banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="banner.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="830" height="240"></embed>
</object>
</div>
<div class="post">
<h1 class="title">Welcome to our website </h1>
<div class="left">
<h2>College Ethos</h2>
<p>Students should wear footwear appropriate for the forecasted weather when travelling
to and from the College.<br>Please bring usual footwear to change into once in the buildings.
Thank you.</p>
</div>
<div class="middle">
<h2>The College is OPEN as usual</h2>
<h3>Important</h3>
<p>Students should wear footwear appropriate for the forecasted weather when travelling
to and from the College.<br>Please bring usual footwear to change into once in the buildings.
Thank you.</p>
</div>
<div class="right">
<h2>Message Board</h2>
<script type="text/javascript">

var xmlfile="tickercontent.txt" //path to ticker txt file on your server.

//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 3500, "fade")
</script>
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<!-- end sidebar -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer">
<div id="footer-wrap">
<p id="legal"><a href="#">Staff area</a> <a href="#">Site map</a><br />
(c) 2009 Bonus Pastor Catholic College. Website Design by <a href="http://www.fallenangeldesign.net/">Fallen Angel Design</a>.</p>
</div>
</div>
<!-- end footer -->
</body>
</html>

CSS for the Menu is as follows:

.ddsmoothmenu{
font: bold 12px Verdana;
background: #000000; /*background of menu bar (default state)*/
width: 830px;

}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #000000; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: #000000; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}


my problem is that i cannot get the menu in IE6 to display inline, is there something im doing wrong?