Solved

Image continues in different frame

Posted on 2000-03-18
26
155 Views
Last Modified: 2010-04-09
I have a two frame frameset split vertically. I want a logo image to look as if it spans from one frame to the other. I cut the complete logo in two parts. I placed one part in the left and the other in the right frame (using the img tag, no background pic).
Now there's a gap between the two parts of the logo. I set every possible frame option to zero (border=0 frameborder=0 framespacing=0 scrolling=no noresize marginwidth=0 marginheight=0).
Thanks to bgillbanks tip I reduced the gap to approx. 1px in Netscape, but in IE 5 it's still 2-3px.

The syntax of the complete frameset:

<frameset cols="210,*" border=0 frameborder=0 framespacing=0>
   <frameset rows="150,*,100" border=0 frameborder=0 framespacing=0>
    <frame src="_logo.htm" name="logo" bordercolor=#99ccff frameborder=0 scrolling=no noresize  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
------------------------// here's the left part of the logo located //
    <frame ...>
    <frame ...>
   </frameset>
   <frameset rows="100%,*,*,*" border=0 frameborder=0 framespacing=0>
     <frameset rows="70,30,30,*,25" border=0 frameborder=0 framespacing=0>
      <frame src="hk0.htm" name="hkat" bordercolor=#99ccff frameborder=0 scrolling=no noresize  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
------------------------// here's the right part of the logo located //
      <frame ...>
      <frame ...>
      <frame ...>
      <frame ...>
     </frameset>
     <frame ...>
     <frame ...>
     <frame ...>
   </frameset>
</frameset>

The code is part of a javascript-driven webshop. I've never seem so many frames on a single web page ;)

You can have a look on the site at http://www.tvtoday-webshop.de/start.htm.

Is it possibly to make the parts fit smoothly without this annoying gap?

0
Comment
Question by:Maldoror
  • 12
  • 5
  • 4
  • +2
26 Comments
 
LVL 9

Expert Comment

by:TTom
Comment Utility
I had heard that this was possible, but I have no confirmation of that.  As far as I was aware, there was a problem (with Netscape) in trying to do this.

You MIGHT try putting the pieces of the logo into layers, making sure there is no space around them, and positioning the layers absolutely in your frames.

Again, I am just making a guess.

It would be nice if others here would support/confirm/amplify on it or reject it.  I don't have any experience with it.

Tom
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 
LVL 3

Expert Comment

by:bgillbanks
Comment Utility
How have you added the image to the frame. Is it a background image or an <IMG SRC=.....> tag.

If you are using the img src tag then you should try changing stuff in the body so that the margins for each of the pages are 0.

The body tag should then look roughly like this

<BODY bgColor="whatever colour" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

this will make all of the images, tables and text on the page butt right up to the edge.

Hope this helps
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 
LVL 3

Expert Comment

by:hagur
Comment Utility
Hello,

I'm familiar with the problem you're experiencing.  I had this problem with a homepage I created for the company I work for.  I managed to fix it in IE 4.0
and 5.0, but there still is a minor bug in Netscape.
I know why it occurs, but I haven't bothered yet to fix it.

Netscape is very sensitive about framesets.
FRAMESET COLS="147,*"  in Netscape
would actually be "150,*"
because Netscape only takes 5,10,15 ...
145,150 etc.

So if you want your image to split seamlessly across frames in Netscape, you must split the frames according to what I mentioned above. If you have
SET COLS="153,*", then Netscape will round it up to 155, therefore creating a gap of 2 pixels wide.

If you wan't to take a look at the page I created, the address is http://www.hugbun.is
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 
LVL 9

Expert Comment

by:TTom
Comment Utility
You might try adding "topmargin=0" and "leftmargin=0" into the code for your frames (in addition to "marginwidth=0" and "marginheight=0").  Could be a browser thing.

Tom
0
 
LVL 3

Expert Comment

by:bgillbanks
Comment Utility
I said that already TTom:-)
0
 
LVL 9

Expert Comment

by:TTom
Comment Utility
Sorry!  Missed your comment above.  Don't know what I was thinking of.  I hate when that happens (to me), so I should be careful of doing it (to others).

