HVMenu CSS Layout Problem (IE)

**gilespapworth** · 01-24-2006, 10:30 PM

I am using the latest version (from this site) of the hv menu. I am also using a pure css layout page. In firefox, the menu appears fine, no problem, in ie, the sub menu appears at the top left of the page instead of directly underneath the item. Any help. HTML and code below:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>:: // \\ ::</title>

<link href="style/MainStyle.css" type="text/css" rel="stylesheet">

</head>

<body>
<script language="JavaScript" type="text/javascript" src="script/exmplmenu_var.js"></script>
<script language="JavaScript" type="text/javascript" src="script/menu_com.js"></script>
<div id="MainFrame">
<div id="MainHeader"></div>
<div id="MainMenu">
<div id='MenuPos' style='position:relative;border:thin 1 red;'></div>
</div>
<div id="MainStrapline">Strapline_Image</div>
<div id="MainContent">
  
  <div id="Content_Left">BODY CONTENT HERE </div>
    <div id="Content_Right">
      <p>&nbsp;</p>
    </div>
  
  </div>
<div id="MainFooter">
<p>&copy; Copyright </p>
</div>
</div>
</body>
</html>

CSS SHEET

Code:

body, html
{
	height: 100%;
}

body
 {
	font-family: Verdana, Arial, Tahoma, Sans-Serif;
	font-size: 10px;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	/*background-image: url(../images/Background_tile.jpg);*/
	background-position: center top;
	background-repeat: repeat-y;
	background-color: #D5DADF;
}

a
{
	text-decoration: none;
	font-weight: bold;
	color: #272A50;	
}

a:hover
{
color: #34386E;	
}

#MainFrame
{
	width: 760px;
	padding: 0px;
	background-color: #FFFFFF;
	clear: both;
	position: relative;
	margin: auto;
	height: 100%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;

}

#MainHeader
{
	clear: both;
	width: 760px;
	height: 220px;
	background-color: #ededed;
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
	top: 0px;
	background-image: url(../images/header.jpg);
	background-attachment: scroll;
	background-position: center top;
	background-repeat: repeat-x;
}

#MainMenu
{
	clear: both;
	width: 760px;
	height: 20px;
	vertical-align: middle;
	text-align: right;
	padding: 0px;
	background-color: #194494;
	line-height: 20px;
}

#MainMenu p
{
	text-align: right;
	padding-right: 10px;
	margin-top: 8px;
	vertical-align: middle;
	display: block;
}

#MainMenu a
{
	text-decoration: none;
	color: #FFFFFF;
	line-height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	width: 100px;
	border-top-width: 1px;
	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;
	padding-top: 3px;
	padding-right: 40px;
	padding-bottom: 3px;
	padding-left: 40px;
}

#MainMenu a:hover
{
color: #34386E;	
}

#MainStrapline {
	width: 760px;
	height: 100px;
	text-align: left;
	vertical-align: middle;
}


#MainContent
{
	background-color: #FFFFFF;
	text-align: left;
	clear:both;
	margin: 0px;
	height: 100%;
	width: 756px;
	padding: 0px;
}

#Content_Left
{
	width: 471px;
	border-right: dotted 1px #000000;
	text-align: left;
	padding: 3px;
	float: left;
	margin: 0px;
	border-bottom: 0;
}

#Content_Right
{
	width: 271px;
	float: right;
	padding: 3px;
	margin-bottom: 0px;
	margin: 0px;
	text-align: left;
}

#MainFooter
{
	clear: both;
	margin: 0px;
	height: 20px;
	text-align: center;
	vertical-align: middle;
	padding: 2px;
	width: 756px;
}


/* STANDARD LINK CSS STYLE */



/*=========================================================================================

			THIS IS THE STYLE FOR THE MENU'S AT THE TOP OF THE PAGE

=========================================================================================*/

#MainMenu ul
{
	text-align:right;
	display: inline;
}

#MainMenu li
{
	display: inline;
}

