Aligning columns in DW in Internet explorer.
My columns are crooked and the code appears to be fixed.
Signed,Doug
If you can't post a link to your problem page, a very distant second would be to copy and paste the entire code of your page and css directly into the forum (do not use an email reply, it won't work).
Without seeing the code and what it's doing/not doing, there's really no good way to help you aside from randomly guessing what the culprit might be.
My first guess will be "html or css errors may be causing a display problem"
Run your code through the validators here to clear up any errors...
CSS: http://jigsaw.w3.org/css-validator/
HTML: http://validator.w3.org/
Similar Messages
-
Interactive Report wide Column Sorting hangs in Internet Explorer
I have an application that contains an interactive report. The Column Sorting and Filtering functions work fine in Firefox. However, if I try to sort a wide (110 byte - it contains a hyperlink) column in Internet Explorer, APEX produces the 'loading data' image and then hangs. Even a sort of a narrow (3 byte) column is noticeably slower in Internet Explorer than in Firefox.
We are running APEX 3.1.1 on Oracle Database 10g Enterprise Edition Release 10.2.0.4.0 - 64bit Production with the Partitioning, OLAP, Data Mining and Real Application Testing optionsHello,
I answer you over your post.
Joe Bertram wrote:
Hi,
That's an interesting issue. What kind of images are these? Are they the default images installed or are they your custom set of images?The images are png files included as they were icons into the table.
>
You say the images disappear when you sort the report. Does it happen when you sort on demand in the dashboard or when you sort it in the report itself? Or both?Only when sort from the dashboard. From the report itself, the answers works fine.
>
What are your environment details?Server:
OBI 10.1.3.4.1.090414.1900
Windows 2003 server
JDK 1.6.0.17
Thin Client:
Internet explorer 8
>
Thanks for the extra info.
Best regards,
-JoeIt happens also in other two environments (Development and Pre-production) with the same SW architecture.
Thanks for your time. -
Spry Alignment and Positioning Problem in Internet Explorer 6 and 7
I am designing a website at http://atoment.007gb.com, and neither me, nor my partner can figure out why the Spry Horizontal Menu Bar is loading the way it is in Internet Explorer. We are doing this for a school project, and eye appeal and workability is a top priority. I changed and customized most of it, but even if i did keep it the same, it still wouldn't work. I have only the best confidence, that even given the amount i have changed, you will still be able to help me with my alignment problem.
The Submenu Buttons Tile across the page, when they are supposed to go straight down...
the Submenu overlaps the main menu when you hover over it
and the darned thing wont center in any of my browsers, but thats the least of my worries.
Here is the CSS Codes
#MasterNavigator {
width: 1024px;
height: 75px;
#Navigator {
margin-left: auto;
margin-right: auto;
clear: both;
#NavigatorButtonsLeft {
background-image: url(../_images/MenuButtonBackgroundLeft.png);
width: 128px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align:center;
#NavigatorButtonsMiddle {
background-image: url(../_images/MenuButtonBackground.png);
width: 128px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align:center;
#NavigatorButtonsRight {
background-image: url(../_images/MenuButtonBackgroundRight.png);
width: 128px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align:center;
#NavigatorButtonsSub {
background-image:url(../_images/SubMenuButtonBackground.png);
width: 128px;
height: 35px;
line-height: 36px;
text-align: center;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
And here is my HTML code:
Home
Publishing
Videos
Patents
Wallpapers
Avatars
Userbars
Digital Design
Digital Gallery
3-D Gallery
Sci-Fi
Technology
Structures
Vehicles
Concepts
Web Design
Templates
Graphics
About Us
Atom Enterprises
Slamerz
The images I used are 20% Transparent, and are listed below.
http://atoment.007gb.com/_images/MenuButtonBackgroundLeft.png
http://atoment.007gb.com/_images/MenuButtonBackground.png
http://atoment.007gb.com/_images/MenuButtonBackgroundRight.png
http://atoment.007gb.com/_images/SubMenuButtonBackground.png
Please try your best to help me.0087adam wrote:
ok, but how can I make it work with what I have. All the css codes are the
same, they just have been renamed.
The original SpryMenuBarHorizontal.css does not have any issues in any of the browsers. If you go and modify the original, and it does not work anymore, then the logical conclusion is that you have made one or (more likely) multiple mistakes.
In other words, you cannot make it work with what you already have.
My advice is that you replace the original CSS and work from there; but instead of changing the original CSS, make your changes in a separate stylesheet so that you can monitor and test the code at each change. For instance if you want to change the colour of the text you make a style rule that overrides the original in your new stylesheet as follows:
ul.MenuBarHorizontal a {
color: #333;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
color: #FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
color: #FFF;
If you want to change the background colour to an image, then follow the same procedure, testing your code at each step.
I hope this helps.
Ben -
Having trouble with left align in all versions of internet explorer
I created my pages in Dreamweaver and uploaded them to my university's server. Because we have a content management system and my boss didn't like the layout that we are able to use, I had to create separate html pages and place them into the CMS using iframes. Each individual page has a banner on the top, and underneath that, a menu on the left side and the main body text on the right. In Chrome, Safari, and Firefox, the menu takes up the appropriate amount of space (about 250 px) and then the body text is left aligned about 10 px to the right of the menu. However, when I open the same page internet explorer, there is a large gap between the menu and the text. I have tried it within the iframes and without and both have this problem. The URL is: http://chicago.medicine.uic.edu/UserFiles/Servers/Server_442934/File/Hematology/welcome.ht m. Any suggestions?
Thanks!I don't use tables for layouts. You have more control with CSS.
Copy & paste this into a new HTML page and play with it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/* Layout */
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
background: #edeadb;
#wrapper {
width: 925px;
margin:0 auto; /**centered on screen**/
overflow:hidden; /**to contain floats**/
#header { }
#leftSidebar {
width: 225px;
float:left;
border-right: 1px double navy;
font-size:12px;
#mainContent {
margin-left: 255px;
/**left side menu**/
#leftSidebar ul li a, .menu ul li a:visited {display:block !important; text-decoration:none; color:#000; width:220px !important; height:30px; text-align:left; text-indent: 10px; border:1px solid #fff; border-width:1px 1px 0 0; background:#070738 !important; color:#FFFFFF !important;
line-height:30px; font-size:11px;}
#leftSidebar ul {padding:0 !important; margin:0 !important; list-style-type: none !important; }
#leftSidebar ul li {float:left; margin-right:1px !important; position:relative !important;}
#leftSidebar ul li ul {display:none !important}
li.leaf, li.collapsed, li.expanded {
list-style-image: none;
list-style: none;
list-style-type: none;
#leftSidebar ul {
list-style-image: none;
list-style: none;
list-style-type: none;
/* specific to non IE browsers */
#leftSidebar ul li:hover a {color:#fff !important; background:#3b3b5c !important;}
#leftSidebar ul li:hover ul {display:block !important; position:absolute !important; top:0; left:220px; width:105px;}
#leftSidebar ul li:hover ul li a.hide {background:#070738; color:#FFFFFF;}
#leftSidebar ul li:hover ul li:hover a.hide {width:150px;}
#leftSidebar ul li:hover ul li ul {display: none !important;}
#leftSidebar ul li:hover ul li a {display:block !important; background:#070738 !important; color:#FFFFFF !important; width:150px;}
#leftSidebar ul li:hover ul li a:hover {background:#3b3b5c !important; color:#FFFFFF !important; list-style-type: none !important;}
#leftSidebar ul li:hover ul li:hover ul {display:block !important; position:absolute !important; left:151px; top:0; color:#FFFFFF;}
#leftSidebar ul li:hover ul li:hover ul li a {display:block; width:200px; background:#070738 !important; color:#FFFFFF;}
#leftSidebar ul li:hover ul li:hover ul li a:hover {background:#3b3b5c !important; color:#fff;}
/**end menu**/
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="http://chicago.medicine.uic.edu/UserFiles/Servers/Server_442934/Image/Hematology/mainbannerredstripe.jpg" alt="UIC Hemaotology/Oncology" />
<!--end header --></div>
<div id="leftSidebar">
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/">Welcome</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/medicine/hemonc/hemonc_calendar/" target="new">Section Calendar</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/faculty/">Faculty</a></li>
<li><a href="ttp://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/">Fellowship</a>
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/about/">About the Program</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/curriculum/">Curriculum</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/mph/">Additional UIC Programs for Fellows</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/physicianscientist/">Clinical Investigator Pathway</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/apply/">How to Apply</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/contact/">Contact Us</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/fellowship/currentfellows/">Current Fellows</a></li>
</ul>
</li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/research/">Research</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/studentrotations/">Medical Student Rotations</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/dom_sicklecell">UIC Sickle Cell Center</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/">UIC Blood & Marrow Transplant Program</a>
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/about/">About Us</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/research/">Stem Cell Research</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/BMT/contact">Contact Us</a></li>
</ul>
</li>
<li><a href="http://www.chicago.medicine.uic.edu/cancercenter/clinical_trials/">Cancer Clinical Trials</a></li>
<li><a href="http://www.chicago.medicine.uic.edu/cancercenter">UIC Cancer Center</a></li>
<li><a href="http://uillinoismedcenter.org/">UIC Medical Center</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/">UIC Cancer Center at MacNeal</a>
<ul>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/about/">About Us</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/faculty/">Faculty</a></li>
<li><a href="http://chicago.medicine.uic.edu/departments___programs/departments/Medicine/hemonc/macneal/contact/">Contact Us</a></li>
</ul>
</li>
</ul>
<img src="http://chicago.medicine.uic.edu/UserFiles/Servers/Server_442934/Image/Hematology/line.jpg" alt="" /> <br /><br />University of Illinois at Chicago <br />
Section of Hematology/Oncology <br />
840 South Wood Street <br />
Suite 820-E CSB, MC 713 <br />
Chicago, IL 60612 <br />
Phone: (312) 996-9424 <br />
Fax: (312) 413-4131
<!--end leftSideBar --></div>
<div id="mainContent">
<h1>Welcome!</h1>
<p>Welcome to the Section of Hematology/Oncology at the University of Illinois at Chicago. There are over twenty-five faculty members that are committed to providing the highest quality of patient care. The section houses a variety of outstanding programs including an exceptional stem cell transplant program, a nationally recognized sickle cell program, and a strong neuro-oncology program. We are one of the few universities that participate in the Minority-Based Community Clinical Oncology Program and are also a member of the Myeloproliferative Disease Program, both being NCI-funded programs.</p>
<p>The program continues to be a leader in expanding the possibilities of cancer research. Patients are given the opportunity to participate in a variety of pivotal clinical trials in thirteen different disease-type areas. Our research teams work to ensure that tomorrow's science is practiced as today’s medicine.</p>
<p>Our three-year ACGME Accredited fellowship program offers fellows the opportunity to work with a range of hematologic and oncologic disorders in a variety of settings in the Chicagoland area. Fellows rotate at the Jesse Brown VA Medical Center, Mount Sinai Hospital, Mercy Hospital and now with MacNeal Hospital in Chicago’s west suburb of Berwyn. Fellows are given the opportunity to focus on both clinical and bench research projects under the mentorship of our faculty members.</p>
<p>We welcome you to take a look at what our section has to offer.</p>
<!--end maincontent --></div>
<!--end wrapper --></div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Internet Explorer Alignment Problem!
Hey guys,
Ive just recently developed a website using mainly dreamweaver... Now i've just realised a problem. The website looks perfect and as it should when you open it in Firefox. However, if you open it in Internet Explorer the top banner isn't aligned correctly which the background image... also the text is centered when it should be aligned left.
Can anyone please shed some light on what the hell is happening here?
The website is: (http://sonsofvalour.net)
Any help much appreciated thanks!I can tell you, but if you make my changes, you have to promise that you'll also change this content -
INTERNET EXPLORER IS F****** Posted on 21/08/12 by Etherate ***THIS SITE DOES NOT DISPLAY CORRECTLY IN INTERNET EXPLORER. I'm aware of a problem with the site not aligning correctly when viewed using internet explorer. But why the hell are you using IE anyway? you noobs - get a real browser.
To this -
MY PAGE CODE IS TOO ANTIQUE TO DISPLAY PROPERLY IN MODERN BROWSERS Posted on 21/08/12 by Etherate ***THIS SITE DOES NOT DISPLAY CORRECTLY IN INTERNET EXPLORER BECAUSE OF THE WAY I BUILT THE PAGE. I'm aware of a problem with the site not aligning correctly when viewed using internet explorer. But why the hell am I using such out-of-date methods anyhow? Beats me....
Try changing this (for the right column inner table) -
<table width="412" border="0">
to this -
<table width="412" border="0" style="text-align: left;">
and see if that helps. If it does, add a class assignment to the table, e.g.,
<table width="412" class="alignLeft">
and this rule to your CSS -
.alignLeft { text-align:left; border:none; } -
Optimize keyboard navigation with internet explorer
When using the tab key for jumping between the items on the page, the internet explorer jumps also to the labels e.g. of a select list, whereas mozilla firefox jumps only to the items itself.
Second, if a report has a column with radiogroup, the internet explorer jumps only to the radio button of the first row, then leaves the report, whereas mozilla firefox processes all rows of the report.
I'd like the internet explorer to behave like the mozilla firefox:
-- leave out the labels
-- process all rows of the report
Any ideas ?In HTML Form Element Attributes enter:
tabindex="1" and for the next element in the row tabindex="2" and so on...
This way also IE will behave as you like.
For radio buttons the only solution I know for IE is once the radio button is selected is to use the arrow left or right to move to the next position.
Denes Kubicek -
Image files in a table mis-aligned in Internet Explorer
I have a website which uses a couple of tables to align image files, which consist of text in boxes. Although in Dreamweaver, there is a slight discrepancy between their positions in Firefox or Safari, I've been able to get the alignment I want with small adjustments in Dreamweaver. However, in Internet Explorer 8 the top image file of two which reside in the same table is displayed about 15 pixels to the right of the one underneath it. (The vertical positioning of the whole table is a bit off as well, but I'm less concerned with that as I attribute that to browser positioning issues.) I have no idea how this could happen, as I would think the table would constrain the two images from shifting side to side in relation to each other.
I'm on a Mac running OSX 10.6.8. and Creative Suite 3/Dreamweaver 8
Here's the URL: http://www.downsizedlivingmag.com
Any ideas as to how I can fix this? Or even better, how I can achieve the same results in IE that I get in Firefox and Safari?
Thanks!Ha, ha. I love the site!
You can use IE Conditional Comments to add some padding-top above your tables.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
Sadly, when I disable images in my browser, your page is very short on indexable content. Search engines, translators and screen readers can't access text in images. You might wish to re-think this design decision and opt for more real text in headings and paragraphs where it will get noticed. Alas, designing for the web has almost nothing in common with print design.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I just got the newest version of Yahoo Mail and on Internet Explorer everything works fine. On Firefox, the contact page is completely blank ( no tabs, columns, or contact information)
Yahoo have acknowledged my emails and have now resolved this problem. It was obviously at their end and only started with their new mail client.
-
Column widths OK in Firefox & Opera, NOT WORKING in Internet Explorer?
Hi there,
I've got a table based website and for some reason Internet Explorer is messing up my layout? It works fine in Firefox and Opera but IE is extending one particular <td> tag beyond its set width? What's even more strange is that the problem only happens on 3 of the 5 pages?
The <td> in question is the first one (width="175" and class="banner_logo")
Tested with Firefox 3.5, Opera 10.10, Internet Explorer 8
Here's the code which deals with this part of the page layout:
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="175" rowspan="2" bgcolor="#FF0000" class="banner_logo"><!-- #BeginLibraryItem "/Library/logo.lbi" -->
<a href="index.html"><img src="images/logo.png" alt="Malcolm McReath Consultancy - PrintExpert.net" width="151" height="93" border="0"></a><!-- #EndLibraryItem --></td>
<td width="280" class="banner_empty"> </td>
<td width="345" class="banner_contact_details"><!-- #BeginLibraryItem "/Library/banner_upper_contact.lbi" -->
<p>Tel: 01582 763 117 Mob: 07850 810 030 </p>
<p>Fax: 01582 768 117 <a href="mailto:[email protected]">Email: [email protected]</a></p>
<!-- #EndLibraryItem --></td>
</tr>
<tr>
<td colspan="2" class="navbar"><!-- #BeginLibraryItem "/Library/navbar.lbi" -->
Any help greatly appreciated! let me know if you require more code or CSS to solve problem....cheers
PS. Since my original post I've tested it in Chrome and Safari and it works fine! Can't everyone just stop using I.E. please?!I've attached a visual represenation of what the problem is as the site is not live yet...hopefull this will clarify things a bit more.
Working Page (this actually works in IE as well)
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
Section 1:
<td width="175" rowspan="2" bgcolor="#FF0000" class="banner_logo"><!-- #BeginLibraryItem "/Library/logo.lbi" -->
<a href="index.html"><img src="images/logo.png" alt="Malcolm McReath Consultancy - PrintExpert.net" width="151" height="93" border="0"></a><!-- #EndLibraryItem --></td>
Section 2:
<td width="280" class="banner_empty"> </td>
Section 3:
<
td width="345" class="banner_contact_details"><!-- #BeginLibraryItem "/Library/banner_upper_contact.lbi" -->
<p>Tel: 01582 763 117 Mob: 07850 810 030 </p>
<p>Fax: 01582 768 117 <a href="mailto:[email protected]">Email: [email protected]</a></p>
<!-- #EndLibraryItem --></td>
Ends of Sections 1-3:
</tr>
Section 4:
<tr>
<td colspan="2" class="navbar"><!-- #BeginLibraryItem "/Library/navbar.lbi" --> ...JS code omitted as there's loads of it!...
</tr>
Here's an example of the problem page...notice the red background of the first <tag> extends to the right for some reason.... -
Alignment bug in Windows Internet Explorer
Im trying to get a silly blog off the ground; I get it to display fine in Safari; Mac/Windows Firefox......but there is usually a major format bug in Windows Internet Explorer. The column on the left wants to keep shifting to the center. Can't find the cause. Any solution? Thanks;-)
(or let me know if I managed to fix it)
http://www.helpwithfrench.com/nitwit/Myblog/Blog/Blog.html
thanks again;-)I do use iweb enhancer and massreplacit for additional code in the head and elsewhere, hmm , I'll check into that possibility.
Of course it comes out fine on every other browser. Meantime; in iweb, the left column is placed exactly on the left edge. So Im stumped. Should I shift left, right, toward the center?? I could shift both columns to the right; so the left is in the center, and the right is on the far side; but then they might still tend to bleed over one another...hmm
thanx
I'll be checking the massreplacit 'post processing' as you say;-) -
Look at Internet Explorer and how you can "pin" the bookmarks toolbar to the side for easy access. I am a new user of Firefox.
'''{ Ctrl + b }''' to open the Bookmarks Sidebar. Along long as you don't close it, the Bookmarks Sidebar should stay open and be open when you start Firefox.
-
Spry Menu issues in Internet Explorer
I have created a Spry menu for my website and although the menu appears to look fine in Firefox and Safari, the formatting changes in Internet Explorer(IE).
1.sub menu bar is not dropping down below the main menu bar it is appearing at the top of the screen.
2.When you hover over the sub menu bar items the font should be white however in IE it is appearing as an aqua color.
3.The menu bar is not straight across the page, at the beginning and end there are chunks of the menu bar that appear white.
Are there any fixes for these issues that would help to make the menu look consistent across all browsers. The website page is
www.applmgt.net/LMNtestpage/html, below is the code. Any help would be appreciated as soon as possible.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Process operators – woodbuffalo.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="mystylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
color: #300;
-->
</style></head>
<!-- Start Superstats code version 7.0b. Copyright 2007 MyComputer.com, Inc. More info available at http://www.mycomputer.com --><script language="JavaScript" type="text/javascript">/* You may give each page an identifying name, server, and channel on the next lines. */var pageName = "CostIntro";var pageType = "";var pageValue = "0";var product = "";/**** DO NOT ALTER ANYTHING BELOW THIS LINE! ****/var code = ' '; </script>
<script src="http://code.superstats.com/code/ss/applicationswb/0/30b" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
br = navigator.appName + parseInt(navigator.appVersion);
if (code != ' ' || br == 'Netscape2') {
document.write(code);
} else {
document.write(' <im'+'g src="http://code.superstats.com/b/ss/applicationswb/1'+ '?pageName=' + escape(pageName) + '" alt="" border=0>'); }</script>
<noscript><img src="http://stats.superstats.com/b/ss/applicationswb/1" alt="" border=0></noscript><!-- End Superstats tracking code. -->
<body vlink="#4E2C03">
<table width="760" border="0" cellspacing="0" cellpadding="2">
<tr>
<td bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="images/buffalobanner2.jpg" width="760" height="142"></td>
</tr>
</table>
<table width="764" border="0" bgcolor="#4E2C03"cellspacing="0" cellpadding="0">
<tr>
<td width="311" "height="60"><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif"><a href="index.html" class="navbar">www.woodbuffalo.net</a> > <a href="LMNtestStart.html" class="navbar">Labour
Market News</a></font></td>
<td width="136" height="65"><!-- BEGIN: Constant Contact Border Email List Button -->
<div align="center">
<table width="135" border="0" cellspacing="1" cellpadding="2" bgcolor="#330000">
<tr>
<td bgcolor="#FFFFFF" align="center"><div style="float: right; margin-right:3px; margin-top:2px; background-color: #330000;"><a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" target="_blank"><img src="http://img.constantcontact.com/ui/images1/visitor/email5_trans.gif" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" border="0" align="center"></a></div>
<a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" style="text-decoration:none; font-weight:bold; font-family:Arial; font-size:13px; color:#000000;" target="_blank">Join our FREE Subscriber List</a></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Border Email List Button --> </td>
<td width="299" height="65"><form action="http://www.applmgt.net/SearchResults.html" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="011832208051241677611:jmojvtncciq" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</table><ul id="MenuBar1" class="MenuBarHorizontal">
<table width="780" border="0" >
<tr>
<td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
</a>
<ul>
<li><a href="employINTRO.html">Introduction</a></li>
<li><a href="aboutWages.html">Wages</a></li>
<li><a href="employOG.html">Oil & Gas</a></li>
<li><a href="employSERV.html">Service/Retail</a></li>
<li><a href="employCONST.html">Construction</a></li>
<li><a href="employGOVED.html">Gov't/Education</a></li>
<li><a href="employFOREST.html">Forestry</a></li>
<li><a href="employTRANS.html">Transportation</a></li>
<li><a href="employHEALTH.html">Health</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
<ul>
<li><a href="trainINTRO.html">
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
Introduction</a></li>
<li><a href="trainSKILLS.html">General Skills</a></li>
<li><a href="trainSAFE.html">Safety</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
<ul>
<li><a href="aboutINTRO.html">Introduction</a></li>
<li><a href="MediaEvent.html">Coming Events</a></li>
<li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
<li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
<ul>
<li><a href="mediaINTRO.html">Introduction</a></li>
<li><a href="mediaLMN.html">Labour Market News</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
<ul>
<li><a href="linksINTRO.html">Introduction</a></li>
<li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="linksEMPLIntro.html">Employer Websites</a></li>
<li><a href="linksRESIntro.html">Resources</a></li>
<li><a href="linksFACTSIntro.html">Fast Facts</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="privactStatement.html">Privacy Statement</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="siteMAP.html">Site Map</a></li>
</ul>
<ul>
</td>
</tr> </td>
</tr>
</table>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="760" height="40" bgcolor="#FFFFFF"><p><font color="#4E2C03" size="4" face="Arial, Helvetica, sans-serif"><strong>Process
operators: Maintaining a career in the oil sands industry</strong></font><img src="images/darkLine.gif" width="750" height="3"></p>
</td>
</tr>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
<td colspan="2" valign="top"><table width="760" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="135" valign="top"><table width="165" height="188" border="0" cellpadding="1" cellspacing="0" bgcolor="FFFFFF">
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Main
story</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>What's in a Name?</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Schools Offering Programs</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Apply for an Oilsands Job</strong></font></td>
</tr>
<tr>
<td><p><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></p></td>
</tr>
</table>
<p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="ddcb8f">
<tr>
<td><div align="left">
<p><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><em>"A
process operator, whether in Fort McMurray, or in a gas
plant in Medicine Hat, basically processes the upstream
oil and gas until it's purified enough to go through
a pipeline outside the gates of the plant." </em></font></p>
<p align="right"><font color="4e2c03" size="2" face="Arial, Helvetica, sans-serif"><strong>John Cook,<br>
associate dean of technology, Keyano College</strong></font></p>
</div></td>
</tr>
</table> <p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><strong><a href="contactUS.html"><img src="images/bulletin/LMNWB200810vFinal1.gif" width="121" height="158" border="0"></a></strong></font><font color="#000000" size="3" face="Arial, Helvetica, sans-serif"><strong>Free Subscribe
Now!</strong></font></p>
</div>
</td>
</tr>
</table> <p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><a href="mediaLMN1208.html"><font color="#000000" size="4.5" face="Arial, Helvetica, sans-serif"><strong>Next
issue...</strong></font></a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font color="333399" size="3" face="Arial, Helvetica, sans-serif"><img src="images/htmlbulletinimages/1008v5.png" width="125" height="159" border="0"></font></strong></a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Janitoral</font></strong></a></p>
<p align="center"><a href="mediaLMN1208.html"><img src="images/htmlbulletinimages/1008v6.png" width="123" height="141" border="0"> </a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Security</font> </strong></a></p>
</div>
</td>
</tr>
</table> <p> </p> <table width="155" height="141" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><font color="#000000" size="2" face="Arial, Helvetica, sans-serif"><strong><font color="#FF9933">If
you like this article, you might also like:</font></strong></font></p>
<p align="center"><font color="#FF0000" size="3.5" face="Arial, Helvetica, sans-serif"><strong><a href="mediaLMN1206.html">Employment in the oilsands</a></strong></font></p>
</div>
</td>
</tr>
</table> <p> </p></td>
<td width="605" valign="top"><p><div class="floatrightgrey">
<p><img src="images/htmlbulletinimages/1008v1" width="325" height="221"> </p>
<p><font size="1" face="Arial, Helvetica, sans-serif"><em>Process operators are expected to be in high demand in the next few years. One study reported that between 2006 and 2020, over 5,000 new plant and facility operators will be needed in the oil sands.</em></font></p>
</div>
<font size="2" face="Arial, Helvetica, sans-serif">One study reported that between 2006 and 2020, over 5,000 new plant
and facility operators will be needed in the oil sands. As construction
of more and more oil sands projects ends and production begins, there
is a change in the kind
of workers most needed. More maintenance trades are needed and less
construction trades workers are needed. Also, companies now need more
operating and technical employees, such as process operators, power
engineers, and instrumentation technicians.<p>A study recently put out by the Government of Alberta (Report on Phase
2 of the Oil Sands Labour Resource Study) found that from 2006 to 2020,
15,000 new employees would be needed for operations and maintenance
in the oil sands industry. The study says there will be a need for
over 5,000 plant and facility operators between 2006 and 2020. This
includes process operators
(noc 9232) and power engineers (noc 7351).
</p><p><div class="floatleft">
<p><img src="images/htmlbulletinimages/1008v2" width="356" height="235">
<em><font size="1"><br>
Over the next few years, more plants and facilities will open up and the
demand for process operators and power engineers will increase. There is
advancement in this industry and even movement between industries.</font></em></p>
</div>
</font>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Opportunities</strong><br>
Recently, there have been over 80 job postings for process operators
and power engineers, so there is great opportunity in Wood Buffalo
for this occupation.
</font><font size="2"> </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“Attrition
is one reason (for the increased need) because a lot of the older
guys are going to be coming to the age of retirement within a
very short time and they will have to be replaced,” says
John Cook, associate dean of technology with Keyano College. “The
other reason is expansion of the existing plants and new plants
starting up.”</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Hazel White,
recruitment advisor with Syncrude Canada Ltd. says they recently
had a large number of process operator
positions
posted online
because of their practice to promote staff within the company.While
this is an entry-level position, most companies require that
their employees have at least a high school diploma and their fourth
class power engineering ticket. For more information on education,
see Schools
on page 4.</font><font face="Arial, Helvetica, sans-serif"> </font> </p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Process operators</strong><br>
There are a few different kinds of process operators: refinery/upgrader
process operator, gas plant operator, and oil and gas pipeline operator,
to name a few. The jobs found in Fort McMurray are generally related
to mineral and hydrocarbon processing in the oil sands industry.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">When
searching for jobs, be aware that there are a number of different
job titles for process operators. Usually, the title of the job
is based on the process the employee is involved with or by the
unit
in which the employee works. See the list on this page for
other common
job titles found recently on Job Bank.<img src="images/htmlbulletinimages/1008v3.png" width="209" height="365" align="right" class="floatrightnocut"></font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Movement between
industries</strong><br>
There are industries other than oil and gas where process operators
can work, such as pulp mills and chemical plants. They may process
different products, but employers will often consider hiring workers
from these other industries.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“We have been successful in taking people that had previously worked
in a paper mill,” says White with Syncrude. “The processes
are certainly different. They’re dealing with paper, rather
than oil, but we recently hired 18 (previous mill workers) and
it’s
my understanding that all 18 have gotten their fourth class tickets
since coming to Syncrude. We still need people with refinery experience,
but it is possible.” </font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Power engineering</strong><br>
Process operators in the Fort McMurray area generally have their
fourth or third class power engineering certificate, which allows
them to
process steam and operate boilers. Other process operators, such
as pulp mill operators, don’t necessarily need this. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">In
order to be called a power engineer, a person must be certified
through the Alberta Boilers Safety Association to operate pressure
equipment (www.absa.ca). </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">There are
four different levels of power engineer—the lowest
is fourth class, going up to first class. For more information
on the Alberta Boilers Safety Association, contact their Fort
McMurray office
at 780-714-3067.</font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Field and control
room operators</strong><br>
There are basically two levels of process operators in Fort McMurray:
field operators and control room operators (or board operators). </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“</font><font size="2" face="Arial, Helvetica, sans-serif">Primarily
when someone is starting out, they’re in the field,” says
Cook. “After a few years they can become a board
operator if they want to do that. They are more experienced
and are
kind of like
the team lead. They tell the field people what needs to
be done and if it needs manual operation, (the field operators)
go out and do it—turning
valves, adjusting an instrument to control temperature,
pressure, flow, or level.”</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Process
operators are responsible for the initial separation processes
or the special treatment
required to ensure that
impurities such
as water and sediments are removed from oil and gas in
the field. Once
separated, the oil or gas is transported by pipeline
to refineries, gas plants or markets.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Some duties
of a process operator are operating equipment to ensure that
the oil meets
specifications before it
goes into
a pipeline.
Some of the equipment could be:<img src="images/htmlbulletinimages/1008v4" width="302" height="201" class="floatrightnocut"></font></p>
<ul>
<li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">dehydration
units</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">vacuum and atmospheric
distillation columns</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">cokers</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">fractionators</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">pumps</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">steam
turbines</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">heat exchangers</font></li>
</ul> <p><font size="2" face="Arial, Helvetica, sans-serif">“A process operator, whether in Fort McMurray, or in a gas plant
in Medicine Hat, basically processes the upstream
oil and gas until it’s
purified enough to go through a pipeline
outside the gates of the plant,” says
Cook. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Co-op education</strong><br>
There are many power engineering programs around northern Alberta
(see below) and some process operating courses. Keyano College
offers co-ops
for both courses and one of the advantages of this program,
besides being in Fort McMurray, is the job placements which
are provided.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“We only take as many students as we can guarantee work placement
spots, and students have to compete for a seat,” says Cook. “We
look at their educational background, their marks and then
there’s
an interview process with Keyano staff and industry people—just
like applying for a job.”</font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Salary and benefits</strong><br>
The pay range for this occupation varies greatly depending
on experience and training, but the range is about $20
to $47 per
hour, but averages
about $30 to $40 per hour. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Because these
positions are for ongoing production and maintenance of oil
sands projects,
employees are expected
to move to
Fort McMurray, regardless of whether they are doing shift
work or
not.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Over the
next few years, there will be many more opportunities for people
wanting to get into a career in process
operating
or power engineering.</font></p></td>
</tr>
</table></td>
</tr>
<tr>
<td width="586"> </td>
</tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="4" bgcolor="FFFFFF">
<tr>
<td height="10" colspan="2" bgcolor="#FFFFFF"><img src="images/darkLine.gif" width="750" height="3"></td>
</tr>
<tr>
<td width="160" height="20" bgcolor="#FFFFFF"><div align="left"><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif">This
website is funded by the Government of Alberta. </font></div>
</td>
<td width="199" align="center" valign="middle" bgcolor="#FFFFFF"><div align="right"><img src="images/GoA - EI 2Color C.PNG" width="170" height="31" border="0"></div>
</tr>
<tr>
<td height="8" colspan="2" bgcolor="#DDCB8F"><table width="760" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="108"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="index.html">Home</a></font></strong></font></strong></font></div>
</td>
<td width="104"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="linksINTRO.html">Links</a></font></strong></font></strong></font></div>
</td>
<td width="117"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="contactUS.html">Contact
Us</a></font></strong></font></strong></font></div>
</td>
<td width="151"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="privacyStatement.html"> Privacy
Statement</a></font></strong></font></div>
</td>
<td width="119"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="disclaimer.html">Disclaimer</a></font></strong></font></div>
</td>
<td width="113"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="siteMAP.html">Site
Map</a></font></strong></font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Hi Nadia thanks for your help in trying to fix the spry menus.
I am new to Dreamweaver and therefore would appreciate a bit more help with the issues you identified.
I did replace the doctype. As for removing the menu from a table and putting it into a div, would you be able to identify in the code below how I would do that? Thanks
Spry Menu Code
</table><ul id="MenuBar1" class="MenuBarHorizontal">
<table width="780" border="0" >
<tr>
<td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
</a>
<ul>
<li><a href="employINTRO.html">Introduction</a></li>
<li><a href="aboutWages.html">Wages</a></li>
<li><a href="employOG.html">Oil & Gas</a></li>
<li><a href="employSERV.html">Service/Retail</a></li>
<li><a href="employCONST.html">Construction</a></li>
<li><a href="employGOVED.html">Gov't/Education</a></li>
<li><a href="employFOREST.html">Forestry</a></li>
<li><a href="employTRANS.html">Transportation</a></li>
<li><a href="employHEALTH.html">Health</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
<ul>
<li><a href="trainINTRO.html">
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
Introduction</a></li>
<li><a href="trainSKILLS.html">General Skills</a></li>
<li><a href="trainSAFE.html">Safety</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
<ul>
<li><a href="aboutINTRO.html">Introduction</a></li>
<li><a href="MediaEvent.html">Coming Events</a></li>
<li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
<li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
<ul>
<li><a href="mediaINTRO.html">Introduction</a></li>
<li><a href="mediaLMN.html">Labour Market News</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
<ul>
<li><a href="linksINTRO.html">Introduction</a></li>
<li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="linksEMPLIntro.html">Employer Websites</a></li>
<li><a href="linksRESIntro.html">Resources</a></li>
<li><a href="linksFACTSIntro.html">Fast Facts</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="privactStatement.html">Privacy Statement</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="siteMAP.html">Site Map</a></li>
</ul>
<ul>
</td>
</tr> </td>
</tr>
</table> -
Still having trouble with Dreamweaver website in Internet Explorer
I had to make some changes and IE (8 & 9) is giving me new fits. This is the URL "http://www.canonguy.net/KehilaLinktest/"
The left menu isn't stacked (links are different lengthsit does an over/under???) & the font sizes are different in right/left sidebars. like it is in Safari/Firefox/Chrome and the
Here are my stylesheets today:
threeColFixHdr.css
@charset "utf-8";
/*.container .blockquote {
background-color: #FAF0E6;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: normal;
text-decoration: underline;
border-left-width: thick;
border-left-style: double;
border-left-color: #666;
margin-left: 25px;
margin-right: 15px;
.content blockquote {
background-color: #FAF0E6;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
border: thin dashed #333;
padding: 10px;
margin-left: 12px;
margin-right: 10px;
/* CSS Document */
body {
/* [disabled]font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; */
background: #42413C;
margin: 0;
padding: 0;
color: #000;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* [disabled]font-size: 1.2em; */
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: .8em;
font-weight: 300;
text-align: center;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
img {
border: 2px solid #000;
.header a:link {
color: #FFF;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
font-weight: 900;
.header a:hover, .header a:active, .header a:focus {
text-decoration: none;
color: #FFF;
font-weight: 400;
.header a:active , .header a:focus {
text-decoration: none;
color: #FFF;
.header a:hover {
text-decoration: blink;
color: #E8E1D1;
a:visited {
color: #6E6C64;
text-decoration: underline;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #00F;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
font-weight: 900;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: blink;
color: #929C53;
/* ~~ This fixed width container surrounds all other divs ~~ */
.container {
width: 1000px;
background: #FFFFFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
font-size: 14pt;
/* ~~ The header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo. ~~ */
.header {
/* [disabled]background: #ADB96E; */
height: 88px;
background-color: #929C53;
color: #FFF;
border-bottom: 1px solid #000;
h3 {
color: #FFF;
.content {
padding: 10px 0;
width: 600px;
float: left;
font-size: 1.0em;
min-height: 600px;
max-height: 3000px;
margin-left: 35px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 170px;
background: #E8E1D1;
font-size: 9pt;
height: 650px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
.sidebar2 {
float: right;
width: 170px;
background: #E8E1D1;
padding: 10px 0;
font-size: 9pt;
height: 650px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
color: #333;
.container .sidebar2 .JewishGen {
font-size: 0.8em;
margin-top: 50px;
margin-left: 10px;
.CenteredHeadings {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 1.1em;
font-weight: 600;
text-align: center;
.sidebar1 a:link {
color: #030;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
font-weight: 900;
.sidebar2 a:link {
color: #333;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
font-weight: 900;
text-align: left;
.container .sidebar2 .searchBox {
margin-bottom: 5px;
border: thin solid #000;
margin-left: 15px;
margin-right: 5px;
background-color: #BEC49F;
margin-top: 25px;
width: 140px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav2 {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav2 li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the anchor block properties so it fills out the whole LI that contains it so that the entire area reacts to a mouse click. */
width: 145px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #BEC49F;
/* [disabled]background-color: #C6D580; */
ul.nav2 a, ul.nav2 a:visited {
padding: 5px 5px 5px 15px;
display: block; /* this gives the anchor block properties so it fills out the whole LI that contains it so that the entire area reacts to a mouse click. */
width: 135px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #BEC49F;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #ADB96E;
color: #FFF;
ul.nav2 a:hover, ul.nav2 a:active, ul.nav2 a:focus {
background: #ADB96E;
color: #FFF;
.nav {
height: 250px;
.nav2 {
height: 250px;
/* ~~ The footer styles ~~ */
.footer {
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
height: inherit;
font-size: .6em;
border-top: 1px solid #000;
.footerCopy {
/* [disabled]padding: 10px; */
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
font-size: 1em;
text-align: left;
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
h1 {
font-size: 200%;
color: #000;
h2 {
font-size: 170%;
color: #000;
h3 {
font-size: 150%;
color: #333;
h4 {
font-size: 130%;
color: #333;
text-align: left;
h5 {
font-size: 120%;
color: #333;
h6 {
font-size: .9%;
color: #333;
.container .smallText {
font-size: 0.75em;
text-align: center;
.container .sidebar2 {
/* [disabled]color: #929C53; */
.Center_caption {
text-align: center;
color: #333;
font-weight: normal;
padding: 0px;
margin-top: 10px;
.container .content .indentContent {
text-align: left;
.container .content h5 {
margin-left: -250px;
/* [disabled]padding-left: 25px; */
.container .content .pageTitle {
font-weight: 900;
color: #333;
margin-left: 50px;
padding-bottom: 25px;
.romania {
font-weight: 900;
color: #906;
spryMenuBarVertical.css
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
padding: 0;
list-style-type: none;
cursor: default;
width: 140px;
background-color: #BEC49F;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
border: 1px solid #fff;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #BEC49F;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-size: 9pt;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #929C53;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #929C53;
color: #FFF;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.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.MenuBarVertical 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
HeaderDivs.css
@charset "utf-8";
/* CSS Document */
.leftSide{
float:left;
.rightSide{
float:right;
BigHeader {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 200%;
font-style: normal;
font-weight: 900;
font-variant: normal;
color: #FFF;
margin-top: 20px;
margin-left: 15px;In this line:
<img style="margin-left:27px;margin-top:30px;" src="images/coat-of-arms.gif" width="100" height="138" alt="Roman's Coat of Arms" /><h4 style="padding-top:25px;padding-bottom:8px;text-align:center;font-weight:800;">
Close the image tag at the end:
<img... ...height:800;" />
You need to go through your <ul> and <li> tags very, very carefully. You have some mismatched elements (missing closing tags) in your huge list.
Here:
<p>
<!-- end .content -->
<!-- InstanceBeginEditable name="EditRegion4" --><!-- InstanceEndEditable -->
<p> </p>
You have missed a closing </p> tag
These input elements need closing like this
<input name="allcountry" value="ALLROMANIA" type="hidden" />
You may have too many closing </div> tags at the end of your page.
Check your site in the validator: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.canonguy.net%2FKehilaLinktest %2F
Fix the problems you can and then revalidate it to see how you are getting on.
Martin
The first thing to focus on is your <ul> an <li> tags that will screw your menu -
Ajax4JSF and Internet Explorer
I have a JSF application with Ajax4jsf and in Firefox it works just fine.
On a certain page an Ajax support tag has to rerender a region (when a radiobutton is clicked). In Firefox this works fine, in Internet Explorer it doesn't. When the rerender has to happen, it takes about 30 seconds before it does. However when you click the region, it immediately rerenders...
Anyone had this problem before?
Thank you!First page is like this:
<table>
<tr>
<td align="left" valign="top">
<a4j:region renderRegionOnly="false">
<h:selectOneRadio id="sendingMethod" layout="pageDirection" value="#{contactMBean.sendingMethod}" >
<f:selectItems value="#{contactMBean.sendingMethods}"/>
<a4j:support action="#{contactMBean.changeSendingMethod}" event="onchange" reRender="addressName,addressStreet,addressPostal,addressCity,addressCountry" ajaxSingle="true"/>
</h:selectOneRadio>
</a4j:region>
</td>
</tr>
<tr>
<td align="left" valign="top">
<blockquote/>
<a4j:outputPanel ajaxRendered="false">
<h:panelGrid columns="2" >
<label for="contactForm:addressName"><h:outputText value="#{Message.contact_sender_name}"/></label>
<h:inputText maxlength="150" required="true" id="addressName" disabled="#{contactMBean.disableAddress}" style="#{contactMBean.sender.nameStyle}" size="40" value="#{contactMBean.sender.name}"/>
<label for="contactForm:addressStreet"><h:outputText value="#{Message.contact_sender_street}"/></label>
<h:inputText maxlength="50" id="addressStreet" disabled="#{contactMBean.disableAddress}" size="40" value="#{contactMBean.sender.street}"/>
<label for="addressPostal"><h:outputText value="#{Message.contact_sender_postalCode}"/></label>
<h:panelGroup>
<h:inputText maxlength="7" disabled="#{contactMBean.disableAddress}" id="addressPostal" size="3" style="#{contactMBean.sender.postalCodeStyle}" value="#{contactMBean.sender.postalCode}" />
<h:outputText escape="false" value=" "/><h:outputText escape="false" value=" "/>
<label for="contactForm:addressCity"><h:outputText value="#{Message.contact_sender_city}"/></label>
<h:outputText escape="false" value=" "/>
<h:inputText maxlength="30" disabled="#{contactMBean.disableAddress}" id="addressCity" size="25" value="#{contactMBean.sender.city}"/>
</h:panelGroup>
<label for="contactForm:addressCountry"><h:outputText value="#{Message.contact_sender_country}"/></label>
<h:inputText maxlength="30" disabled="#{contactMBean.disableAddress}" id="addressCountry" size="40" value="#{contactMBean.sender.country}"/>
</h:panelGrid>
</a4j:outputPanel>
</td>
</tr>
</table>
And the other page is like this:
<table>
<a4j:region selfRendered="false">
<tr>
<td>
<h:outputText value="#{Message.retour_txt_02}" />
<h:outputText style="color: #DD0707" value=" * "/>
<h:message id="messages" for="transportation" style="color: #DD0707"/>
</td>
</tr>
<tr>
<td>
<h:selectOneRadio id="transportation" layout="pageDirection" value="#{retourMBean.transportationMethod}" validator="#{retourMBean.validatePostalAddress}" required="true">
<f:selectItems value="#{retourMBean.transportations}"/>
<a4j:support event="onchange" reRender="address,sign,messages" ajaxSingle="false"/>
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<a4j:outputPanel ajaxRendered="true" >
<h:panelGrid columns="2" id="sign" rendered="#{retourMBean.renderSignselection}">
<h:outputText escape="false" value=" " />
<h:selectOneRadio id="choice" value="#{retourMBean.signingNeeded}" layout="pageDirection" >
<f:selectItem itemLabel="#{Message.sign_option1}" itemValue="true"/>
<f:selectItem itemLabel="#{Message.sign_option2}" itemValue="false"/>
</h:selectOneRadio>
</h:panelGrid>
</a4j:outputPanel>
</td>
</tr>
<tr>
<td align="left" valign="top" >
<a4j:outputPanel ajaxRendered="true" >
<h:panelGrid columns="2" id="address" rendered="#{retourMBean.renderAddress}">
<h:outputText value=" " escape="false" />
<a4j:region renderRegionOnly="false">
<h:selectOneRadio id="sendingMethod" layout="pageDirection" value="#{retourMBean.sendingMethod}">
<f:selectItems value="#{retourMBean.sendingMethods}"/>
<a4j:support action="#{retourMBean.changeSendingMethod}" event="onchange" reRender="addressName,addressStreet,addressPostal,addressCity,addressCountry" ajaxSingle="true"/>
</h:selectOneRadio>
</a4j:region>
<h:outputText escape="false" value=" " />
<h:panelGroup >
<a4j:outputPanel ajaxRendered="false">
<h:panelGrid columns="2" >
<label for="contactForm:addressName"><h:outputText value="#{Message.retour_post_name}" /> </label>
<h:inputText maxlength="150" id="addressName" size="40" disabled="#{retourMBean.disableAddress}" style="#{retourMBean.postalAddress.nameStyle}" value="#{retourMBean.postalAddress.name}"/>
<label for="contactForm:addressStreet"><h:outputText value="#{Message.retour_post_street}" /> </label>
<h:inputText maxlength="50" id="addressStreet" disabled="#{retourMBean.disableAddress}" size="40" style="#{retourMBean.postalAddress.streetStyle}" value="#{retourMBean.postalAddress.street}"/>
<label for="contactForm:addressPostal"><h:outputText value="#{Message.retour_post_postalCode}" /></label>
<h:panelGroup>
<h:inputText maxlength="7" id="addressPostal" disabled="#{retourMBean.disableAddress}" size="3" style="#{retourMBean.postalAddress.postalCodeStyle}" value="#{retourMBean.postalAddress.postalCode}" />
<h:outputText escape="false" value=" "/><h:outputText escape="false" value=" "/>
<label for="contactForm:addressCity"><h:outputText value="#{Message.retour_post_city}" /></label>
<h:outputText escape="false" value=" "/>
<h:inputText maxlength="30" id="addressCity" disabled="#{retourMBean.disableAddress}" size="25" style="#{retourMBean.postalAddress.cityStyle}" value="#{retourMBean.postalAddress.city}"/>
</h:panelGroup>
<label for="contactForm:addressCountry"><h:outputText value="#{Message.retour_post_country}" /></label>
<h:inputText id="addressCountry" maxlength="30" disabled="#{retourMBean.disableAddress}" size="40" value="#{retourMBean.postalAddress.country}"/>
</h:panelGrid>
</a4j:outputPanel>
</h:panelGroup >
</h:panelGrid>
</a4j:outputPanel>
</td>
</tr>
</a4j:region>
</table>
</td> -
My verticle Spry menu will not work in Internet Explorer
I know a lot of people have posted about similar issues, and I've researched multiple "solutions" on multiple forums for something that will work, but nothing has solved the problem so far.
Here is a link to the prototype homepage: http://www.abrasivesales.com/indexnew.html
Everything looks great on my mac when opened in Firefox or Safari, however when opened on Internet Explorer on a PC, the menu ceases to be verticle, instead extending horizontally past the end of the screen. Also, the menu items adopt a white background color, and none of the submenu items will appear when their parent menu item is rolled over.
PLEASE HELP....this issue has kept me from launching the site for a week now, and my superiors are wondering why this problem is taking me longer than it did to build the homepage in the first place, so I'd love to look like less of an idiot.
I assuming this is a CSS issue, so I've posted my CSS code below:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: ;
list-style-type: none;
font-size: 12px;
cursor: default;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
left: 0px;
top: 0px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
margin: 0;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: 0 0 0 100%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
width: 165px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: auto;
#masterContainer #container #sidebar #sideNav2 li ul li {
top: -400px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 2px 3px;
color: #333;
text-decoration: none;
font-family: "Comic Sans MS", cursive;
font-size: 13.5px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #1A6AF4;
color: #FFF;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.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.MenuBarVertical 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
#masterContainer #container #sidebar #sideNav2 {
#masterContainer #container #sidebar li ul li {
background-color: #F4EC9A;
/* 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.MenuBarVertical li.MenuBarItemIE
display: inline;
float: left;I solved one of my own problems. It turns out I still had a setting for width set to "auto" instead of a pixel amount. So now my menu displays normally and my submenus are no longer invisible.
One one tab, "Products", I set the top at -430px, which internet explorer seems to ignore. I'm so close! I'll search for the answer but any help is greatly appreciated.
Maybe you are looking for
-
Data Type, Message Type and Mapping for FTP
Thanks in advance for your replies. As our first production XI scenario, we need to move several (at least 46) files from our SAP instance to a couple of different servers to support our legacy systems. Once all locations are on SAP this requirement
-
Another "2 seconds on 3 off" problem (Hope this is the right place)
It's kinda hard to figure out what goes where around here, so if this is in the wrong spot, feel free to move it - but please tell me WHERE you moved it to. Thanks. The guts: MoBo: MSI P55M-GD45 Processor: Intel I7-860 Memory: 4x2GB Corsair XMS3 Grap
-
Just looking to import bookmarks from one computer to the next.
-
Hi - for whatever reason, I have never been able to get my hands around graphs and their data. Currently I have a parallel loop running, which aquires the present reading from a piece of lab equipment . Obviously this output is not an array, but sing
-
Exchange 2010 EWS and retrieving To and From Addresses
I'm using Microsoft EWS notification streaming to monitor a mailbox for new messages. It is doing exactly what I need it to do except i'm having trouble pulling out the new email addresses from the message for To and From. I'm using Microsoft's sam