RC9 and Safari/IE/NS

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:13

RC9 and Safari/IE/NS

Poster: John
Dated: Tuesday September 9 2003 - 23:48:13 BST

I'll play 'other side of the fence' today...

Just noticed a new test site I've been working on at http://www.west.asu.edu/sa/testsite/sl1.htm has a problem. The small menu in the upper left should butt up exactly flush with the photo just above it. In everything I've tried except those below it does just that. Safari sticks it about 10-15px below the photo. Looking at it in XP Pro/IE6 from work (home sick today - poor me

) shows everything just the way I want it

IE Mac 5.2.3 has the same placement problem, and also leaves a 'ghost' image of the menu behind when you scroll back up the page from the bottom.

NS7.1 has the same gap but does not leave a ghost menu.

Poster: Hergio
Dated: Wednesday September 10 2003 - 3:43:47 BST

Actually John, i am using IE6 and XP Pro and the menu is about 3 to 4 pxs under then picture. There is a slight white bar between the photo and the menu. Not sure why since you said its supposed to be flush and you did it on your computer.

Its interesting that those browsers are screwing up. As you know already, your followscroll attribute seems fine. Maybe maz is the resident expert on scrolling since shes had so much "fun" playing with scrolling! :lol:

Poster: John
Dated: Wednesday September 10 2003 - 4:47:04 BST

That's really goofy, Dave. At work, with the same setup as yours, it's dead on. This is where it gets to be not fun...

Poster: Maz
Dated: Wednesday September 10 2003 - 8:54:22 BST

You have the source in the body and menu in the head, thats original, doesn't that mean the source is below the menu?

Guess what, I just login in on the laptop, and its perfect.
I'll have to check on the mac, BTW, I'm amazed at high speed modem cables for $3.99 wizzzz I'm reaching maximum speed.

I had the same problem with my menu, the laptop was overlapping, whilst the mac was perfect. I made more space on the mac to prevent it from overlapping. I'll have another look, my menu is in a table without relative position. So is neither in or out of the table for sure.

I haven't decided what to do with page layout, if it was in the table it could be width 20% then 80%, now I have to use a fixed width and it still overlaps because there is nothing in the table.
BRB...

Okay, there is a much greater difference than mine ever was. It must be partially due to the javascript image.

Mine appears to be okay now, if you want to try this.

Place the menu script from in the header into a table.
In the menu file, remove position=relative, include top= distance from top of browser.

That should work
maz

Poster: John
Dated: Wednesday September 10 2003 - 15:29:20 BST

maz wrote:

You have the source in the body and menu in the head, thats original, doesn't that mean the source is below the menu?

You been drinkin' that strange tea again, hon? _src.js is the first line in the body, and _data.js is in the <td>. There's nothing in the head that has to do with the menu.

maz wrote:

Okay, there is a much greater difference than mine ever was. It must be partially due to the javascript image.

What JS image?

maz wrote:

Place the menu script from in the header into a table.
In the menu file, remove position=relative, include top= distance from top of browser.