Tom (:-{
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 

Author Comment

by:Maldoror
Comment Utility
Adjusted points from 100 to 200
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:Maldoror
Comment Utility
Thanks for your support, folks!
I still have a minor gap in NS 4.71, but it's still as big in IE 5 as in the beginning of my changes...
I still haven't looked at the source of your page yet, Hagur!
I'll increase the points for that problem because I have to find a solution asap :)

Thanks again!
0
 
LVL 3

Expert Comment

by:hagur
Comment Utility
Something else to think of ...

What size are the images you want to span across frames?
Are the exactly as wide as the frame they're in?

If they're not exactly as wide, and not correctly aligned, there will be a gap ...

Just a thought ...
0
 
LVL 3

Expert Comment

by:bgillbanks
Comment Utility
If you add the code that I mentioned before into the frameset then it may help. I know you can do it but have never tried so it should do something.

Post a message if it works as I would be interested to know
0
 

Author Comment

by:Maldoror
Comment Utility
Edited text of question.
0
 

Author Comment

by:Maldoror
Comment Utility
You can have a look at the site - still including the gap :(- at http://www.tvtoday-webshop.de. Unfortunately, none of the hints you gave me helped getting rid of the gap. Maybe someone finds the clue looking at the webpage. Thanks in advance!
0
 
LVL 3

Expert Comment

by:bgillbanks
Comment Utility
It looks ok on my work computer (old version of netscape). I shall try it on a newer version of netscape and Internet explorer at lunch time but I think it is ok.

The link you gave in your last comment did not have a frameset, but the link at the top of the page was fine (I think).

Perhaps the problem is with the way your browser is set up (maybe...)

I'll carry on thinking about it.:-)
0
 
LVL 3

Expert Comment

by:hagur
Comment Utility
I think I've found the problem ...
this code is a snippet from http://www.tvtoday-webshop.de/start.htm
According to the code below, you declare the frame with a width of 205.
However, the image logo_01.gif is only
200 pixels wide, therefore creating a cap of 5px.  Try changing the frame width to 200.

**********************
<frameset cols="205,*" border="0" frameborder="0" framespacing="0">
            <frameset rows="100,*,100" border="0" frameborder="0" framespacing="0">
                  <frame src="_logo.htm" name="logo" scrolling="no" noresize marginwidth="0" marginheight="0">
                  <frame src="_korb.htm" name="korbfram" noresize marginwidth="0" marginheight="0">
                  <frame src="_summe.htm" name="summe" scrolling="no" noresize marginwidth="0" marginheight="0">
            </frameset>
            <frameset rows="100%,*,*,*" border="0" frameborder="0" framespacing="0">
                  <frameset rows="75,30,30 ,*,25" border="0" frameborder="0" framespacing="0">
                        <frame src="hk0.htm" name="hkat" scrolling="no" noresize marginwidth="0" marginheight="0">
********************************
0
 

Author Comment

by:Maldoror
Comment Utility
Thanks, billbanks, hagur!
I tried all values for the left frame from 200 to 205. 200 works with IE but NS keeps cutting the left part of the logo when I reduce the frame width under 205. I'll play around with it, though...
0
 
LVL 3

Expert Comment

by:hagur
Comment Utility
Okay, then keep using 205 as a frame width.  Instead you can put the image in the frame which is 205 width inside a table.

Try this table below the body tag, instead of the href/image tag you've got now:

tx=tx+'<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" ALIGN="right">'
tx=tx+'<TR>'
tx=tx+'  <TD ALIGN="right">'
   tx=tx+'<a href=\"start.htm\" target=_top'
   tx=tx+' onMouseOver=\"window.status=\'Zurück zur Startseite\';return true\" onMouseOut=\"window.status=\'\';return true\">'
   tx=tx+'<img src=' + bildlogo + ' height=75 width=200 border=0 alt="Unser Logo" align="right"></a>'
tx=tx+'</TD>'
tx=tx+'</TR>'
tx=tx+'</TABLE>'


This should force any browser to align the image to right.

- Hagur
0
 

Author Comment

by:Maldoror
Comment Utility
Hi folks,

I managed to get rid of the gap myself!
With the frameborder still at 205px, I simply expanded the left part of the logo from width 200 to 202 and everything seems to be o.k. It really was that easy...
Because you all were so helpful I'll divide the 200 points and give it to you all, Hagur, bgillbanks and ttom! Thanks a lot, Maldoror!
0
 
LVL 3

Accepted Solution

by:
bgillbanks earned 66 total points
Comment Utility
nice one, thanks
0
 
LVL 5

Expert Comment

by:ianB
Comment Utility
Community Support has reduced points from 200 to 66
0
 
LVL 5

Expert Comment

by:ianB
Comment Utility
Hi,

I am reducing the points on this question to 66 points so Maldoror can divide the points up equally among the experts. The remaining points have been refunded so that he can post questions for each expert in this topic area.

Any problems please come to :

http://www.experts-exchange.com/jsp/qShow.jsp?ta=commspt&qid=10324371

Ian
Community Support @ Experts Exchange
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

743 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

18 Experts available now in Live!

Get 1:1 Help Now