Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Clipping a layer

Status
Not open for further replies.

tanderso

IS-IT--Management
Aug 9, 2000
981
US
I use this code to restrict the inner contents of a layer:
[tt]
<div style=&quot;position:relative; width:468px; height:60px; margin:0px; clip:(0px,0px,468px,60px); overflow:hidden;&quot; width=&quot;468&quot; height=&quot;60&quot;></div>
[/tt]
However, nothing shows up in the layer on some versions of NS and even on some versions of IE on the Mac. I really need to control the size of this content (a banner ad placed by JS code provided by the banner rotation software). There is almost always an extra newline after the banner. I need to cut off this newline or anything else which may be larger than 468x60. The above code works great on most browsers, however I need to have it work on all 4+ browsers.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
BTW, I know that the clip:() property does not work with relative positioning. I would prefer to have relative positioning, but will take an absolute positioned solution. However, I am having this problem even if it is positioned absolutely.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
Not sure what you should do... IE on Mac has sevral known bugs (not sure if that's one of them).

How is the ad content written? If you can get it in a variable you can parse it make sure it fits properly.. jared@aauser.com
 
Here's the code:

<!-- My encapsulation -->
<table width=&quot;480&quot; height=&quot;60&quot; border=&quot;0&quot; bordercolor=&quot;#143981&quot; bgcolor=&quot;#143981&quot; cellspacing=&quot;0&quot; cellpadding=&quot;1&quot;>
<tr><td width=&quot;10&quot; height=&quot;60&quot; valign=&quot;top&quot;><IMG BORDER=&quot;0&quot; SRC=&quot;/images/sponsor.gif&quot; WIDTH=&quot;10&quot; HEIGHT=&quot;60&quot;></td>
<td width=&quot;468&quot; height=&quot;60&quot; valign=&quot;top&quot;><nobr><div style=&quot;position:relative; width:468px; height:60px; margin:0px; clip:(0px,0px,468px,60px); overflow:hidden;&quot; width=&quot;468&quot; height=&quot;60&quot;>

<!-- The Banner Code -->
<script LANGUAGE=&quot;JavaScript1.1&quot; SRC=&quot;<script LANGUAGE=&quot;JavaScript&quot;><!--
_version=10; // --></script>
<script LANGUAGE=&quot;JavaScript1.1&quot;><!--
_version=11; // --></script>
<script LANGUAGE=&quot;JavaScript&quot;><!--
if (navigator.appVersion.indexOf('MSIE 3') != -1) {document.write('<IFRAME WIDTH=468 HEIGHT=60 MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0 HSPACE=0 VSPACE=0 FRAMEBORDER=5 SCROLLING=no BORDERCOLOR=&quot;#000000&quot; SRC=&quot;else if (_version < 11)
{document.write ('<A HREF=&quot; target=&quot;_new&quot;><IMG SRC=&quot; width=&quot;468&quot; height=&quot;60&quot;></a>');}
//--></script>

<!-- Close DIV and TABLE -->
</div></nobr></td>
</tr></table>

As you can see, it uses a dynamically written iframe or image depending on the js version.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
you document.write(...) but you don't document.close()
it happened for me that i was doing document.write(....) and nothing showed up, until i added the document.close() ... i hope it's your case as it's a quick fix !!!
 
btw, if closing the doc was the solution, then it's more of a javascript problem ... see even you can get lost in forums ;-)
 
document.close() did not solve anything. I don't even think you have to do that. It's not in the JavaScript, it's in the DIV (which is why this is a DHTML question and not a JavaScript question, but let's not get into that here). The JavaScript produces the banner in both IE and NS without the DIV in place. However, it dissappears in NS when using the DIV.

Has anyone been able to successfully clip a layer in both IE and NS to specific dimensions with the overflow hidden?
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
my last post was kind of a joke, BTW. I just thought it kinda funny. Anyway, still haven't been able to get it to work. I'll ask around. jared@aauser.com
 
try this:

<div style=&quot;position:absolute;width:468px; height:60px; margin:0px; clip:rect(0px,468px,60px,0px);&quot;>
</div>
jared@aauser.com
 
Jared, that is getting further than before. Now, this is weird because devedge.netscape.com says that the clip rectangle is defined by the left, top, right, and bottom, in that order. So it must be 0,0,468,60. But the order 0,468,60,0 seems to work better. I'll update you as I work on this.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
Well, that worked! I've successfully done what I needed -- clipped the layer such that nothing went past the boundaries specified. It turns out that Netscape follows the same ording (top,right,bottom,left) as Microsoft does, despite what the documentation says at devedge.netscape.com.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
Ok, it works, but I can't use it... yet. It seems that there is some trouble with absolute positioning on the Mac. For some reason, on one version of IE on the Mac, my layer which says &quot;top:5px; z-index:10; visibility:visible;&quot; is getting rendered halfway down the page and is partially obscured by other content. Any ideas on how to fix that? On another version it doesn't show up at all, or is completely obscured by other content. Unfortunately, I have to accomodate the Mac, since, as my associates remind me, if even one of those viewers with a Neilson box has a Mac, we could lose a whole rating point... or if just one advertiser uses a Mac, we could lose an account. So, if anyone knows how to make the div play friendly on a Mac, please enlighten me.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top