Footer moves in different browsers

I'm having a problem with my footer wrapper moving to the
right of the content. It's happening on the site I'm working on now
http://www.jesseyoung.com/jesse_new/services.html),
but has also happned on a number of other sites in the past.
Sometimes I've done some clunky work-arounds to fix the
problem, but I'd like to find out why this keeps happening. In this
case the footer wrapper jumps up to the right of the content when
using FF and also IE8. I realize that in this case it may be
because of the Accordian, but it's happened on pages without.
Suggestions?
-Jesse

JesseLY wrote:
> I'm having a problem with my footer wrapper moving to
the right of the content.
> It's happening on the site I'm working on now
> (
http://www.jesseyoung.com/jesse_new/services.html),
but has also happned on a
> number of other sites in the past.
>
> Sometimes I've done some clunky work-arounds to fix the
problem, but I'd like
> to find out why this keeps happening. In this case the
footer wrapper jumps up
> to the right of the content when using FF and also IE8.
I realize that in this
> case it may be because of the Accordian, but it's
happened on pages without.
>
> Suggestions?
>
> -Jesse
>
>
Hi,
Try clear:both; on your footerWrapper div.
HTH
chin chin
Sinclair

Similar Messages

AP Div "Moves" in Different Browsers

(The site in question is at www.yankee-lake.org) In a
template file, I have a layout table, within the first cell of
which is a jpg image as my page banner. I want a flash movie to
"float" above the jpg banner, and appear to be framed by the jpg
image. I used an AP div to contain the flash movie. If I position
the AP Div so that the movie is positioned correctly in Internet
Explorer, then it does not display properly in FireFox, Safari,
Opera, Camino, Chrome. Conversely, if I position the AP Div to
display properly in the other browsers, then the movie is not in
the proper position when viewed in Internet Explorer.
I think that the problem is that Internet Explorer uses a
different amount of space between left and top edges of the
viewport and the first elements of the web page, than the other
browsers. And, since the AP div is absolutely positioned within the
viewport, I get this anomalous behavior. But, I don't know how to
fix it.
If I use relative positioning, then I don't know how to
"layer" the movie to float above the banner graphic.
Thanks in advance for any assistance you can provide.
Brad

The AP Div is not moving. It's the rest of your content that
is moving.
Add this to your CSS -
body { margin:0; padding:0; }
and then locate the Flash div as desired.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"LinkDoctor" <[email protected]> wrote in
message
news:gd89tv$lqu$[email protected]..
> (The site in question is at www.yankee-lake.org) In a
template file, I
> have a
> layout table, within the first cell of which is a jpg
image as my page
> banner.
> I want a flash movie to "float" above the jpg banner,
and appear to be
> framed
> by the jpg image. I used an AP div to contain the flash
movie. If I
> position
> the AP Div so that the movie is positioned correctly in
Internet Explorer,
> then
> it does not display properly in FireFox, Safari, Opera,
Camino, Chrome.
> Conversely, if I position the AP Div to display properly
in the other
> browsers,
> then the movie is not in the proper position when viewed
in Internet
> Explorer.
>
> I think that the problem is that Internet Explorer uses
a different amount
> of
> space between left and top edges of the viewport and the
first elements of
> the
> web page, than the other browsers. And, since the AP div
is absolutely
> positioned within the viewport, I get this anomalous
behavior. But, I
> don't
> know how to fix it.
>
> If I use relative positioning, then I don't know how to
"layer" the movie
> to
> float above the banner graphic.
>
> Thanks in advance for any assistance you can provide.
>
> Brad
>

HTML Snippets move around in different browsers

I added an HTML Snippet (Skype button) and a Google map to a web site designed with iWeb. Both of these items move up or down in different browsers (Safari, Firefox, Internet Explorer). Is there any way to lock the position of these widgets, so they don't move? The page with these problems can be found at: http://www.follow-your-nose.com/fyn/Contact.html

I have the same trouble, the strange thing is that out of 3 pages it works fine on 1, on the other 2 pages the HTML snippet moves up or down depending on the browser type.
So why does it work on this 1 page ?
Another problem I have is that links to recommend another site sometimes format themselves. I make them White Pink Grey, so in iWeb they work fine, but when published some of them suddenly being back to the original colors.
Another problem I have is that some Amazon Ads do not work in the HTML snippets, why the **** is that ?
iWeb *****, all that work for this not satisfying result.
thanks for any help you might give me....
the main concerned site is www.hongkong-experience.net you can see the problems on the what to do page, here the snippet moves as well as on the same page in german, it the french version it doesnt ??
http://www.hongkong-experience.net/Whatto_see_and_do_in_HongKong.html
http://www.hongkong-experience.net/Wastun_und_sehen_in_HongKong.html
http://www.hongkong-experience.net/Quoifaire_et_voir_a_HongKong.html
and here the links color themselves http://www.hongkong-experience.net/Bienvenuesur_notre_Guide_de_Voyage_de_HongKong.html
thanks again for any feedback which might help me.
Tom

Quicktime movie looks different in different browsers. Is there a fix?

I have an H.264 Quicktime movie (and will be making versions with the Sorenson Video 3 codec, WMV compatible files, and FLV as well), and it looks the way I want it to look in Firefox for Mac and Firefox for Vista. In Safari and Internet Explorer, the blacks are washed out and it looks less saturated (though this is probably due to the image being washed out).
Is there anything I can do? I know Safari reads color profiles now, but I don't know how to add that to a Quicktime movie, and that wouldn't fix the problem with IE (or, curiously, Firefox on XP). If I drop the blacks enough to make it look good in Safari and IE, it will be too dark for Firefox users. Firefox appears to be the one displaying it "properly" (how it looks in FCP and the stand-alone Quicktime player).

It is indeed tricky. I've spent a lot of time over the last few months trying to figure it all out and still can't wrap my head around it all. That's due in large part because there's a lot of misinformation out there.
Thanks for the article. It's interesting because I too set my monitor to 2.2 gamma (sRGB) but for the purpose of working on this project had reverted it to 1.8 (Cinema Display default), and it's been there for a long time now. It is interesting, but it didn't solve my problem.
My problem is different browsers show a Quicktime differently. Now that I've switched to 2.2, Firefox looks too dark and Safari looks just right (where as before Firefox looked just right and Safari was washed out). Is there or is there not an option to include a color profile with Quicktimes? If not, I'll have to make a compromise, and I'd rather have one that looks great across all high-end monitors (meaning an expensive Dell or Apple monitor on OSX, WXP, and WV).
Does anyone know what in particular is making the two browsers display Quicktimes differently?

Flash movie acts differently on different browsers

hi
i have created an online calendar, you can see it on
this
link
this application uses php as well which is called through the
actionscript
it works fine on firefox browsers, and some versions of IE,
the version i have is explorer 7 (which i really dont like), and it
doesnt work well at all. dont know if it works on safari or other
browsers, i havent checked it out yet
(the main problem is trying to write more than one message,
it isnt displayed on the messageboard on IE)
does anyone have an idea what the problem could be?
also if someone sees any problems on different browsers i
would like to know
thanks

"and it doesnt work well at all."
Is there sometime more specific to describe what is the
problem?

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.
> >>
> >
> >
>
>

How come my links layout go all over the place in different browsers?

Hello,
Please go to <http://www.peterdanko.com/errr.png> and see the screen shot of the page I am having difficulty with in the design view. Note the links: INSTALLATIONS, BELT COLORS, FINISHING, PRICING are neatly centered with the text body above and in a single line.
Now view <http://www.peterdanko.com/atmos.html> Note they are now stacked and randomly placed. In different browsers they are all over the place.
How can I keep them neat and tidy in all browsers?
Thanks
PETER

Below is the complete html code/css re-written for the 'product-wrapper' section. (scroll down). Not sure if this is of help or not. I think you need to take some time to learn some more html/css as the way youre going about it at the moment must be a complete nightmare for you. Copy the code below, (scroll down) paste into a new Dreamweaver document and save to your site folder. View in browser.
You need to simplify your way of working instead of creating a <div> for each of your page elements, which must be a headache to keep track of???
Example: Instead of putting your header 'Atmos Seating Group' in it's own individual <div> use a more meaningfull html tag like a header tag, <h2>Atmos Seating Group</h2>
Then use some css to target the <h2>. We know the <h2> tag is in the 'right_tx_bx_400pxWd' <div> so write it as below:
right_tx_bx_400pxWd h2 {
text-align: center;
margin: 15px 0;
font-size: 20px;
font-weight: normal;
color: #999;
Similarly instead of inserting the main wording in its own <div> use a paragraph tag, <p></p> it's more meaningful. Then target the paragraph tag:
#right_tx_bx_400pxWd p {
font-size: 13px;
line-height: 16px;
color: #999;
Get the point. We only have to keep track of one <div> not several and we can target tags in that <div> more cleanly and effectively.
Try and keep all off your css together i.e. so all the 'right_tx_bx_400pxWd' css is kept together so its easy to find in the stylesheet intead of scrolling up and down.
Don't use heights on <divs> unless you know how high it will be and you won't know that unless it just contains images or you set a specific height for a scroll bar.
BELOW IS THE CODE:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#product_wrapper {
width: 932px;
margin: 0 auto;
overflow: hidden;
#left_image_column {
float: left;
width: 512px;
#right_tx_bx_400pxWd {
float: left;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;
display: inline;
#right_tx_bx_400pxWd h2 {
text-align: center;
margin: 15px 0;
font-size: 20px;
font-weight: normal;
color: #999;
#right_tx_bx_400pxWd p {
font-size: 13px;
line-height: 16px;
color: #999;
#right_tx_bx_400pxWd h3 {
text-align: center;
margin: 15px 0 10px 0;
padding: 0;
font-size: 14px;
font-weight: normal;
color: #999;
#right_tx_bx_400pxWd ul {
margin: 0;
padding: 0;
text-align: center;
#right_tx_bx_400pxWd li {
text-align: center;
font-size: 13px;
margin: 0 0 3px 0;
font-style: italic;
color: #CCC;
/* footer links */
#four_text_link_box {
clear: both;
width: 400px;
padding: 20px 0 0 0;
#four_text_link_box ul {
margin: 0;
padding: 0;
#four_text_link_box li {
margin: 0;
padding: 0;
float: left;
list-style: none;
text-align: center;
#right_tx_bx_400pxWd #four_text_link_box a {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999;
text-decoration: underline;
display: block;
width: 100px;
text-align: center;
font-style: normal;
/* end footer links */
</style>
</head>
<body>
<div id="product_wrapper">
<div id="left_image_column"><img src="atmos_images/atmos_lounge_blk_belt.jpg" alt="Atmos lounge" name="at_lounge" width="512" height="400" id="at_lounge" /></div>
<div id="right_tx_bx_400pxWd">
<h2>Atmos Seating Group</h2>
<p>The Atmos chairs are the essence of OMG design. They are comfortable. They evolve the Shaker esthetic of spare/elegant utility into the eco-modernist sensibility: The straps are post industrially sourced automotive seat belt material, the “ears” at the top of the backs acknowledge our natural world, and though strong, its lightweight structure uses minimal material. The contrasting splines on the rocker and lounge chairs celebrate craftsmanship. Wood is American Ash sourced from FSC certified forests; adhesives and finishes are water based. Suitable for residential and designed for contract applications.</p>
<h3>OMG characteristics:</h3>
<ul>
<li>use of post-industrial belting as substitute for the more problematic use of foam as cushion material fabric</li>
<li>low carbon footprint.</li>
<li>ply-bent construction</li>
<li>evokes the enchantment of an eco centric style</li>
</ul>
<div id="four_text_link_box">
<ul>
<li><a href="at_installs.html">Installations</a></li>
<li><a href="#" onclick="MM_openBrWindow('images/belt_samples.gif','belts','scrollbar s=yes,resizable=yes,width=300,height=100')">Belt Colors</a></li>
<li><a href="#" onclick="MM_openBrWindow('images/wood_finishes.gif','finishes','scrol lbars=yes,resizable=yes,width=600,height=175')">Finishes</a></li>
<li><a href="#" onclick="MM_openBrWindow('_danko_2010pricelist/at_prices.gif','','scr ollbars=yes,resizable=yes,width=400,height=500')">Pricing</a></li>
</ul>
</div>
</div>
<div id="bottom_rule">
      <p> </p>
      <p> </p>
    </div>
    <div id="product_box"></div>
</div>
</body>
</html>.

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.

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.

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

Footer moves in different browsers

Similar Messages

Maybe you are looking for