Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Problems With Spry Menu Bars In Dreamweaver Cs3


  • Please log in to reply
10 replies to this topic

#1 Hooky1742

Hooky1742

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 16 July 2008 - 09:18 AM

Hi,

I am having a couple of problems with a horizontal Spry menu bar in DW CS3. I have added the menu bar to the index page, and it all functions (almost) perfectly in safari and firefox (the borders around the drop-down sub-menus only goes half way round) but otherwise it works as it should. However, in IE when you hover over one of the menu items, the sub menu does not drop down underneath, it aligns the centre of the sub menu with parent item (rather than aligning the top of the sub menu with the parent item). Does anyone know of a fix that will allow it to render properly in IE? Here is the HTML and CSS code relevant to the index page and the menu bar:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Magnet Sales</TITLE><META NAME="GENERATOR" CONTENT="Freeway Pro 3.5.15"><META NAME="description" CONTENT="Specialist supplier of permanent magnet components and magnetic solutions to a variety of industries and applications: Magnet Sales and Service Limited."><META NAME="keywords" CONTENT="Alcomax,ferrite,samarium cobalt,neodymium iron,pot holding systems,office magnets,magnetic assemblies"><link rel="STYLESHEET" TYPE="text/css" HREF="magnet.css"><script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"></head><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0 BGCOLOR="#ffffff"><CENTER><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=822>	<TR VALIGN=TOP>		<TD>    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>			<TR>				<TD HEIGHT=82 WIDTH=201 VALIGN=MIDDLE BGCOLOR="#cccc66">			  <P ALIGN=CENTER><A HREF="index.html" TARGET="_self"><IMG SRC="Resources/magnetlogo.gif" BORDER=0 WIDTH=200 HEIGHT=60 ALIGN=MIDDLE HSPACE=0 VSPACE=0 ALT="Magnet Sales and Service Ltd"></A></P></TD>			  <TD COLSPAN=9 VALIGN=MIDDLE BGCOLOR="#cccc66">			  <P><IMG SRC="Resources/toptext.gif" BORDER=0 WIDTH=590 HEIGHT=60 ALIGN=TOP HSPACE=0 VSPACE=0 ALT="Tel. number: +44 1793 862100 Supplying the most suitable magnet for your application"></P></TD>		  </TR>			<TR>				<TD HEIGHT=21 WIDTH=201 VALIGN=BOTTOM BGCOLOR="#006600">			  <P>&nbsp;</P></TD>			  <TD WIDTH=1 VALIGN=BOTTOM BGCOLOR="#006600"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></TD>			  <TD WIDTH=113 VALIGN=TOP BGCOLOR="#006600">			  <P>&nbsp;</P></TD>			  <TD WIDTH=70 VALIGN=TOP BGCOLOR="#006600">			  <P>&nbsp;</P></TD>				<TD WIDTH=125 VALIGN=TOP BGCOLOR="#006600">			  <P>&nbsp;</P></TD>				<TD WIDTH=55 VALIGN=TOP BGCOLOR="#006600">			  <P>&nbsp;</P></TD>				<TD WIDTH=75 VALIGN=TOP BGCOLOR="#006600">			  <P>&nbsp;</P></TD>				<TD WIDTH=55 VALIGN=TOP BGCOLOR="#006600"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></TD>				<TD WIDTH=70 VALIGN=TOP BGCOLOR="#006600"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></TD>				<TD WIDTH=55 VALIGN=TOP BGCOLOR="#006600"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></TD>		  </TR>			<TR CLASS="nav">				<TD HEIGHT=25 WIDTH=201 VALIGN=TOP BGCOLOR="#006600"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></TD>			  <TD WIDTH=1 VALIGN=TOP BGCOLOR="#006600"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></TD>	    <TD COLSPAN=8 VALIGN=TOP BGCOLOR="#cccc66"><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=1 HEIGHT=1 ALT="">				                  <ul id="MenuBar1" class="MenuBarHorizontal">				    <li class="style1">				      <div align="center"><a href="index.html" class="MenuBarHorizontal"><strong>Home</strong></a> </div>				    </li><li>  <div align="center"><a href="magnets/index.html" class="MenuBarItemSubmenu"><strong>Magnets</strong></a>    <ul>      <li><a href="magnets/index.html"><strong>Background Info</strong></a></li>      <li><a href="magnets/castalcomax.html" class="MenuBarItemSubmenu"><strong>Alcomax</strong></a>        <ul>          <li><a href="magnets/castalcomax.html"><strong>General</strong></a></li>          <li><a href="magnets/castalcomax-rod.html"><strong>Rods</strong></a></li>          <li><a href="magnets/castalcomax-button.html"><strong>Buttons</strong></a></li>          <li><a href="magnets/castalcomax-horseshoe.html"><strong>Horse Shoe</strong></a></li>        </ul>      </li>      <li><a href="magnets/sinteredferrite.html" class="MenuBarItemSubmenu"><strong>Sintered Ferrite</strong></a>        <ul>          <li><a href="magnets/sinteredferrite.html"><strong>General</strong></a></li>          <li><a href="magnets/sinteredferrite-blocks.html"><strong>Blocks</strong></a></li>          <li><a href="magnets/sinteredferrite-discs.html"><strong>Discs</strong></a></li>          <li><a href="../magnets/sinteredferrite-discswole.html"><strong>Discs With Hole</strong></a></li>          <li><a href="magnets/sinteredferrite-rings.html"><strong>Rings</strong></a></li>        </ul>      </li>      <li><a href="magnets/flexibleferrite.html"><strong>Flexible Ferrite</strong></a></li>      <li><a href="../magnets/sscobalt.html" class="MenuBarItemSubmenu"><strong>Sintered Samarium Cobalt</strong></a>        <ul>          <li><a href="magnets/sscobalt.html"><strong>General</strong></a></li>          <li><a href="magnets/sscobalt-discs.html"><strong>Discs</strong></a></li>          <li><a href="magnets/sscobalt-blocks.html"><strong>Blocks</strong></a></li>          <li><a href="magnets/sscobalt-rings.html"><strong>Rings</strong></a></li>        </ul>      </li>      <li><a href="magnets/bnironboron.html" class="MenuBarItemSubmenu"><strong>Bonded Neodymium Iron Boron</strong></a>        <ul>          <li><a href="magnets/bnironboron.html"><strong>General</strong></a></li>          <li><a href="magnets/bnironboron-discs.html"><strong>Discs</strong></a></li>          <li><a href="magnets/bnironboron-blocks.html"><strong>Blocks</strong></a></li>          <li><a href="magnets/bnironboron-rings.html"><strong>Rings</strong></a></li>        </ul>      </li>      <li><a href="magnets/snironboron.html" class="MenuBarItemSubmenu"><strong>Sintered Neodymium Iron Boron</strong></a>        <ul>          <li><a href="magnets/snironboron.html"><strong>General</strong></a></li>          <li><a href="magnets/snironboron-discs.html"><strong>Discs</strong></a></li>          <li><a href="magnets/snironboron-blocks.html"><strong>Blocks</strong></a></li>          <li><a href="magnets/snironboron-rings.html"><strong>Rings</strong></a></li>        </ul>      </li>      <li><a href="magnets/potholdingsystems.html" class="MenuBarItemSubmenu"><strong>Pot Holding Systems</strong></a>        <ul>          <li><a href="magnets/potholdingsystems.html"><strong>General</strong></a></li>          <li><a href="magnets/phsystems-withcentrehole.html"><strong>With Centre Hole</strong></a></li>          <li><a href="magnets/phsystems-withsteelcap.html"><strong>With Steel Cap</strong></a></li>          <li><a href="magnets/phsystems-withfemalethread.html"><strong>With Female Thread</strong></a></li>          <li><a href="magnets/phsystems-hightemperature.html"><strong>High Temperature</strong></a></li>          <li><a href="magnets/phsystems-shallow.html"><strong>Shallow</strong></a></li>          <li><a href="magnets/phsystems-deep.html"><strong>Deep</strong></a></li>          <li><a href="magnets/phsystems-gripfast.html"><strong>Grip Fast</strong></a></li>        </ul>      </li>      <li><a href="magnets/officemagnets.html"><strong>Office Magnets</strong></a></li>      <li><a href="magnets/separatorsystems.html"><strong>Separator Systems</strong></a></li>      <li><a href="magnets/magneticassemblies.html"><strong>Magnetic Assemblies</strong></a></li>      <li><a href="magnets/magnetictesting.html"><strong>Testing And Measuring</strong></a></li>    </ul>  </div></li>		    <li>		      <div align="center"><a href="application_guide/magnetapplicationguide.html" class="MenuBarItemSubmenu"><strong>Applications</strong></a>		        <ul>		          <li><a href="application_guide/magnetapplicationguide.html"><strong>Application Guide</strong></a></li>		          <li><a href="markets/index.html"><strong>Medical</strong></a></li>		          <li><a href="markets/oilgas.html"><strong>Oil &amp; Gas</strong></a></li>		          <li><a href="markets/vacuum.html"><strong>Vacuum</strong></a></li>		          <li><a href="markets/defenceaerospace.html"><strong>Defence &amp; Aerospace</strong></a></li>		          <li><a href="markets/electrical.html"><strong>Electrical</strong></a></li>		          <li><a href="markets/food.html"><strong>Food</strong></a></li>		          <li><a href="markets/industrial.html"><strong>Industrial</strong></a></li>		          <li><a href="markets/transport.html"><strong>Transport</strong></a></li>		          <li><a href="markets/officeworkplace.html"><strong>Office &amp; Workplace</strong></a></li>		          </ul>		        </div>		    </li>			    <li>			      <div align="center"><a href="news/index.html"><strong>News</strong></a> </div>			    </li>			    <li>			      <div align="center"><a href="brochuredownloads.html"><strong>Downloads</strong></a></div>			    </li>			    <li>			      <div align="center"><a href="magnetsales-contactus.html"><strong>Contact Us</strong></a></div>			    </li>			  </ul>	                            		                  </TD>		  </TR>		</TABLE>	  </TD>	  <TD HEIGHT=120></TD>	</TR>	<TR>		<TD WIDTH=820><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=820 HEIGHT=1 ALT=""></TD>		<TD WIDTH=2 HEIGHT=1><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=2 HEIGHT=1 ALT=""></TD>	</TR></TABLE><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=822>	<TR VALIGN=TOP>		<TD></TD>		<TD HEIGHT=2></TD>	</TR>	<TR VALIGN=TOP>		<TD><IMG SRC="Resources/collage.jpeg" BORDER=0 WIDTH=820 HEIGHT=70 ALT="Collage of different magnet sizes and shapes"></TD>		<TD HEIGHT=70></TD>	</TR>	<TR>		<TD WIDTH=820><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=820 HEIGHT=1 ALT=""></TD>		<TD WIDTH=2 HEIGHT=1><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=2 HEIGHT=1 ALT=""></TD>	</TR></TABLE><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=822>	<TR VALIGN=TOP>		<TD COLSPAN=3></TD>		<TD HEIGHT=2></TD>	</TR>	<TR VALIGN=TOP>		<TD colspan="2">         		<!-- Created with CoffeeCup Firestarter [url="http://www.coffeecup.com"]http://www.coffeecup.com[/url] -->		<!--		<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"		  codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"		  ID=Untitled WIDTH=248 HEIGHT=455>		<PARAM NAME=movie VALUE="Untitled.swf">		<PARAM NAME=quality VALUE=high>		<PARAM NAME=loop VALUE=true>		<EMBED src="Untitled.swf" loop=true quality=high		  WIDTH=248 HEIGHT=455 TYPE="application/x-shockwave-flash"		  PLUGINSPAGE=		"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">		</EMBED>		</OBJECT>		-->                      </TD>      <TD>		<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>			<TR>				<TD HEIGHT=25 WIDTH=580 VALIGN=TOP>				<h1 CLASS="h1"> Welcome to Magnet Sales</h1></TD>			</TR>			<TR CLASS="body">				<TD WIDTH=580 height="272" VALIGN=TOP>				<P> Magnet Sales and Service Limited is a specialist supplier of permanent magnet components and magnetic solutions to a variety of industries and applications. </P>				<P>By working closely with our customers, we are able to help engineers choose the right material, assist in the design and supply of standard or bespoke parts and assemblies, solving the most challenging of magnetic problems. </P>				<P>From our large range of standard sizes and raw material, we are able to provide a comprehensive service, from small quantities and prototypes, through to production. Whether you are looking for, standard, fabricated or assembled part, our experienced technical team are ready to help. </P>				<P><b><br>                </b>&nbsp;</P>			  </TD>			</TR>		</TABLE>		</TD>		<TD HEIGHT=297></TD>	</TR>		<TR VALIGN=TOP>	  <TD colspan="3">&nbsp;</TD>		<TD HEIGHT=16></TD>	</TR>	<TR>		<TD WIDTH=53><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=216 HEIGHT=1 ALT=""></TD>		<TD WIDTH=55><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=24 HEIGHT=1 ALT=""></TD>		<TD WIDTH=580><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=580 HEIGHT=1 ALT=""></TD>		<TD WIDTH=2 HEIGHT=1><IMG SRC="Resources/_clear.gif" BORDER=0 WIDTH=2 HEIGHT=1 ALT=""></TD>	</TR></TABLE></CENTER><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-64065-3";urchinTracker();var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});</script></BODY></HTML>


