asked on

frames problem

I'm trying to create a frames document with three rows, three columns making up the center row.

The center column is the content portion, and the top, left side, right side and bottom are pieces of one Photoshop image and need to fit together exactly. (It looks sort of like a three dimensional box with the center changing according to which button is clicked. The buttons are built into the bottom section of the "box".)

When viewed in IE 4, everything is fine. However, in Netscape 4.6 the elements shift and the right side doesn't line up correctly.

The reason I'm using frames is that I want the "box" to remain inactive and only the middle content area to change with the corresponding link. When I built the site using tables, the reaction was negative because the pages had to disappear with each link.

Make sense to anyone?

Here is the code:

<HTML><HEAD><TITLE>Home Page</TITLE></HEAD>

<FRAMESET ROWS="65,284,*" FRAMEBORDER=No BORDER="0" FRAMESPACING="0" NORESIZE>

<FRAME SRC="top.html" NAME="top" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING=No NORESIZE HEIGHT="65"
WIDTH="675" FRAMESPACING="0">

<FRAMESET COLS="46,573,*" FRAMEBORDER=No BORDER="0" FRAMESPACING="0" NORESIZE>

<FRAME SRC="left.html" NAME="left" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING=No NORESIZE HEIGHT="284"
WIDTH="46">

<FRAME SRC="center.html" NAME="main" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING=No NORESIZE HEIGHT="284"
WIDTH="573">

<FRAME SRC="right.html" NAME="right" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING=No NORESIZE HEIGHT="284"
WIDTH="56" FRAMESPACING="0">

</FRAMESET>

<FRAME SRC="bottom.html" NAME="bottom" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING=No NORESIZE HEIGHT="71"
WIDTH="675" FRAMESPACING="0">

</FRAMESET>
</HTML>

thanks in advance for any advice!

jbirk

Try adding this to the body tag of the frames which need lined up:
marginheight=0 marginwidth=0 topmargin=0 leftmargin=0

-Josh

rockyroad

ASKER

Thanks for the suggestion. I already had the marginheight=0 and marginwidth=0...I added topmargin=0 and leftmargin=0 but still no dice.

Eric - Netminder

Netscape has a tendency to see frames slightly different from IE -- for whatever reason, it isn't quite accurate when it counts pixels. On our site, we found that a screen-wide graphic 131 pixels deep (tall) needed 136 pixels to be seen, which, of course, screwed up the way it looked in IE (because IE wanted to repeat it.

The only thing we found that worked was to pad the graphic so it would be seen correctly by both browsers.

ASKER CERTIFIED SOLUTION

Hardaway

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rockyroad

ASKER

I tried Hardaway's suggestion, and unfortunately it didn't work. I still don't understand why not.

Also, ericpete, I'm being dense, but what do you mean by "pad the graphic"?

Thanks so much for the responses!

Eric - Netminder

We added some space at the bottom (or right side, depending on the frame) of the graphics. In other words, at the top of the page, there's a graphic which was originally 130 pixels tall, in a frame 130 pixels tall, which worked fine in IE, but was chopped off at the bottom in Netscape.

Making the graphic shorter resulted in it being repeated in IE -- you could see the top of it again, which we didn't want.

So we made the frame a little larger, and then added some white to the bottom of it. IE showed the graphic in the frame correctly (with a little white space), while Netscape continued to cut it off, but since it's cutting off the white space at the bottom, you can't tell.

The same was true for the menu box on the left of the page, except we were dealing with the width instead of the height.

The site is http://www.questsys.com.

Hardaway

I found that IE and Netscape is really different in showing frames. I tried to make a page like you today. But I found that in the editor(Dreamweaver) the frames are showing very well. However, after I published to the web, IE shows the frame larger while Netscape shows it smaller. I could not understand why!

At last, I gave up in cutting the page into so much frames. I use table for the layout and a background image to fake the visitor. What I mean is that by using the backgound image to "cut" the page into two or more parts, rather than adjusting the frame width and height.

I know that it might not be your solution, but it works for me.

Hardaway

rockyroad

ASKER

I've also created my layout using tables, which really does work better in terms of how the browsers show the page. However, it doesn't work with the design. There is supposed to be a stationary "frame" with buttons built into the bottom, and only the inside of the frame is supposed to change with each button click. When I did this in frames, the whole page had to reload, so it kind of blinked. That wasn't what they wanted. I'm still trying to find the answer.

rockyroad

ASKER

Oops, what I meant to say was, when I made the layout in tables, the whole page had to reload, thus blinking.

Hardaway

Yes, I understand.

However, the real situation is that IE and Netscape displaying frame pages in their own way. Thus, you cannot have a all-the-best solution.

In my point of view, I would suggest to change the design rather than playing with these browsers.

Eric - Netminder

*grin*... It's also a great argument for avoiding frames...

rockyroad

ASKER

Unfortunately, it's not my design (or I certainly would change it) and my boss is rather stubbornly determined to have it this way . . . so I am exploring the possibilities of DHTML. I'm thinking that maybe I can put the content on hidden layers and use Javascript to call up the layers as needed. Of course, I'm probably opening up a whole nother browser can of worms, but from my perspective, it just has to look good in NS 4.6 and IE 4.

Anyway, I'm just gonna close this question with my gratitude to Hardaway and ericpete for their help.

PS. Let me know if I'm heading in the wrong direction by trying layers, please.