Javascript behaves different in different browsers

To help me learn javascript I have set myself some challenges.
one of which is to create a script which automatically centers an object vertically.
objects can be set horizontally by using margin-left:auto + margin-right:auto; in css, but the same does not work for vertical positioning.
My goal is to get a cross browser compliant script which keeps the object centered as soothly as the css solution does
anyway here is my script so far.
<body>
<div id="sam" style="height:100px; width:100px; background-color:green; margin-left:auto; margin-right:auto;"></div>
<script>
function kkk() {
var wh = window.innerHeight;
var wh = wh/2;
var oh = window.document.getElementById('sam').scrollHeight;
var oh = parseFloat(oh);
var oh = oh/2;
window.document.getElementById('sam').textContent = wh;
window.document.getElementById('sam').style.marginTop = wh + "px";
window.document.getElementById('sam').style.backgroundColor = "yellow";
window.setInterval('kkk()',1);
</script>
</body>
firefox, safari and chrome work fine
Opera works but when the window is resized and the vertical position is changed the movement is jumpy not smooth.  (horizonal re-centering is still smooth)
IE does not work at all
so can anyone tell me how to make IE work and how to correct the problem with opera.

that solution only works if a container has a fixed size (ether px or %)
my code works on containers which do not have a fixed size
so if a div is full of text and the user increases the text size the divs height will increase but it will stay centered.
obviously it also works for any situation in whicht he size cannot be fixed, say because the divs conent is provided by a CMS system.

Similar Messages

  • OAF pages in different browsers--problem

    Does the page behave differently on different browsers? For instance,we have a page that loads fine in mozilla, but in IE lay out goes awry. Do we have any special setting to do?
    Kindly reply asap

    Check the reply in thread Clock in OAF page
    Please elaborate, what exactly is the issue? What do you mean by "but in IE lay out goes awry"?
    --Shiv                                                                                                                                                                                                                                                                                                                                                                                                                       

  • Running Web Dynpro Applications in Different Browsers

    Hi,
    I runned an Web Dynpro Application in different browsers(Opera, Firefox and Internet Explorer). The problem is that in Firefox is running fine, but in Internet Explorer some controls are missing and in Opera I got an Error Page that say the following:
    An error has occurred:
    "Failed to process the request."
    Please contact your system administrator.
    This page was created by SAP NetWeaver. All rights reserved.
    Web Dynpro client:
    Nokia Series 80 Client
    Web Dynpro client capabilities:
    User agent: Opera/9.25 (Windows NT 6.0; U; en), client type: op6, client type profile: op6, ActiveX: disabled, Cookies: enabled, Frames: enabled, Java applets: disabled, JavaScript: enabled, Tables: enabled, VB Script: enabled
    Accessibility mode: false
    Web Dynpro runtime:
    Vendor: SAP, build ID: 7.0013.20070717142021.0000 (release=645_VAL_REL, buildtime=2007-08-11:15:13:14[UTC], changelist=455669, host=pwdfm101), build date: Wed Nov 14 08:48:35 GMT-03:00 2007
    Web Dynpro code generators of DC agile.com/pmg_bonefish~webdynpro:
    SapDictionaryGenerationCore: 7.0013.20061002105236.0000 (release=645_VAL_REL, buildtime=2007-08-11:14:57:42[UTC], changelist=419377, host=PWDFM101.wdf.sap.corp)
    SapMetamodelWebDynpro: 7.0013.20070703112649.0000 (release=645_VAL_REL, buildtime=2007-08-11:15:00:50[UTC], changelist=454024, host=PWDFM101.wdf.sap.corp)
    SapMetamodelCore: 7.0013.20061002105432.0000 (release=645_VAL_REL, buildtime=2007-08-11:14:45:23[UTC], changelist=419384, host=PWDFM101.wdf.sap.corp)
    SapWebDynproGenerationTemplates: 7.0013.20070717142021.0000 (release=645_VAL_REL, buildtime=2007-08-11:15:15:27[UTC], changelist=455669, host=pwdfm101)
    SapWebDynproGenerationCTemplates: 7.0013.20070717142021.0000 (release=645_VAL_REL, buildtime=2007-08-11:15:15:27[UTC], changelist=455669, host=pwdfm101)
    SapGenerationFrameworkCore: 7.0013.20060719095755.0000 (release=645_VAL_REL, buildtime=2007-08-11:14:44:42[UTC], changelist=411255, host=PWDFM101.wdf.sap.corp)
    SapIdeWebDynproCheckLayer: 7.0013.20061002110128.0000 (release=645_VAL_REL, buildtime=2007-08-11:15:04:26[UTC], changelist=419396, host=PWDFM101.wdf.sap.corp)
    SapMetamodelDictionary: 7.0013.20060719095619.0000 (release=645_VAL_REL, buildtime=2007-08-11:14:54:53[UTC], changelist=411251, host=PWDFM101.wdf.sap.corp)
    SapMetamodelCommon: 7.0013.20061002105432.0000 (release=645_VAL_REL, buildtime=2007-08-11:14:45:30[UTC], changelist=419384, host=PWDFM101.wdf.sap.corp)
    SapWebDynproGenerationCore: 7.0013.20061002110128.0000 (release=645_VAL_REL, buildtime=2007-08-11:15:04:37[UTC], changelist=419396, host=PWDFM101.wdf.sap.corp)
    SapDictionaryGenerationTemplates: 7.0013.20061002105236.0000 (release=645_VAL_REL, buildtime=2007-08-11:14:57:50[UTC], changelist=419377, host=PWDFM101.wdf.sap.corp)
    Web Dynpro code generators of DC sap.com/tcwddispwda: No information available!
    Web Dynpro code generators of DC sap.com/cafUIptn~common:
    SapDictionaryGenerationCore: 7.0013.20061002105236.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:26:06[UTC], changelist=419377, host=PWDFM101.wdf.sap.corp)
    SapMetamodelWebDynpro: 7.0013.20070703112649.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:28:49[UTC], changelist=454024, host=PWDFM101.wdf.sap.corp)
    SapMetamodelCore: 7.0013.20061002105432.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:14:35[UTC], changelist=419384, host=PWDFM101.wdf.sap.corp)
    SapWebDynproGenerationTemplates: 7.0013.20070717142021.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:42:07[UTC], changelist=455669, host=pwdfm101)
    SapWebDynproGenerationCTemplates: 7.0013.20070717142021.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:42:07[UTC], changelist=455669, host=pwdfm101)
    SapGenerationFrameworkCore: 7.0013.20060719095755.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:13:54[UTC], changelist=411255, host=PWDFM101.wdf.sap.corp)
    SapIdeWebDynproCheckLayer: 7.0013.20061002110128.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:32:11[UTC], changelist=419396, host=PWDFM101.wdf.sap.corp)
    SapMetamodelDictionary: 7.0013.20060719095619.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:23:29[UTC], changelist=411251, host=PWDFM101.wdf.sap.corp)
    SapMetamodelCommon: 7.0013.20061002105432.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:14:42[UTC], changelist=419384, host=PWDFM101.wdf.sap.corp)
    SapWebDynproGenerationCore: 7.0013.20061002110128.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:32:21[UTC], changelist=419396, host=PWDFM101.wdf.sap.corp)
    SapDictionaryGenerationTemplates: 7.0013.20061002105236.0000 (release=645_VAL_REL, buildtime=2007-08-07:13:26:13[UTC], changelist=419377, host=PWDFM101.wdf.sap.corp)
    Web Dynpro code generators of DC sap.com/tcwdcorecomp: No information available!
    J2EE Engine:
    7.00   patchlevel 109044.44
    Java VM:
    Java HotSpot(TM) Server VM, version: 1.4.2_09-b05, vendor: Sun Microsystems Inc.
    Operating system:
    Windows 2003, version: 5.2, architecture: x86
    I don´t know is the problem I have in both browsers Internet Explorer and Opera are from the browser or from the layout I´m using in Web Dynpro.
    regards

    Hi Aida,
    For getting an information of the Web Browsers supported by SAP NetWeaver, check out the following link:
    [http://service.sap.com/pam|http://service.sap.com/pam]
    To access the Product Availability Matrix (PAM), you will need a sUser Login Name.
    For Reference,
    http://help.sap.com/saphelp_nw04s/helpdata/en/79/23c7410400c717e10000000a155106/frameset.htm
    Regards,
    Alka.

  • Unable to view external webcam content.  I'm using IE11 with Windows 7 64 bit.  I've tried deactivating Activex control, tried different browsers etc, tweeked the tools for trusted sites etc, but am totally stuck. I know the cams are working as i can view

    Unable to view external webcam content.  I'm using IE11 with Windows 7 64 bit.  I've tried deactivating Activex control, tried different browsers etc, tweeked the tools for trusted sites etc, but am totally stuck. I know the cams are working as i can view them on mobile phone via puffin browser.  I can play Youtube videos etc just fine. So why not the webcam?

    First, confirm that ActiveX Filtering is configured to allow Flash content:
    https://forums.adobe.com/thread/867968
    Internet Explorer 11 introduces a number of changes both to how the browser identifies itself to remote web servers, and to how it processes JavaScript intended to target behaviors specific to Internet Explorer. Unfortunately, this means that content on some sites will be broken until the content provider changes their site to conform to the new development approach required by modern versions of IE.
    You can try to work around these issues by using Compatibility View:
    http://windows.microsoft.com/en-us/internet-explorer/use-compatibility-view#ie=ie-11
    If that is too inconvenient, using Google Chrome may be a preferable alternative.

  • HTML Tag formatting is behaving differently in CC than CS6?

    Why is HTML Tag formatting is behaving differently in CC than it did in CS6, even though the settings are set the same?!??!
    I've double-checked the tag settings - they are absolutely the same between both versions, but when I use APPLY formatting to a page in CC, it completely mangles the tags formatting on ANY html file...
    What's going on?  Any way to get CC to act properly like it does in CS6??

    Can you provide code examples of what you mean by mangled?
    It could be that your code contains errors which DW is attempting to reconcile. 
    CSS - http://jigsaw.w3.org/css-validator/
    HTML - http://validator.w3.org/
    JavaScript - http://www.jslint.com/
    PHP -  http://phpcodechecker.com/
    Or perhaps your code format is not set-up the same in both apps.  Edit >  Tag Libraries.
    Nancy O.

  • CSS problem with content in different browsers?

    I've been revamping the CSS for a website and got most internal pages to display normally on different browsers. However, the site entry page is driving me nuts. I think I've been staring at the code so long that I've overlooked an obvious error. In Firefox, the paragraph of intro text lines up nicely to the right of the navigation panel. In Google Chrome (and IE of course), it pops down underneath the nav panel as shown in screen capture below. Even if I zoom out. Included a link so you can see it in real time. (Since the revamp is recent, the style sheet isn't pretty.)
    http://www.keithpurtell.com/kthings/index.htm

    Sorry for the slow reply. Thanksgiving and family in town and all that. No I didn't fix or change anything. And I'll make sure the percentage match in the morning. It's after midnight here.

  • Issue with images in different browsers

    Having an issue with different browsers -- hoped someone
    could help.
    If I open my site with IE, everything looks as it does in
    Dreamweaver -- there is no overlap of text and images/etc.
    If I open my site with Mozilla or Safari, it seems to
    arbitrarily move up some of the images over the top of text. Not
    all of the images, mind you -- just a few random ones throughout
    the page.
    Opening the following link in both type of browsers may give
    you a clue as to what is going on. What can I do to get it to look
    like it does in IE?
    http://www.centecsystems.com/centecexample/disanapplications.htm

    LOL ahem, 'scuze me. :-)
    -N
    "Walt F. Schaefer" <[email protected]> wrote in
    message
    news:[email protected]...
    > >>For that we rely on IE hacks
    >
    > In polite company we call those "conditional comments".
    > --
    >
    > Walt
    >
    >
    > "Nancy O" <[email protected]> wrote in
    message
    > news:[email protected]...
    > > First off, you are assuming incorrectly that IE is
    the good browser and
    > > Mozilla is the bad browser. Actually, it's the
    other way around. If
    you
    > > build your sites to perform well in Mozilla,
    chances are your sites will
    > > look good in all major browsers except IE. For that
    we rely on IE hacks
    > > or
    > > workarounds.
    > >
    > > Learning html and CSS takes time and effort but
    it's very doable. You
    > > would
    > > be doing yourself a big favor by learning to work
    with code now. Design
    > > view is fine for some things, like typing content
    and adding a few
    images.
    > > But eventually you have to pop the hood to check
    the oil. If hiring a
    pro
    > > isn't an option, I suggest you purchase a solid
    template to work with.
    > > Money well-spent IMHO.
    > >
    http://www.projectseven.com/products/templates/
    > >
    > >
    > >
    > > --Nancy O.
    > > Alt-Web Design & Publishing
    > > www.alt-web.com
    > >
    > >
    > >
    > >
    > > "PunIntended" <[email protected]>
    wrote in message
    > > news:[email protected]...
    > >> Unfortunately, hiring someone is not an option
    for my friend -- the
    > > recession
    > >> has hit them hard -- etc.etc. I'm doing it as a
    favor.
    > >>
    > >> One additional question -- Why are only some of
    the image files moved
    > > when
    > >> viewing in mozilla? I dont understand how
    Dreamweaver arbitrarily
    > >> chooses
    > >> which are moved and which are not.
    > >>
    > >> Also, is laying out your site in 'design' mode
    simply a bad idea? It
    > > seems
    > >> like it looks / works fine with IE, and the
    majority of the layers are
    > > correct
    > >> in mozilla -- it just doesn't deal well with a
    few of the images.
    > >>
    > >> Thank you again for all your comments - - like
    I said, am sort of a
    > > beginner
    > >> -- just looking for the best method to fix the
    problem. If the best
    > > method is
    > >> explaing to the graphic designers their
    'vision' can't be accomplished,
    > >> so
    > > be
    > >> it. I just want to know how to go about
    attacking the browser
    > > compatibility.
    > >>
    > >
    > >
    >
    >

  • I can't install ADE on my PC, because as I try to open it a message of error appears to me: The application will be closed. I've already try with different browsers and also with the manual installation, but nothing..

    I can't install ADE on my PC, because as I try to open it a message of error appears to me: The application will be closed. I've already try with different browsers and also with the manual installation, but nothing..

    1
    Close all iWork applications
    2
    Uninstall Keynote; this must be done with an application remover tool to delete the installation properly. Appcleaner is known to work correctly for this purpose, it is free and can be downloaded from here: Appcleaner Download
    3
    empty the trash
    4
    shutdown the Mac and restart. After the start up chime, hold down the shift key until the apple logo appears
    let the Mac complete the start up procedure completely, it will take longer than usual as the hard drive is being repaired
    5
    Reinstall Keynote by logging into the Mac App Store using download / install

  • Download Issues With Different Browsers

    I'm using a simple, simple download example app to fetch a
    file from a tomcat server. It seems to work fine on Mozilla
    fireFox, but when I use it with safari or opera I get the following
    error;
    quote:
    Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File
    I/O Error.
    at
    flexDownloadExample/init()[/Applications/apache-tomcat-5.5.1/webapps/flexDownloadExample/ src/flexDownloadExample.mxml:40]
    at
    flexDownloadExample/___flexDownloadExample_Application1_creationComplete()[/Applications/ apache-tomcat-5.5.1/webapps/flexDownloadExample/src/flexDownloadExample.mxml:2]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at
    mx.core::UIComponent/dispatchEvent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\co re\UIComponent.as:9051]
    at mx.core::UIComponent/set
    initialized()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:1167]
    at
    mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:698]
    at Function/
    http://adobe.com/AS3/2006/builtin::apply()
    at
    mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\sr c\mx\core\UIComponent.as:8460]
    at
    mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src \mx\core\UIComponent.as:8403]
    I have absolutely no idea why this is. I havent been able to
    test this in internet explorer, but i'm guessing it will show the
    same error. My question then is, why is it that the code below
    works for one browser and not for another?

    Font Rendering
    Every browser and operating system and browser and operating sytem version (just about) renders text differently. Chrome on Windows is currently the worst at rendering text, since it's using an old Windows API which uses an outdated anti-aliasing algorithm for the text. So text in Chrome on Windows generally looks worse that text drawn in other browser or on other operating systems. Typekit has a 7 part blog post here <http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/> about all the ins and outs of font display in different browsers and operating systems.
    Scroll Effects
    Scroll effects are measured from the top of the browser window. Thus when the height of the browser window differs, even on the same computer, where the top of the browser window is relative to your objects when the page is scrolled all the way to the bottom will differ. Without the URL for your site/page, this is only a guess, but I suspect this is what you're encountering.
    Several customers have asked for an option to set the key position as a distance from the bottom of the browser window rather than always being from the top in order to create items that have a specific final location when a page is scrolled all the way to the bottom, but Muse doesn't currently have that feature.

  • How do I make my animation look the same in different browsers?

    Hi!
    When I play my animation in different browsers it don't look the same as in the preview. In IE some of the parts of the animation have disappeared and in Chrome the pats are no longer in their right places. See picture below. 
    How do I do to make the animations look the same in different browsers?
    (In the end I want to use the animations in my captivate 8 project. )
    BR,
    M

    Ah, found the issue, the problem is with the name of the two images,
         genomförande    (instead you can use genomforande)
         Grå bakgrund     (instead you can use grabakgrund)
    Seems like IE is having issue with those special characters.
    hth,
    Vivekuma

  • Trying to download iTunes on my husband's windows vista laptop and we keep getting error messages that say error z, apple application support was not found, windows error 2. Tried 2 different browsers and it still would not work. Can you help? Thank you.

    Trying to download iTunes on my husband' s windows vista laptop. Have tried 2 different browsers and it almost finishes the download process and we get error messages that say "error z, apple application was not found, windows error 2" Can you help? Thank you.

    See Troubleshooting issues with iTunes for Windows updates.
    tt2

  • Text in tables shifting in different browsers...

    I have set up a page using tables.
    In the middle of the page are 4 images pulled in and lined up
    horizontally separated by table cells (for some space).
    The tables immediately underneath the photos are for adding
    text.
    I center aligned the text and am controlling only the font
    style (no colors, sizes, etc) from a separate external CSS file.
    The first line of text is "paragraph" format, the second line
    of text is bigger/different color and in "heading 1" format, the
    third chunk of text is "paragraph" format also (it's an actual
    paragraph).
    When I view this page in the 4 main web browsers, this text
    shifts up and down. In other words, all 4 photos underneath
    descriptions are not aligned nicely horizontally. The tables are
    perfectly aligned, so why is the text moving vertically inside when
    previewed?
    Here's a link to my site:
    http://student.ccbcmd.edu/~rsmit459/playingthedrums/index.html
    View it in different browsers and watch the copy under the
    photos shift vertically (not lined up across the page).

    *bump*

  • HT1338 I am trying to register my Appliances and when I try to click on "Save" or "Submit" I am unable on my MacBook pro. I have tried different browsers yet still same problem.  Can anyone shed some light on this please.

    I am trying to register my Appliances and when I try to click on "Save" or "Submit" I am unable on my MacBook pro. I have tried different browsers yet still same problem.  Can anyone shed some light on this please.

    Thanks for that 'sberman' - because my iPhone is backed-up to my work computer (only at this stage) I have had to call our IT Department in Adleaide. (4 times this morning). The last guy managed to get the phone into 'DFU Mode' - no more recovery mode screen - (kind of 'asleep' perhaps) from my understanding of same. I am awaiting a call again from IT so they can get my computer to actually recognise my iPhone on the C Drive. This also happened to  one of my colleagues in Newman (WA). She got so frustrated with the whole process that she bought another phone the next time she was in 'civilisation.' She hasn't had any problems since. (Cross fingers).
    Thanks again, Sandra2474.

  • The same code behaving different in two files.

    The same code behaving different in two files.
    in pro*c file it is returning rows
    in sql file it is not returning any rows.
    please suggest me.
    regards,
    prasad.

    please find the code.
    sql_stmt := 'SELECT rNum, dpcCode, sID, hDate, fBlock, '||
    'lBlock, recQty, fID, fName, ' ||
    'tSeqNo, sType, tDate, fStatCode, pDate, recCount, r ' ||
    'FROM (SELECT rownum rNum, DPC_CODE_ORIG dpcCode, ' ||
    'SENSOR_ID sID, ' ||
    'to_char(HEADER_DATE, ''YYYYMMDDHH24MISS'') hDate, ' ||
    'FIRST_BLOCK_NUMBER fBlock, ' ||
    'LAST_BLOCK_NUMBER lBlock, ' ||
    'RECORD_QUANTITY recQty, ' ||
    'FILE_ID fID, ' ||
    'substr(FILE_NAME,1,30) fName, ' ||
    'TRACE_SEQUENCE_NO tSeqNo, ' ||
    'SENSOR_TYPE sType, ' ||
    'to_char(TRAILER_DATE, ''YYYYMMDDHH24MISS'') tdate, ' ||
    'NVL(FILE_STATUS_CODE, ''NL'') fStatCode, ' ||
    'to_char(PROCESSED_DATE, ''YYYYMMDDHH24MISS'') pDate, '||
    'NVL(RECIRCULATE_COUNT,0) recCount, ' ||
    'ROW_NUMBER() ' ||
    'OVER(ORDER BY TRAILER_DATE DESC, LAST_BLOCK_NUMBER DESC) r ' ||
    'FROM logfc10t ' ||
    'WHERE DPC_CODE_ORIG = :IN_DPC_CODE ' ||
    'AND SENSOR_ID = :IN_SENSOR_ID ' ||
    'AND (((TRAILER_DATE <= TO_DATE(:IN_TRAILER_DATE, ''YYYYMMDDHH24MISS''))' ||
    ' AND (LAST_BLOCK_NUMBER < :IN_BLOCK_NUMBER)) ' ||
    ' OR (TRAILER_DATE < TO_DATE(:IN_TRAILER_DATE, ''YYYYMMDDHH24MISS'')))) ' ||
    'WHERE r = 1 ';

  • Navbar problems in different browsers

    Please help! I designed a navbar using a preformatted Dreamweaver template, but found that it displays differently in different browsers. The file can be found at
    http://www.npc.org/NPC909/links.html
    It displays fine in Opera and Safari (both Mac), but in Netscape and Firefox (both Mac) the navbar is bumped onto a second line. In IE (Mac) the navbar is on one line, but the dropdown submenus do not display.
    On the PC side, in IE 8 the navbar is vertically stacked while the two submenus display on the far left of the navbar, instead of directly below their parent links. In IE 7 the submenus don't line up with their parent links, and there is a thin black line on the right of the navbar. Again, Safari displays just fine.
    Our target audience is most likely to be a PC user with IE as their browser, but any suggestions you can provide to make the navbar and submenus display consistently across all browsers would be greatly appreciated.
    Thanks,
    Arthur

    Hi, Arthur,
    I don't notice that you put an id on the li for "orderpub" like this:
    <ul class="MenuBarHorizontal" id="MenuBar1">
           <li><a class="MenuBarHorizontal" href="index.html" style="text-decoration: none;">Home</a></li>
           <li><a href="background.html" style="text-decoration: none;">About NPC</a></li>
           <li><a href="#" class="MenuBarHorizontal MenuBarItemSubmenu">Members</a>
             <ul>
               <li><a href="membynam.html" style="text-decoration: none;">By Name</a></li>
               <li><a href="membycom.html" style="text-decoration: none;">By Organization</a></li>
               <li><a href="membycat.html" style="text-decoration: none;">By Category</a></li>
             </ul>
           </li>
           <li><a class="MenuBarItemSubmenu" href="reportsbydoc.html" style="text-decoration: none;">Reports</a>
             <ul>
               <li><a href="reportsbyyear.html" style="text-decoration: none;">Reports By Year</a></li>
               <li><a href="emergency.html" style="text-decoration: none;">Emergency<br/>
               Planning & Preparation</a></li>
               <li><a href="energyoutlook.html" style="text-decoration: none;">Energy Outlook</a></li>
               <li><a href="environissues.html" style="text-decoration: none;">Environmental Issues</a></li>
               <li><a href="natgas.html" style="text-decoration: none;">Natural Gas</a></li>
               <li><a href="refining.html" style="text-decoration: none;">Refining</a></li>
               <li><a href="research.html" style="text-decoration: none;">Research</a></li>
    <li><a href="resourcedev.html" style="text-decoration: none;">Resource Development</a></li>
    <li><a href="storage.html" style="text-decoration: none;">Storage</a></li>
               <li><a href="stratpetrolres.html" style="text-decoration: none;">Strategic<br/>
                 Petroleum<br/>
               Reserve</a></li>
    <li><a href="transport.html" style="text-decoration: none;">Transportation</a></li>
             </ul>
           </li>
           <li id="orderpub"><a style="text-decoration: none;" href="orderpub.html">Order Publications</a></li>
           <li><a href="links.html" style="text-decoration: none;">Links</a></li>
           <li class="MenuBarHorizontal"><a href="contactus.html" style="text-decoration: none;">Contact Us</a></li>
         </ul>
    In your CSS file, all you need to do is:
    /* 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: center;
        cursor: default;
        float: left;
        text-indent: 0px;
        width: 9.25em; /* make this slightly narrower */
    li#orderpub {
        width: 9.54em; /* make this as wide as it needs to be, adjusting the previous rule as needed also */
    You don't actually need all that other coding for
    #home {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        cursor: default;
        width: 10%;
    #aboutnpc {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        cursor: default;
        width: 15%;
    #members {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        cursor: default;
        width: 15%;
    #reports {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        width: 15%;
    #orderpub {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        cursor: default;
        width: 20%;
    #links {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        cursor: default;
        width: 10%;
    #contactus {
        font-size: 100%;
        background: #039;
        text-align: center;
        text-indent: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        list-style: none;
        position: relative;
        cursor: default;
        width: 15%;
    which I would restyle as the following, in case you did want them:
    li#home, li#aboutnpc, li#members,li#reports, li#orderpub, li#links, li#contactus {
           font-size: 100%;
         background: #039;
         text-align: center;
         text-indent: 0px;
         margin: 0px;
         padding: 0px;
         float: left;
         list-style: none;
         position: relative;
         cursor: default;
    li#home {width: 10%;}
    li#aboutnpc {width: 15%;}
    li#members {width: 15%;}
    li#reports {width: 15%;}
    li#orderpub {width: 20%;}
    li#links {width: 10%;}
    li#contactus {width: 15%;}
    Applying those ids to the html, we get:
    <ul class="MenuBarHorizontal" id="MenuBar1">
           <li id="home"><a class="MenuBarHorizontal" href="index.html" style="text-decoration: none;">Home</a></li>
           <li id="aboutnpc"><a href="background.html" style="text-decoration: none;">About NPC</a></li>
           <li id="members"><a href="#" class="MenuBarHorizontal MenuBarItemSubmenu">Members</a>
             <ul>
               <li><a href="membynam.html" style="text-decoration: none;">By Name</a></li>
               <li><a href="membycom.html" style="text-decoration: none;">By Organization</a></li>
               <li><a href="membycat.html" style="text-decoration: none;">By Category</a></li>
             </ul>
           </li>
           <li id=reports"><a class="MenuBarItemSubmenu" href="reportsbydoc.html" style="text-decoration: none;">Reports</a>
             <ul>
               <li><a href="reportsbyyear.html" style="text-decoration: none;">Reports By Year</a></li>
               <li><a href="emergency.html" style="text-decoration: none;">Emergency<br/>
               Planning & Preparation</a></li>
               <li><a href="energyoutlook.html" style="text-decoration: none;">Energy Outlook</a></li>
               <li><a href="environissues.html" style="text-decoration: none;">Environmental Issues</a></li>
               <li><a href="natgas.html" style="text-decoration: none;">Natural Gas</a></li>
               <li><a href="refining.html" style="text-decoration: none;">Refining</a></li>
               <li><a href="research.html" style="text-decoration: none;">Research</a></li>
    <li><a href="resourcedev.html" style="text-decoration: none;">Resource Development</a></li>
    <li><a href="storage.html" style="text-decoration: none;">Storage</a></li>
               <li><a href="stratpetrolres.html" style="text-decoration: none;">Strategic<br/>
                 Petroleum<br/>
               Reserve</a></li>
    <li><a href="transport.html" style="text-decoration: none;">Transportation</a></li>
             </ul>
           </li>
           <li id="orderpub"><a href="orderpub.html" style="text-decoration: none;" class="">Order Publications</a></li>
           <li id="links"><a href="links.html" style="text-decoration: none;">Links</a></li>
           <li id="contactus" class="MenuBarHorizontal"><a href="contactus.html" style="text-decoration: none;">Contact Us</a></li>
         </ul>
    Note that each main head li has an id now.
    Beth

Maybe you are looking for