Solved

Image continues in different frame

Posted on 2000-03-18
26
189 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 5
  • 4
  • +2
26 Comments
 
LVL 9

Expert Comment

by:TTom
ID: 2632211
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
ID: 2635432
Edited text of question.
0
 
LVL 3

Expert Comment

by:bgillbanks
ID: 2635984
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Maldoror
ID: 2636173
Edited text of question.
0
 
LVL 3

Expert Comment

by:hagur
ID: 2636845
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
ID: 2640480
Edited text of question.
0
 

Author Comment

by:Maldoror
ID: 2640568
Edited text of question.
0
 

Author Comment

by:Maldoror
ID: 2640579
Edited text of question.
0
 
LVL 9

Expert Comment

by:TTom
ID: 2640663
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
ID: 2645148
I said that already TTom:-)
0
 
LVL 9

Expert Comment

by:TTom
ID: 2645241
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
ID: 2645433
Edited text of question.
0
 

Author Comment

by:Maldoror
ID: 2645478
Adjusted points from 100 to 200
0
 

Author Comment

by:Maldoror
ID: 2645479
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
ID: 2646883
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
ID: 2648492
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
ID: 2672442
Edited text of question.
0
 

Author Comment

by:Maldoror
ID: 2672454
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
ID: 2672630
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
ID: 2675344
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
ID: 2676462
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
ID: 2679499
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
ID: 2689191
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
ID: 2689492
nice one, thanks
0
 
LVL 5

Expert Comment

by:ianB
ID: 2692903
Community Support has reduced points from 200 to 66
0
 
LVL 5

Expert Comment

by:ianB
ID: 2692904
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
dynamic created check uncheck boxes 6 41
ASP get fieds value 2 21
Adding 1 the value of input "text" every 3 seconds 5 33
HTML auto refresh to another site 4 28
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 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