Menu offset diffrently on IE then on Firefox

Poster: bigredmb
Dated: Saturday June 23 2007 - 23:12:07 BST

Due to a new page layout, the menu now goes over part of a "news ticker". I know about the "Flash" file issue with IE, but that is not the question here. When using IE (ver 7), the menu is not lining up with the gap in the scrolling text. When using Firefox, it looks fine. Here is a link to the page on the site where I am having a problem
http://www.soudertonbigred.org/Band2007/News_Info.html

Any thoughts?

Poster: Ruth
Dated: Sunday June 24 2007 - 0:00:36 BST

Hi,

I'm sorry but I don't have IE 7. Is it possible to do a screenshot showing the difference. I can probably figure out what's causing it. I would guess it is going to be something in css, that is usually the issue when layouts are different between IE and FF. With a screenshot I can look at the css and probably find what is causing it.

Ruth

Poster: bigredmb
Dated: Sunday June 24 2007 - 1:34:42 BST

Sure. I have captures for both Firefox and IE7. How do I send them?

Poster: bigredmb
Dated: Sunday June 24 2007 - 1:50:42 BST

I have posted both pictures on the following page:

http://www.soudertonbigred.org/Band2007/test.html

Poster: Ruth
Dated: Sunday June 24 2007 - 4:15:23 BST

Hi,

The problem is how you have the menu called inside that div. It seems, looking at the div that you want it to be absolutely and always at left 28px and top 51 px. You then have the menu set to be absolutely positioned at top=10, left=10 so I'm assuming that means you want it to sit 10px inside left and top of that div. Well, that is causing your problem, I believe. You do not need to position the menu inside that div, just position it absolutely itself.

Remove the calls and place them either in the head or 1st thing after the body tag, set your top as top=61 and left=38. That will put it in that position always.

As soon as it did that, when I opened it in IE 5.5 and 6 it looked just like your screenshot of FF, submenu opening right next to the Menu item and shifted up like it is in the screen shot.

Ruth

Poster: bigredmb
Dated: Monday June 25 2007 - 20:40:32 BST

Thank you Ruth.

Just to be clear, in the DIV where the menu is called here is what i have now:
STYLE=" position:absolute; top:51px; left:28px; width:109px; height:74px; z-index:31;">

Your saying I should remove top:51px; left:28px; ?

Thank you...
Larry

Poster: Ruth
Dated: Tuesday June 26 2007 - 2:56:20 BST

Hi,

No, what you've done is put the calls for the menu inside a div and also set the menu position to top=10 left=10. So, I think, you think that if you put the calls for the menu in the div that is where it will be and given the top and left, I assumed you wanted it in the div but 10px from the top side, and 10px from the left side.

So, what I'm saying is, remove the calls from the div. Change your top and left in the main menu to be top=61; left=38; in the menu, not in the div. Then put the calls for the menu right after the body tag, not inside the div. That can cause problems in some browsers.

What you need to do is either position it relatively using the correct method to do that, or positioning absolutely with top and left inside the menu, in the main menu.

Here's a link to how to put a menu in a table, this also applies to divs. You can't do it the way you have, if that's what you are trying to do

http://support.milonic.com/beginners/ta ... /index.htm

Ruth

Poster: Ruth
Dated: Saturday June 30 2007 - 4:22:59 BST

Hi,

Were you able to resolve this or do you need some more help?

Ruth