Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Image continues in different frame

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
Maldoror
Asked:
Maldoror
  • 12
  • 5
  • 4
  • +2
1 Solution
 
TTomCommented:
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
 
MaldororAuthor Commented:
Edited text of question.
0
 
bgillbanksCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
MaldororAuthor Commented:
Edited text of question.
0
 
hagurCommented:
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
 
MaldororAuthor Commented:
Edited text of question.
0
 
MaldororAuthor Commented:
Edited text of question.
0
 
MaldororAuthor Commented:
Edited text of question.
0
 
TTomCommented:
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
 
bgillbanksCommented:
I said that already TTom:-)
0
 
TTomCommented:
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
 
MaldororAuthor Commented:
Edited text of question.
0
 
MaldororAuthor Commented:
Adjusted points from 100 to 200
0
 
MaldororAuthor Commented:
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
 
hagurCommented:
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
 
bgillbanksCommented:
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
 
MaldororAuthor Commented:
Edited text of question.
0
 
MaldororAuthor Commented:
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
 
bgillbanksCommented:
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
 
hagurCommented:
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
 
MaldororAuthor Commented:
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
 
hagurCommented:
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
 
MaldororAuthor Commented:
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
 
bgillbanksCommented:
nice one, thanks
0
 
ianBCommented:
Community Support has reduced points from 200 to 66
0
 
ianBCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 12
  • 5
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now