#MainMenu li:after
{
	content: " | ";
/*	content: "\0020 \0020 \0020 \00BB \0020";*/
}
		
#MainMenu li.last:after
{
	content: " ";
}

AND THE HVMENU SCRIPT

Code:

var NoOffFirstLineMenus=5;			// Number of first level items
	var LowBgColor='#09378C';			// Background color when mouse is not over
	var LowSubBgColor='#00b6da';		// Background color when mouse is not over on subs
	var HighBgColor='#0f4ec7';			// Background color when mouse is over
	var HighSubBgColor='#00ccf4';		// Background color when mouse is over on subs
	var FontLowColor='#ffffff';			// Font color when mouse is not over
	var FontSubLowColor='#ffffff';		// Font color subs when mouse is not over
	var FontHighColor='#ffffff';		// Font color when mouse is over
	var FontSubHighColor='#ffffff';		// Font color subs when mouse is over
	var BorderColor='#ffffff';				// Border color
	var BorderSubColor='#ffffff';			// Border color for subs
	var BorderWidth=1;				// Border width
	var BorderBtwnElmnts=1;			// Border between elements 1 or 0
	var FontFamily="Verdana, Arial"	// Font family menu items
	var FontSize=8;				// Font size menu items
	var FontBold=0;				// Bold menu items 1 or 0
	var FontItalic=0;				// Italic menu items 1 or 0
	var MenuTextCentered='center';			// Item text position 'left', 'center' or 'right'
	var MenuCentered='left';			// Menu horizontal position 'left', 'center' or 'right'
	var MenuVerticalCentered='top';		// Menu vertical position 'top', 'middle','bottom' or static
	var ChildOverlap=0;				// horizontal overlap child/ parent
	var ChildVerticalOverlap=0;			// vertical overlap child/ parent
	var StartTop=-1;				// Menu offset x coordinate - 180
	var StartLeft=254;				// Menu offset y coordinate - 127
	var VerCorrect=0;				// Multiple frames y correction
	var HorCorrect=0;				// Multiple frames x correction
	var LeftPaddng=0;				// Left padding
	var TopPaddng=3;				// Top padding
	var FirstLineHorizontal=1;			// SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
	var MenuFramesVertical=1;			// Frames in cols or rows 1 or 0
	var DissapearDelay=50;			// delay before menu folds in
	var TakeOverBgColor=1;			// Menu frame takes over background color subitem frame
	var FirstLineFrame='navig';			// Frame where first level appears
	var SecLineFrame='space';			// Frame where sub levels appear
	var DocTargetFrame='space';			// Frame where target documents appear
	var TargetLoc='MenuPos';				// span id for relative positioning
	var HideTop=0;				// Hide first level when loading new document 1 or 0
	var MenuWrap=1;				// enables/ disables menu wrap 1 or 0
	var RightToLeft=0;				// enables/ disables right to left unfold 1 or 0
	var UnfoldsOnClick=0;			// Level 1 unfolds onclick/ onmouseover
	var WebMasterCheck=0;			// menu tree checking on or off 1 or 0
	var ShowArrow=0;				// Uses arrow gifs when 1
	var KeepHilite=1;				// Keep selected path highligthed
	var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10];	// Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
//	MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
//	For rollover images set "Text to show" to:  "rollover:Image1.jpg:Image2.jpg"
Menu1=new Array("Home","index.htm","",0,20,100);

Menu2=new Array("About","about.htm","self",0);
	
Menu3=new Array("Services","services.htm","self",9);
	Menu3_1=new Array("Consultancy","consultancy.htm","self",0,20,140);
	Menu3_2=new Array("Property Investment","propinvestment.htm","self",0);
	Menu3_3=new Array("Commercial Finance","commfinance.htm","self",0);

i have left out the bottom part of the code for the menu as this is for a commercial site.

thanks

Thread: HVMenu CSS Layout Problem (IE)

Thread Tools

Search Thread

HVMenu CSS Layout Problem (IE)

Bookmarks

Bookmarks

Posting Permissions