Jump to content

Menu Position Differences With Ie And Firefox


denglund1996

Recommended Posts

I do design and site maintenance for a non-profit site (Kingdom Warriors). :cool2:

 

Our site uses a java script menu system (an old version of HM). I couldn't figure out how to code the menu position *within* a table row on the page, so I used the position attributes within the jave script array (HM_Arrays.js) file:

 

150, // menu_width

10, // left_position

82.5, // top_position

 

This seems to be working fine with Internet Explorer. But when you view the same pages in Mozilla Firefox the menu is out of place (lower and a bit right). :oops:

 

Does anyone know why the two browsers behave differently with respect to this positioning? Is there some kind of work-around or hack that would correct this? :blink:

 

Or, is there a better way of positioning a java script menu altogether? :eek:

 

Thanks!

Link to comment
Share on other sites

I think the offset and vertical borders in Firefox actually look better. But I feel your pain anyway. I would agree with Bruce, start looking into CSS. It's not that tough to learn and you get absolute control.

 

Offhand, did you notice that you don't see the top and bottom borders of the page in Firefox but you do in IE?

 

-Tim

Link to comment
Share on other sites

I think the offset and vertical borders in Firefox actually look better. But I feel your pain anyway. I would agree with Bruce, start looking into CSS. It's not that tough to learn and you get absolute control.

 

You like the offset look? Well, Tim, there's no accounting for differences in taste I guess... ;) ;)

 

Offhand, did you notice that you don't see the top and bottom borders of the page in Firefox but you do in IE?

 

-Tim

Well, I noticed the top one was missing. Thought I wasn't seeing it because of the muliple tabs I had opened in Firefox. Never got around to checking in a full single window. Strange. :huh:

A new browser bug I'll have to tame :whip:

If anyone comes up with an answer please drop me a line.

Link to comment
Share on other sites

denglund1996, I am bot very good with Javascript but I am sure I could create a CSS version that does what your menu is currently doing. If you like

the code is relatively simple to incorperate, I noticed that your pages are php pages so just including the Nav.php where you want it to be placed should not be too difficult at all

pop me a message if you would like to see a working css version

 

Robert

Link to comment
Share on other sites

  • 2 weeks later...

I too like my javascript menu, and ran into this error. Luckily I was able to find a way around this. :P Basically this tests whether or note your browser uses a netscape engine (or something like that?) and depending on if it does or doesn't, it'll position itself accordingly. Here you go:

 

>if(navigator.appName == "Netscape")
  {150, // menu_width
  10, // left_position
  82.5, // top_position}
else
  {150, // menu_width
  10, // left_position
  82.5, // top_position}

 

Firefox falls under the first set of numbers, under netscape. Change those numbers to where it looks well in firefox. The second set of numbers is for every other browser. Change that to something that looks well in IE or whichever browser you are using. :)

 

If you want to be more specific, you can change the "else" to "else if {}" for multiple browsers, and then do the else {} for anything that doesn't fit in the if's or else if's. I'm sorry but I'm not sure where a list of browser types is available, but I'm sure you can find one on the internet or experiment yourself. :)

 

Hope this helps!

Link to comment
Share on other sites

The attribute “topmargin="9" (on your body element) is invalid for the doctype declared. Your XHTML doctype triggers “strict mode” rendering in Gecko browsers (Mozilla, FireFox, & Netscape), and these browsers will generally ignore invalid attributes in “strict mode.” A quick fix would be remove the topmargin attribute from your body tag, and use CSS instead:

>body {
background-color: #2E0042;
margin-top: 9px;
padding-top: 0;
}

The latest flavor of Opera will not display the menu at all; a CSS version would be preferable.

 

HTH,

Carol

Link to comment
Share on other sites

When you guys say css version, is it possible to create dropdown menus from css? Or are you just talking about a:hover/etc... where you get a slight visual from the menu?

Link to comment
Share on other sites

Since we're on the topic of css and such...can somebody answer a quick question? I'me making this site:

 

http://biology.talonz.com/

 

As you can see, on the body where the content go, there is a margin at the top of it? I can't figure out what's causing this and how to turn it off. :\ It's xhtml/php by the way...

 

Also, is there any way to adjust cell spacing by means of css?

 

Edit: It seems that by taking off the paragraph tags from the first paragraph, it fixes the problem. I've never noticed that before... Bah... I don't want to do that though. *thinks*

Edited by Daniel Slatkin
Link to comment
Share on other sites

welcome to the forums Daniel Slatkin

as far as you wanting to make changes to your website

which gap are you refering to the one at the top of your page or the one between

you header image and the naviation menu ?

Also if you really wanted to make this a CSS layout how about a 2 column css layout instead of tables one that fits your current design

 

here is an example

2 column layout

 

let me know If I can help you I would be more than willing to assist..

RobertM

Link to comment
Share on other sites

Thanks for your help Robert, I changed it but the problem was that the <p> tag was giving me trouble. It was repositioning my text about 5px below the top the data cell. Once I took the <p> out, then it'd just back up to it's proper spot. So for now I'm just using <br>'s. Might be easier later anyways when I plan to turn this into a php-managed site. :)

 

I am not trying to make this a full css website to say. :) I am not that good but this website I need something I have a solid understanding of. ^^ I'm trying to incorporate the css into it so it'll be quicker to edit the colors and such. I'm saving a site like that for another time.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...