Einstein47
Programmer
Hey all,
I have been tasked with making our intranet web app work with IE7 (until now we have limited it to IE6 - stupid I know - but I work for the government). Anyhow, the site uses Frames and a modified version of the Sucker Tree menu (I don't have the link on my right now, you can google it, you're a big boy).
My issue is that in IE6 and FireFox the menu displays correctly, but in IE7 there is extra space around the separators causing the menu to extend below the bottom status frame. This being a web app for the Juvenile Court, I can't give you access to see the real thing; however, I created a mock-up on my own server to give you an idea of what is happening. Full Frames Page, and Single Page Showing separator issue.
When you look at the single page in FireFox and IE6 (if you still have that), you can see that there is virtually no extra space around the HR separator lines. However the same page in IE7 displays a huge space above and an increased space below the separators. I want to get rid of that extra space so it looks like FF and IE6.
For those code junkies - here is the single page HTML:
Please ignore the links themselves, they won't work - but the main thing I an interested in is the CSS definition for the separators ([red]#suckerMenuDiv hr[/red]).
Any ideas, suggestions, dirty looks ?
Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
I have been tasked with making our intranet web app work with IE7 (until now we have limited it to IE6 - stupid I know - but I work for the government). Anyhow, the site uses Frames and a modified version of the Sucker Tree menu (I don't have the link on my right now, you can google it, you're a big boy).
My issue is that in IE6 and FireFox the menu displays correctly, but in IE7 there is extra space around the separators causing the menu to extend below the bottom status frame. This being a web app for the Juvenile Court, I can't give you access to see the real thing; however, I created a mock-up on my own server to give you an idea of what is happening. Full Frames Page, and Single Page Showing separator issue.
When you look at the single page in FireFox and IE6 (if you still have that), you can see that there is virtually no extra space around the HR separator lines. However the same page in IE7 displays a huge space above and an increased space below the separators. I want to get rid of that extra space so it looks like FF and IE6.
For those code junkies - here is the single page HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title> Sucker Menu Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: [URL unfurl="true"]http://www.dynamicdrive.com/style/[/URL] */
#suckerMenuDiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 210px; /* Width of Menu Items */
border: 3px outset #fcfcfc;
background: #eee;
}
#suckerMenuDiv ul li{
position: relative;
background: #eee;
overflow: visible;
}
/*Sub level menu items */
#suckerMenuDiv ul li ul{
position: absolute;
width: 190px; /*sub menu width*/
top: 0;
visibility: hidden;
background: #eee;
}
/* Sub level menu links style */
#suckerMenuDiv ul li a{
font-family: Arial;
font-size: 8pt;
display: block;
overflow: auto; /*force hasLayout in IE7 */
padding: 2px 4px 2px 8px;
margin: 0 1px;
color: black;
background-color: #eee;
text-decoration: none;
}
#suckerMenuDiv a:hover {
background-color: Highlight;
color: white;
}
#suckerMenuDiv .subfolderstyle {
padding-right: 0;
background: url(ArrowPopup.gif) no-repeat center right;
}
#suckerMenuDiv hr {
height: 1px;
display: block;
margin: 0 !important;
margin: -6px 0;
color: #a8a8a8;
background-color: #798c7c;
border: 0px;
}
/* Holly Hack for IE \*/
* html #suckerMenuDiv ul li { float: left; height: 1%; }
* html #suckerMenuDiv ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
/* This function will shrink the width of the given DIV until it can no longer
shrink, or until the height gets larger and then it will increase the size
slightly. */
function resizeMenu(menuDivObj) {
// When submenus have no spaces, the width can only be reduced so far
var origHeight = menuDivObj.offsetHeight;
var prevWidth = 0;
var delta = 0;
while (origHeight == menuDivObj.offsetHeight
&& menuDivObj.offsetWidth != prevWidth) {
prevWidth = menuDivObj.offsetWidth;
delta = Math.ceil(menuDivObj.offsetWidth * 0.12);
menuDivObj.style.width = (menuDivObj.offsetWidth-delta)+"px";
// alert("inside resizeMenu: "+delta);
}
(delta<12) ? delta=2 : delta=Math.floor(delta/4);
while (origHeight != menuDivObj.offsetHeight) {
menuDivObj.style.width = (menuDivObj.offsetWidth+delta)+"px";
}
menuDivObj.style.width = (menuDivObj.offsetWidth+5)+"px";
}
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: [URL unfurl="true"]http://www.dynamicdrive.com/style/[/URL]
var menuids=["suckertree0","suckertree1"]
//Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var menuObj = document.getElementById(menuids[i]);
resizeMenu(menuObj);
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
resizeMenu(ultags[t]);
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) {
//if this is a first level submenu
ultags[t].style.left=(ultags[t].parentNode.offsetWidth)+"px"
//dynamically position first level submenus to be width of main menu item
}
else { //else if this is a sub level submenu (ul)
//position menu to the right of menu item that activated it
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
this.style.backgroundColor = "Highlight";
this.getElementsByTagName("a")[0].style.color = "white";
this.getElementsByTagName("a")[0].style.backgroundImage = "url(ArrowPopupSel.gif)";
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
this.style.backgroundColor = "#eee";
this.getElementsByTagName("a")[0].style.color = "black";
this.getElementsByTagName("a")[0].style.backgroundImage = "url(ArrowPopup.gif)";
}
}
for (var t=ultags.length-1; t>-1; t--){
//loop through all sub menus again, and use "display:none" to hide menus
//(to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
</head>
<body>
<h1>My Case Load Menu Test</h1>
<div id="suckerMenuDiv">
<ul id="suckertree0">
<li><a href="#">Location Information</a>
<ul>
<li><a href="javascript: void window.top.goMenu('/assignments/LocationAssignmentHistory');" onmouseover="window.status='Location Assignment History'; return true;" onmouseout="window.status='Done';">Location Assignment History</a></li>
<li><a href="javascript: void window.top.goMenu('/assignments/LocationCaseLoad');" onmouseover="window.status='Location Case Load'; return true;" onmouseout="window.status='Done';">Location Case Load</a></li>
</ul></li>
<li><a href="#">Staff Information</a>
<ul>
<li><a href="javascript: void window.top.goMenu('/assignments/StaffCaseLoad');" onmouseover="window.status='Staff Case Load'; return true;" onmouseout="window.status='Done';">Staff Case Load</a></li>
<li><a href="javascript: void window.top.goMenu('/assignments/StaffAssignmentHistory');" onmouseover="window.status='Staff Assignment History'; return true;" onmouseout="window.status='Done';">Staff Assignment History</a></li>
</ul></li>
<li><a href="javascript: void window.top.goMenu('/assignments/AdmissionReasonList');" onmouseover="window.status='Assignment Maintenance'; return true;" onmouseout="window.status='Done';">Assignment Maintenance</a></li>
</ul>
<p>
<ul id="suckertree1">
<li><a href="#">Location Information</a>
<ul>
<li><a href="javascript: void window.top.goMenu('/assignments/LocationAssignmentHistory');" onmouseover="window.status='Location Assignment History'; return true;" onmouseout="window.status='Done';">Location Assignment History</a></li>
<li><a href="javascript: void window.top.goMenu('/assignments/LocationCaseLoad');" onmouseover="window.status='Location Case Load'; return true;" onmouseout="window.status='Done';">Location Case Load</a></li>
</ul></li>
<li><hr></li>
<li><a href="#">Staff Information</a>
<ul>
<li><a href="javascript: void window.top.goMenu('/assignments/StaffCaseLoad');" onmouseover="window.status='Staff Case Load'; return true;" onmouseout="window.status='Done';">Staff Case Load</a></li>
<li><a href="javascript: void window.top.goMenu('/assignments/StaffAssignmentHistory');" onmouseover="window.status='Staff Assignment History'; return true;" onmouseout="window.status='Done';">Staff Assignment History</a></li>
</ul></li>
<li><hr></li>
<li><a href="javascript: void window.top.goMenu('/assignments/AdmissionReasonList');" onmouseover="window.status='Assignment Maintenance'; return true;" onmouseout="window.status='Done';">Assignment Maintenance</a></li>
</ul>
</div>
</body>
</html>Any ideas, suggestions, dirty looks ?
Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“