CSS:

@charset "UTF-8";/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 *//* Copyright  2006. Adobe Systems Incorporated. All rights reserved. *//******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************//* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{	margin: 0;	padding: 0;	list-style-type: none;	font-size: 100%;	cursor: default;	width: auto;}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html"]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ul.MenuBarActive{	z-index: 1000;}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{	margin: 0;	padding: 0;	list-style-type: none;	font-size: 100%;	position: relative;	text-align: left;	cursor: pointer;	width: 100px;	float: left;	white-space: nowrap;}/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul{	margin: 0;	padding: 0;	list-style-type: none;	font-size: 100%;	z-index: 1020;	cursor: default;	width: 100px;	position: absolute;	left: -1000em;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{	left: auto;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{	width: 220px;	float: none;	background-color: transparant;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{	position: absolute;	margin: 0% 0 0 100%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{	left: auto;	top: 0;}/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************//* Submenu containers have borders on all sides */ul.MenuBarHorizontal ul{	border: 2px solid #00CC00;}/* Menu items are a light green block with padding and no text decoration */ul.MenuBarHorizontal a{	display: block;	cursor: pointer;	background-color: #cccc66;	padding: 0.5em 0.75em;	color: #333;	text-decoration: none;}/* Menu items that have mouse over or focus have a green background and white text */ul.MenuBarHorizontal a:hover{	background-color: #009900;	color: #FFFFFF;}ul.MenuBarHorizontal a:focus{	background-color: #009900;	color: #FFFFFF;}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{	background-color: #009900;	color: #FFFFFF;}/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************//* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenu{	background-repeat: no-repeat;	background-position: 95% 50%;}/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{	background-repeat: no-repeat;	background-position: 95% 50%;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{	background-image: url(SpryMenuBarDownHover.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{	background-image: url(SpryMenuBarRightHover.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************//*/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ul.MenuBarHorizontal iframe{	position: absolute;	z-index: 1010;}/*HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing*/ @media screen, projection{	ul.MenuBarHorizontal li.MenuBarItemIE	{		display: inline;		f\loat: left;		background: #FFF;	}}



