Solved

frames problem

Posted on 2000-02-21
12
212 Views
Last Modified: 2010-04-09
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!
0
Comment
Question by:rockyroad
  • 5
  • 3
  • 3
  • +1
12 Comments
 
LVL 8

Expert Comment

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

-Josh
0
 

Author Comment

by:rockyroad
ID: 2546636
Thanks for the suggestion. I already had the marginheight=0 and marginwidth=0...I added topmargin=0 and leftmargin=0 but still no dice.
0
 
LVL 15

Expert Comment

by:ericpete
ID: 2546789
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.
0
 
LVL 1

Accepted Solution

by:
Hardaway earned 100 total points
ID: 2546818
The problem should be caused by the center part of your frameset statement.

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

You have specified a "*" for the right frame at the center part. It means that you want the browser to expand it if the screen resolution it larger than expected. However, in the frame statement of right.html,

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

You have specified a fixed width ("56") for it. Therefore, the difference between IE and Netscape came out. IE will override your fixed frame width to make you feel comfortable. However, Netscape is not in this case, it could not override the width in this way. That's why the right frame in Netscape go to the wrong way.

I would suggest you to remove the width tag in the frame statement for right.html.

Hardaway
0
 

Author Comment

by:rockyroad
ID: 2546927
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!
0
 
LVL 15

Expert Comment

by:ericpete
ID: 2547030
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.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Expert Comment

by:Hardaway
ID: 2550983
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
0
 

Author Comment

by:rockyroad
ID: 2554914
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.
0
 

Author Comment

by:rockyroad
ID: 2554930
Oops, what I meant to say was, when I made the layout in tables, the whole page had to reload, thus blinking.
0
 
LVL 1

Expert Comment

by:Hardaway
ID: 2558606
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.
0
 
LVL 15

Expert Comment

by:ericpete
ID: 2558630
*grin*... It's also a great argument for avoiding frames...
0
 

Author Comment

by:rockyroad
ID: 2558740
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.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now