Again, nothing in the <head>, and data is already in the table. position="relative"; is not in the script (well, it is, but it's commented out (//), and top=213; is already there.

Funny thing is, it's still perfect here on my work XP Pro/IE6. Also tried it on a Win2K/IE6 with the proper results.

However - NS7.1 shows the gap. What I just noticed is the height of the gold background at the top of the page (with the ASUW logo and search box) is taller in NS7.1 than it is in IE6, and, of course, it's taller by the same amount as the gap. Now I've got to figure out why a simple table is being read differently by the different browsers.

Poster: Maz
Dated: Wednesday September 10 2003 - 20:53:10 BST

You caught me just about to fall asleep, so I misread the source, and assumed the graphic was java.

Good that you located the problem.

I have one table, no margin, border or spacing above mine and it sits correct in 2 browsers now.

Regards
maz

Poster: John
Dated: Wednesday September 10 2003 - 21:09:23 BST

Located, yes - fixed, no.

Will send you what I just sent to Dave.

Poster: Tom
Dated: Thursday September 11 2003 - 16:31:19 BST

Quote:

Funny thing is, it's still perfect here on my work XP Pro/IE6. Also tried it on a Win2K/IE6 with the proper results.

However - NS7.1 shows the gap. What I just noticed is the height of the gold background at the top of the page (with the ASUW logo and search box) is taller in NS7.1 than it is in IE6, and, of course, it's taller by the same amount as the gap. Now I've got to figure out why a simple table is being read differently by the different browsers.

John,

I took a look at you page from various browsers (NS 4.8, NS 7.02 & IE 6.02 - all PC-based). I was able to replicate the problem in regards to the header height on NS 7.02, but it was NS 4.80 that clued me in:

Code:

<BODY>

Try the following:

Code:

<BODY topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

This has been a problem with NS for quite awhile. IE "fudges" and assumes that the margins are meant to be edge-to-edge. NS is a bit more particular. My tests showed that it actually increased the gap between the above image and the menu in NS 7.02, but it did get rid of the overlap. While this appears to make the problem only worse, it may help lead the way to a solution.

Hope this helps.

Regards,

Tom

Poster: John
Dated: Thursday September 11 2003 - 16:46:41 BST

Hi Tom -

Appreciate your taking the time to look at this.

Actually, all those values are set in the CSS - just double-checked to make sure. Unfortunately it's not just NS with the problem - all the current Mac browsers, NS7.1/Win, and even some folks here with exactly the same combo I'm using (XP Pro/IE6). Removing the <form>...</form> (search box, either as an include or straight code) fixes the problem!

Poster: Maz
Dated: Thursday September 11 2003 - 17:23:08 BST

I wondered about the page margin, since it only appeared on my computer, decided it was in css.

So it was the form, couldn't you handle it in css?
How about a url to double check?

All the best
maz

Poster: John
Dated: Thursday September 11 2003 - 18:04:28 BST

URL in the first message, darlin'.

It's still not fixed - I just know what the problem is, not the cure. A plain-jane form shouldn't cause all this trouble, and it's really annoying :evil:

Poster: Maz
Dated: Friday September 12 2003 - 0:07:45 BST

Put it in a menu that'll FIX it

maz

My server is moving to a new home, they must be setting up email now.

Poster: Hergio
Dated: Friday September 12 2003 - 14:06:40 BST

I think I got it! A long time ago I was having alightment problems and figured out that the form object itself has margins and padding (did you know that?) So either in your css or in the <FORM> tag itself, set the margins and padding to zero...this should shore up the problem. Its worked for me and I had no idea form objects spaced themselves slightly away from other things.

<FORM style="padding:0px; margin:0px;"></FORM>

Poster: John
Dated: Friday September 12 2003 - 17:30:42 BST

Dave, that definitely hit the proverbial nail :!:

Thank you.

The top element went from 209 to 182! That's a huge pad around the form tag.

However, the browsers are still fighting over exact display, as follows...

On Mac -
Safari - right on
NS7.1 - 1px gap
IE5.2.3 - 2px gap

On Win2K -
IE6 - the menu overlays the picture by about 5px or so
I don't have NS on my home machine any more.

Obviously there's still a rendering difference in the browsers. Tom suggested...

Code:

<BODY topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

I already had everything except marginwidth="0" marginheight="0" in the CSS. When those 2 items were added the page completely tore apart in NS, so they had to go.

Not sure where to go from here, but it's definitely a heck of a lot better.

Now if Andy can fix the sub menu problem (scroll to various points on http://www.west.asu.edu/sa/testsite/sl1.htm and pop the sub and see the differences).

Poster: Maz
Dated: Friday September 12 2003 - 23:39:26 BST

This is the mac IE 5.1.7
approx. 3px space
Is the pixel difference in Student life table?

When I mouse over it sharply jumps down then up, the submenu opens with scrollbar, or without, if I can catch it. My guess is I cannot handle the image change.

I'm changing my menu again.
Warm regards,
maz

Poster: John
Dated: Saturday September 13 2003 - 22:17:53 BST

Hi hon -

Andy is still working on a problem related to what I'm trying to do (scrollable sub-menu from a scrolling main-menu). Hopefully, if he hasn't gone fishin', something soon.

The space is between the bottom of the random photos in the upper left and the top of the menu. They should just touch - no gap, no overlap.

Thanks for looking at it.

Poster: Maz
Dated: Sunday September 14 2003 - 0:36:16 BST

I was playing around with followscroll 1,20,10 it raced up and down the page but constantly dithered a fraction when it got there.

I added onmouseover background at the bottom of the page, when I mouseover the menu starts moving.

The link's below if you want to see.

maz
...in the pool to cool off.

Poster: John
Dated: Sunday September 14 2003 - 3:50:04 BST

Your Disease scroller seems to be working, but you have exactly the same problems I do with your Member Area. Once the main menu scrolls off the top the sub goes nuts.

Poster: Maz
Dated: Sunday September 14 2003 - 6:54:34 BST

John,
Did you try relative bound table?
I had no luck with it, menu wouldn't move. My thinking is that's the way it should work.

One thing that was very frustrating again is horizontal center or right goes off left with no browser scroll, only left is safe.

Disease has to use scroll, member area is shorter, it doesn't like scroll when it doesn't need it?

maz

Poster: John
Dated: Monday September 15 2003 - 14:55:41 BST

maz wrote:

Disease has to use scroll, member area is shorter, it doesn't like scroll when it doesn't need it?

I'm just confused why, in the same menu, one of your scrolling subs is working correctly and the other is not.

According to Andy, it's a feature "still being worked on", or something like that.

RC10 and Safari/IE/NS

Poster: John
Dated: Tuesday September 16 2003 - 17:34:20 BST

Thanks to Dave I got the top margin almost the same across browsers (rendering problem now, not a menu problem). Also stopped the followscroll until Andy can get a handle on that bug. I did manage to get a nice 1px gap (now desired, rather than the flush mode) between the photos and the menu consistent across browsers.

http://www.west.asu.edu/sa/testsite/sl1.htm

This is now RC10.

That's one-in-a-row...

Industrial Strength JavaScript and DHTML Menus

RC9 and Safari/IE/NS

RC10 and Safari/IE/NS