One final thing, when I try and apply this menu bar layout to all the other pages of the site, the drop down menus stop working. The menu bar is present, but when i hover over an item with a submenu, nothing drops down. I cant think why this is, as i have copy pasted the code (which works on the index page) so there is no reason for it not to work on the other page. I have checked that I copied the CSS and JS links to the other page correctly as well, but still no joy.

All help greatly appreciated!

Many thanks in advance,

Matt

Reason for edit: im a tard and cant spell!

Edited by Hooky1742, 16 July 2008 - 09:20 AM.


BC AdBot (Login to Remove)

 


m

#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:55 AM

Posted 16 July 2008 - 07:32 PM

It doesn't do much good without the style sheets for the toolbar. None of the menus even work in Firefox with what you have provided.

#3 Hooky1742

Hooky1742
  • Topic Starter

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 17 July 2008 - 04:01 AM

D'OH! Forgot to include the main CSS sheet for the page. Sorry!

[codebox]/***************************************************
Style Sheets for The Magnet Sales Website with Freeway.
Body stles below.
***************************************************/

.magnav { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; font-weight: bold}
.magnav a:active { color: #666666; text-decoration: underline; font-weight: bold}
.magnav a:link { color: #666666; text-decoration: underline; font-weight: bold}
.magnav a:visited { color: #666666; text-decoration: underline; font-weight: bold}
.magnav a:hover { color: #666666; text-decoration: underline; font-weight: bold}

.magnavsub { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; font-weight: bold}
.magnavsub a:active { color: #666666; text-decoration: underline; font-weight: bold}
.magnavsub a:link { color: #666666; text-decoration: underline; font-weight: bold}
.magnavsub a:visited { color: #666666; text-decoration: underline; font-weight: bold}
.magnavsub a:hover { color: #666666; text-decoration: underline; font-weight: bold}

.body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000}
.body a:active { color: #666666; text-decoration: underline; font-weight: bold}
.body a:link { color: #666666; text-decoration: underline; font-weight: bold}
.body a:visited { color: #666666; text-decoration: underline; font-weight: bold}
.body a:hover { color: #666666; text-decoration: underline; font-weight: bold}

.nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-weight: bold;
}

/*************************
Table CSS Borders and Body
*************************/
.bordercontent {
background-color:#FFFFFF;
border: 1px solid rgb(0,153,102) }


/*************************
Headers styles below.
*************************/
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #006600;}
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #CC0000; font-style: italic}
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; background-color:#006600; padding:3px}
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #000000;}
h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #006600;}

/*************************
Table from old site.
*************************/
.table1
{ font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: bolder; background-color: #99CC99; letter-spacing: normal; text-align: center; vertical-align: middle; word-spacing: normal; white-space: normal; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px }

.table2 { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: normal; font-variant: normal; background-color: #C5E2C5; text-align: center; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px}

.stocktitles { font-family: "Times New Roman", Times, serif; font-size: 24px; font-style: normal; font-weight: bold; text-align: left; vertical-align: top; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; white-space: normal}

.table3 { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: normal; font-variant: normal; background-color: #E9F3E9; text-align: center; vertical-align: middle; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px}

.typical { font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: normal; background-color: #99CC99; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.unnamed1 { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: normal; font-variant: normal; color: #000000; background-color: #E9f3E9 }
[/codebox]


I really hope this is what you need because there are no other stylsheets!

Thanks for your help.

Matt

#4 Hooky1742

Hooky1742
  • Topic Starter

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 17 July 2008 - 04:41 AM

I have just remembered you will also need the javascript page in order for it to work.

/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */// Copyright  2006. Adobe Systems Incorporated.// All rights reserved.//// Redistribution and use in source and binary forms, with or without// modification, are permitted provided that the following conditions are met:////   * Redistributions of source code must retain the above copyright notice,//     this list of conditions and the following disclaimer.//   * Redistributions in binary form must reproduce the above copyright notice,//     this list of conditions and the following disclaimer in the documentation//     and/or other materials provided with the distribution.//   * Neither the name of Adobe Systems Incorporated nor the names of its//     contributors may be used to endorse or promote products derived from this//     software without specific prior written permission.//// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE// POSSIBILITY OF SUCH DAMAGE./******************************************************************************* SpryMenuBar.js This file handles the JavaScript for Spry Menu Bar.  You should have no need to edit this file.  Some highlights of the MenuBar object is that timers are used to keep submenus from showing up until the user has hovered over the parent menu item for some time, as well as a timer for when they leave a submenu to keep showing that submenu until the timer fires. *******************************************************************************/var Spry;if(!Spry){	Spry = {};}if(!Spry.Widget){	Spry.Widget = {};}// Constructor for Menu Bar// element should be an ID of an unordered list (<ul> tag)// preloadImage1 and preloadImage2 are images for the rollover state of a menuSpry.Widget.MenuBar = function(element, opts){	this.init(element, opts);};Spry.Widget.MenuBar.prototype.init = function(element, opts){	this.element = this.getElement(element);	// represents the current (sub)menu we are operating on	this.currMenu = null;	var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))	{		// bail on older unsupported browsers		return;	}	// load hover images now	if(opts)	{		for(var k in opts)		{			var rollover = new Image;			rollover.src = opts[k];		}	}	if(this.element)	{		this.currMenu = this.element;		var items = this.element.getElementsByTagName('li');		for(var i=0; i<items.length; i++)		{			this.initialize(items[i], element, isie);			if(isie)			{				this.addClassName(items[i], "MenuBarItemIE");				items[i].style.position = "static";			}		}		if(isie)		{			if(this.hasClassName(this.element, "MenuBarVertical"))			{				this.element.style.position = "relative";			}			var linkitems = this.element.getElementsByTagName('a');			for(var i=0; i<linkitems.length; i++)			{				linkitems[i].style.position = "relative";			}		}	}};Spry.Widget.MenuBar.prototype.getElement = function(ele){	if (ele && typeof ele == "string")		return document.getElementById(ele);	return ele;};Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className){	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)	{		return false;	}	return true;};Spry.Widget.MenuBar.prototype.addClassName = function(ele, className){	if (!ele || !className || this.hasClassName(ele, className))		return;	ele.className += (ele.className ? " " : "") + className;};Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className){	if (!ele || !className || !this.hasClassName(ele, className))		return;	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");};// addEventListener for Menu Bar// attach an event to a tag without creating obtrusive HTML codeSpry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture){	try	{		if (element.addEventListener)		{			element.addEventListener(eventType, handler, capture);		}		else if (element.attachEvent)		{			element.attachEvent('on' + eventType, handler);		}	}	catch (e) {}};// createIframeLayer for Menu Bar// creates an IFRAME underneath a menu so that it will show above form controls and ActiveXSpry.Widget.MenuBar.prototype.createIframeLayer = function(menu){	var layer = document.createElement('iframe');	layer.tabIndex = '-1';	layer.src = 'java script:false;';	menu.parentNode.appendChild(layer);		layer.style.left = menu.offsetLeft + 'px';	layer.style.top = menu.offsetTop + 'px';	layer.style.width = menu.offsetWidth + 'px';	layer.style.height = menu.offsetHeight + 'px';};// removeIframeLayer for Menu Bar// removes an IFRAME underneath a menu to reveal any form controls and ActiveXSpry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu){	var layers = menu.parentNode.getElementsByTagName('iframe');	while(layers.length > 0)	{		layers[0].parentNode.removeChild(layers[0]);	}};// clearMenus for Menu Bar// root is the top level unordered list (<ul> tag)Spry.Widget.MenuBar.prototype.clearMenus = function(root){	var menus = root.getElementsByTagName('ul');	for(var i=0; i<menus.length; i++)	{		this.hideSubmenu(menus[i]);	}	this.removeClassName(this.element, "MenuBarActive");};// bubbledTextEvent for Menu Bar// identify bubbled up text events in Safari so we can ignore themSpry.Widget.MenuBar.prototype.bubbledTextEvent = function(){	return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));};// showSubmenu for Menu Bar// set the proper CSS class on this menu to show itSpry.Widget.MenuBar.prototype.showSubmenu = function(menu){	if(this.currMenu)	{		this.clearMenus(this.currMenu);		this.currMenu = null;	}		if(menu)	{		this.addClassName(menu, "MenuBarSubmenuVisible");		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')		{			if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)			{				menu.style.top = menu.parentNode.offsetTop + 'px';			}		}		if(typeof document.uniqueID != "undefined")		{			this.createIframeLayer(menu);		}	}	this.addClassName(this.element, "MenuBarActive");};// hideSubmenu for Menu Bar// remove the proper CSS class on this menu to hide itSpry.Widget.MenuBar.prototype.hideSubmenu = function(menu){	if(menu)	{		this.removeClassName(menu, "MenuBarSubmenuVisible");		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')		{			menu.style.top = '';			menu.style.left = '';		}		this.removeIframeLayer(menu);	}};// initialize for Menu Bar// create event listeners for the Menu Bar widget so we can properly// show and hide submenusSpry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie){	var opentime, closetime;	var link = listitem.getElementsByTagName('a')[0];	var submenus = listitem.getElementsByTagName('ul');	var menu = (submenus.length > 0 ? submenus[0] : null);	var hasSubMenu = false;	if(menu)	{		this.addClassName(link, "MenuBarItemSubmenu");		hasSubMenu = true;	}	if(!isie)	{		// define a simple function that comes standard in IE to determine		// if a node is within another node		listitem.contains = function(testNode)		{			// this refers to the list item			if(testNode == null)			{				return false;			}			if(testNode == this)			{				return true;			}			else			{				return this.contains(testNode.parentNode);			}		};	}		// need to save this for scope further down	var self = this;	this.addEventListener(listitem, 'mouseover', function(e)	{		if(self.bubbledTextEvent())		{			// ignore bubbled text events			return;		}		clearTimeout(closetime);		if(self.currMenu == listitem)		{			self.currMenu = null;		}		// show menu highlighting		self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");		if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))		{			opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);		}	}, false);	this.addEventListener(listitem, 'mouseout', function(e)	{		if(self.bubbledTextEvent())		{			// ignore bubbled text events			return;		}		var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);		if(!listitem.contains(related))		{			clearTimeout(opentime);			self.currMenu = listitem;			// remove menu highlighting			self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");			if(menu)			{				closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);			}		}	}, false);};


hopefully that is everything needed for functionality! Sorry for my gross incompetance!

Thanks again,

Matt

#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:55 AM

Posted 18 July 2008 - 08:52 AM

Still doesn't work. I don't know what to tell you. Is the site live somewhere?

#6 Hooky1742

Hooky1742
  • Topic Starter

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 18 July 2008 - 10:11 AM

Is there any way I can attach a .rar file (only 8kb in size) to a post? That way i can include a version which definitely works. Sadly the site isnt live anywhere at present, my company wont allow me to publish a live version until i have sorted these issues out! Very frustrating!

Thanks again for taking the time to look at my case.

#7 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:55 AM

Posted 18 July 2008 - 10:22 AM

When you reply, there should be a place directly under the text window on the right that will allow an attachment. Rar files are not allowed, but zip files are.

#8 Hooky1742

Hooky1742
  • Topic Starter

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 18 July 2008 - 10:54 AM

hmm, i cant see anywhere to add an attachment. All i can do is insert links and images using a URL.

#9 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:10:55 AM

Posted 18 July 2008 - 11:45 AM

Oh. Maybe that is just staff that can do that.

#10 Hooky1742

Hooky1742
  • Topic Starter

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 21 July 2008 - 04:51 AM

Damn, thats a bit of a pain. Can I possibly email the zip file to you or something like that?

#11 Hooky1742

Hooky1742
  • Topic Starter

  • Members
  • 111 posts
  • OFFLINE
  •  
  • Local time:04:55 PM

Posted 22 July 2008 - 08:07 AM

aha, I have solved the alignment issues. I used DW to centrally align the text in each top level menu item. It did this by wrapping each HTML element in a div and aligning the div centrally. This appeared to cause the issues in IE. By removing all the associated <div align="center"> and </div> tags the sub menus now align properly in both browsers. However, the text is left justified now, which i dont really want. Still, at least the menu is now functional!

Still having issues with the CSS border surrounding the sub menus in firefox, it just wont border the whole box.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users