Can’t seem to find where to remove border in an intro??

@cldskJun 17.2011

I am trying to help a friend out by making some minor alterations to his site, and I can’t seem to figure out how to remove the border around the flash intro in this page: ~~[URL=”http://www.robert-hanley.saviodesigns.com”]~~www.robert-hanley.saviodesigns.com[/URL] anyone have any ideas?? Am I missing something in the code? Thanks so much for your help!
~Chris

to post a comment

HTML

20 Comments(s) _↴

@Big_O_1_Jun 17.2011 — #you just need one line of CSS. You can place it in the head, in an external style sheet, or as an inline style attribute. Just apply

border: none or border-width: 0 to the iframe.

@cldskauthorJun 18.2011 — #Thanks so much for the help...that's exactly what I was trying to do, however, in all the attached style sheets/etc. this page seems linked to, I don't see an iframe anywhere, and where I have tried the border: none it either does nothing, or messes with the container/intro...any thoughts?

@Major_PayneJun 18.2011 — #This is the iframe:

[CODE]<iframe name="splashpage-iframe" src="about:blank" style="margin:0px; padding:0px; width:100&#37;; height:700px"></iframe>[/CODE]

When I edited the HTML and remove that, the border disappeared. Removed border by using this:

&lt;iframe name="splashpage-iframe" src="about:blank" style="margin:0px; padding:0px; width:100%; height:700px; border: 0;"&gt;

The iframe info is on this script:

[CODE]<script type="text/javascript" src="splashpage.js">[/CODE]

@cldskauthorJun 18.2011 — #Thanks so much for telling me where the code is, I put in the code, and now it screws up the page? In Mozilla, it makes the background white and doesn't direct to the next page, but to a white screen, and in IE i see no change?

I refreshed and deleted my cache....do you see this result too? IT is on www.robert-hanley.saviodesigns.com

@Major_PayneJun 18.2011 — #The code is already present on the page. All you had to do is add the border: 0; part to the inline CSS already inserted in the iframe tag. It should not have messed up the page unless you changed the wrong HTML part. The part that needs editing is not on the JS file. It looks like you changed the JS file. You need to restore the JS file.

@cldskauthorJun 18.2011 — #thanks for the clarification...i restored the javascript file, but I am still at a loss then where that code goes? the only page i see the iframe mentioned is in the js file?

@Major_PayneJun 18.2011 — #This is the code from the top of the page:

[CODE]<html style="overflow: hidden;" xmlns="http://www.w3.org/1999/xhtml"><head>
 <!-- InstanceBegin template="/Templates/Index and Home Template.dwt" codeOutsideHTMLIsLocked="false" -->
 
 <link rel="icon" href="favicon.ico" type="image/x-icon">
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <!-- InstanceBeginEditable name="doctitle" -->
 <title>Robert Hanley | Home</title>
 <meta name="description" content="Official site for Robert Hanley, aka Broadway Bob, aka Bob Hanley, who is a successful actor, entertainer, television host, singer with his own 17-piece orchestra, comedian, writer, author, acting teacher, special event host/emcee, director, producer, public speaker and founder of the nonprofit organization the Entertainment Fellowship.">
 <meta name="keywords" content="Robert, Hanley, Handley, Hanly, Broadway, Bob, actor, entertainer, host, writer, author, singer, orchestra, comedian, acting, teacher, comedy, drama, videos, resume, photos, television, fundraising, emcee, M.C., entertainment, book, vocalist, classes, band, gala, fellowship, performer, theatre, musical, theater, Hollywood, film, radio, speaker, voiceovers, newspaper, articles, testimonials, Catholic, stage, game, show, music, roles, appearances, director, producer, nonprofit, organization, fundraiser, corporate, Bronx, New York.">
 <!-- InstanceEndEditable -->
 <!-- InstanceBeginEditable name="head" -->
 <script type="text/javascript" src="splashpage.js">
 
 /***********************************************
 * Splash Page script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/
 
 
 </script><script id="objHTMLFormElementPrototype">try{   document.objHTMLFormElementPrototype = new Object();   document.objHTMLFormElementPrototype.submit = HTMLFormElement.prototype.submit;   HTMLFormElement.prototype.submit = function(AEvent)   {      var spEvent = document.createEvent('Event');      spEvent.initEvent('sp_submit', true, true);      this.dispatchEvent(spEvent);      document.objHTMLFormElementPrototype.submit.apply(this);   };}catch(e){  alert('Error during attach to HTMLFormElement.prototype.submit: ' + ErrorMessage);}</script></head><body spisdocumentcomplete="666"><div id="slashpage" style="z-index: 100; color: white; left: 0pt; top: 0pt; width: 100&#37;; height: 100%;"><div style="text-align: right; padding: 12px; color: white; font-size: 16px; background: none repeat scroll 0% 0% rgb(0, 0, 0);"><a style="top: 2px; right: 5px;" href="javascript:splashpage.closeit()" title="Skip to Content">Click here to skip the intro</a></div><iframe name="splashpage-iframe" src="about:blank" style="margin: 0px; padding: 0px; width: 100%; height: 700px;"></iframe><br>&nbsp;</div>
 <!-- InstanceEndEditable -->
 <link href="Header.css" rel="stylesheet" type="text/css">
 <link href="Navigation.css" rel="stylesheet" type="text/css">
 
 <style type="text/css">
 body {
 background-color: #000;}
 </style>
 [/CODE]

This is the area where the change needs to be made:

[CODE]<body spisdocumentcomplete="666"><div id="slashpage" style="z-index: 100; color: white; left: 0pt; top: 0pt; width: 100%; height: 100%;"><div style="text-align: right; padding: 12px; color: white; font-size: 16px; background: none repeat scroll 0% 0% rgb(0, 0, 0);"><a style="top: 2px; right: 5px;" href="javascript:splashpage.closeit()" title="Skip to Content">Click here to skip the intro</a></div><iframe name="splashpage-iframe" src="about:blank" style="margin: 0px; padding: 0px; width: 100%; height: 700px;"></iframe><br>&nbsp;</div>[/CODE]

@cldskauthorJun 28.2011 — #Many thanks for the reply, for some reason I missed the reply notification...I was looking at the header and it is suppose to be from the template page, though even with the find tool I could not locate it...I am not sure if for some reason there is a different file? I did attach the files that I think (somewhere) it should be...if you are willing, would you mind looking at these and try to locate it? I truly appreciate your help as I know this is suppose to be an easy thing to do, but it is driving me crazy that I can't locate it.

Thanks so much in advance!

~Chris

[upl-file uuid=54a3e625-a422-44ad-9534-798490b83023 size=11kB]Hanley.zip[/upl-file]

@Major_PayneJul 20.2011 — #This is the entire page where the iframe code appears where you only have to add code mentioned above to remove border. Note: Had to cut out a lot as only allowed 10K characters:

[CODE]<html style="overflow: auto;" xmlns="http://www.w3.org/1999/xhtml"><head><link media="all" href="//s7.addthis.com/static/r07/widget61.css" type="text/css" rel="stylesheet">
 <link rel="icon" href="favicon.ico" type="image/x-icon">
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Robert Hanley | Home</title>
 <script type="text/javascript" src="splashpage.js">
 /***********************************************
 * Splash Page script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/
 </script><script id="objHTMLFormElementPrototype">try{   document.objHTMLFormElementPrototype = new Object();   document.objHTMLFormElementPrototype.submit = HTMLFormElement.prototype.submit;   HTMLFormElement.prototype.submit = function(AEvent)   {      var spEvent = document.createEvent('Event');      spEvent.initEvent('sp_submit', true, true);      this.dispatchEvent(spEvent);      document.objHTMLFormElementPrototype.submit.apply(this);   };}catch(e){  alert('Error during attach to HTMLFormElement.prototype.submit: ' + ErrorMessage);}</script></head><body spisdocumentcomplete="666"><div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"><iframe src="//s7.addthis.com/static/r07/sh46.html#" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" title="AddThis utility frame" id="_atssh598"></iframe></div><div id="slashpage" style="z-index: 100; color: white; left: 0pt; top: 0pt; width: 100&#37;; height: 100%; display: none;"><div style="text-align: right; padding: 12px; color: white; font-size: 16px; background: none repeat scroll 0% 0% rgb(0, 0, 0);"><a style="top: 2px; right: 5px;" href="javascript:splashpage.closeit()" title="Skip to Content">Click here to skip the intro</a></div><iframe name="splashpage-iframe" src="about:blank" style="margin: 0px; padding: 0px; width: 100%; height: 700px;"></iframe><br>&nbsp;</div>
 
 <link href="Header.css" rel="stylesheet" type="text/css">
 <link href="Navigation.css" rel="stylesheet" type="text/css">
 
 <style type="text/css">
 body {
 background-color: #000;}
 </style>
 
 <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
 <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
 <style type="text/css">
 body,td,th {
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
 a:link {
 text-decoration: none;
 color: #999;
 }
 a:visited {
 text-decoration: none;
 color: #999;
 }
 a:hover {
 text-decoration: none;
 color: #999;
 }
 a:active {
 text-decoration: none;
 text-align: right;
 }
 </style>
 
 <script src="jquery.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 <script src="galleria/src/galleria.js"></script> 
 <script type="text/javascript">
 <!--
 var isGalleryRunning = false;
 var initialTimeout;
 
 function slideSwitch() {
 var $active = $('#slideshow IMG.active');
 
 if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
 
 var $next =  $active.next().length ? $active.next()
 : $('#slideshow IMG:first');
 
 $active.addClass('last-active');
 
 $next.css({opacity: 0.0})
 .addClass('active')
 .animate({opacity: 1.0}, 3000, function() {
 $active.removeClass('active last-active');
 });
 }
 
   function startSlideShow() {
   // display mainContainer
   $("#mainContainer").css("display", "block");
 
   if (!isGalleryRunning) {
   // Initial photo displays longer
   initialTimeout = setTimeout("startShortSlideShowDelay()", 2000);
   isGalleryRunning = true;
   }
   }
 
   function startShortSlideShowDelay() {
   if (initialTimeout != null) {
   clearTimeout(initialTimeout);
   initialTimeout = null;
   slideSwitch();
   }
   setInterval("slideSwitch()", 5000);
   }
 
   $(document).ready(function(){
   //setInterval("slideSwitch()", 5000);
   });
 
 //-->
 </script>
 
 <style type="text/css">
 <!--
 #mainContainer {
 display:none;
 }
 #container {
 border-left-width: 2px;
 border-left-style: solid;
 border-left-color: #900;
 color: #999;
 vertical-align: top;
 }
 a img {
 border: 1px solid #000000;text-decoration: none;
 }
 #slideshow {
 position:relative;
 height:425px;
 text-align:center;
 width: 600px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 }
 
 #slideshow IMG {
 position:absolute;
 top:0;
 left:0;
 z-index:8;
 }
 
 #slideshow IMG.active {
 z-index:10;
 }
 
 #slideshow IMG.last-active {
 z-index:9;
 }
 -->
 </style>
 <style type="text/css"> 
 ul.MenuBarVertical a#entertainmentfellowshippage
 { line-height: 1.6; } 
 </style>
 <link href="credits.css" rel="stylesheet" type="text/css">
 <style type="text/css">
 a {
 font-style: italic;
 }
 </style>
 
 <div style="display: block;" id="mainContainer">
 <div id="Header"></div>
 <div id="Navigation">
 <table height="" width="926">
 <tbody><tr>
 
   <td height="450" valign="top" width="130">
   <center><a href="home.php"><img name="" src="photos/logo.jpg" alt="" height="75" width="75"></a></center>
   <ul id="MenuBar1" class="MenuBarVertical">
   <li><a href="actor.php" id="actorpage">Actor</a></li>
 <li><a href="entertainer.php" id="entertainerpage">Entertainer</a></li>
 <li><a href="host.php" id="hostpage">Host</a></li>
 <li><a href="author.php" id="authorpage">Writer/Author</a></li>
 <li><a href="entertainmentfellowship.php" id="entertainmentfellowshippage">Entertainment Fellowship</a></li>
 
 <li><a href="contact.php" id="contactpage">Contact</a></li>
 </ul>
 <!-- AddThis Button BEGIN -->
 <div class="addthis_toolbox addthis_default_style" style="margin-left: 23px;">
 <a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4e09726a6f980aa9" class="addthis_button_compact at300m"><span class="at300bs at15nc at15t_compact"></span>Share</a>
 <div class="atclear"></div></div>
 <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
 <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e09726a6f980aa9"></script>
 <!-- AddThis Button END --></td>
 <td id="container" width="784">
 
 
   <div id="slideshow">
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>
   <img style="opacity: 1;" src="photos/home_slideshow/image_1.jpg" alt="Robert Hanley" name="MainPhoto1" id="MainPhoto1" class="active last-active" height="425" width="600">
   <img class="active" style="opacity: 0.0210386;" src="photos/home_slideshow/image_2.jpg" alt="" name="MainPhoto2" id="MainPhoto2" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_3.jpg" alt="" name="MainPhoto3" id="MainPhoto3" height="425" width="600"> 
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_4.jpg" alt="" name="MainPhoto4" id="MainPhoto4" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_5.jpg" alt="" name="MainPhoto5" id="MainPhoto5" height="425" width="600">
 
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_6.jpg" alt="" name="MainPhoto6" id="MainPhoto6" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_6_5.jpg" alt="" name="MainPhoto6_5" id="MainPhoto6_5" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_7.jpg" alt="" name="MainPhoto7" id="MainPhoto7" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_8.jpg" alt="" name="MainPhoto8" id="MainPhoto8" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_9.jpg" alt="" name="MainPhoto9" id="MainPhoto9" height="425" width="600">
   <img class="" style="opacity: 1;" src="photos/home_slideshow/image_10.jpg" alt="" name="MainPhoto10" id="MainPhoto10" height="425" width="600">
   </p>
   </div>
 </td>
 
  </tr>
 </tbody></table>
 </div>
 <div id="Footer"></div>
 <div class="Credits">&#169; Copyright   Robert Hanley  - 

 <a href="http://www.saviodesigns.com" target="_new" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'"> <font color="#999999">Hosted &amp; Coded by Savio Designs</font></a></div>
 <script type="text/javascript">
 //var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
 </script>
 </div>
 </body></html>[/CODE]

It's in this part:

[CODE]<div style="text-align: right; padding: 12px; color: white; font-size: 16px; background: none repeat scroll 0% 0% rgb(0, 0, 0);"><a style="top: 2px; right: 5px;" href="javascript:splashpage.closeit()" title="Skip to Content">Click here to skip the intro</a></div><iframe name="splashpage-iframe" src="about:blank" style="margin: 0px; padding: 0px; width: 100%; height: 700px;"></iframe><br>&nbsp;</div>
 [/CODE]

I just added the border: 0; part:

[CODE]<iframe name="splashpage-iframe" src="about:blank" style="margin:0px; padding:0px; width:100%; height:700px; border: 0;">[/CODE]

@cldskauthorJul 22.2011 — #Thank you so much!! This little thing was incredibly frustrating...I was able to copy the code and do a search for it---it was buried in the javascript page...finally I got the border to be removed!!! I can't thank you enough!!! I truly appreciate your patience in helping me locate this.

Thanks again!

~Chris

@cldskauthorJul 22.2011 — #I might have spoke too soon...the border is gone in Mozilla, but it is still there in Internet Explorer??? I tried deleting the browser cache/etc...and it is still there...this thing is haunting!!! Any thoughts? Thanks so much!

~Chris

@Major_PayneJul 22.2011 — #That's strange. Just checked again in Firefox and IE 9. I do not see the border in either. Opera and Chrome also had no border.

@Cory_RJul 22.2011 — #You won't see it in IE9, you can see it in compatibility mode though.

@Major_PayneJul 23.2011 — #I didn't see it in web editor's Preview which uses an older version of IE's engine. Maybe try putting this in the iframe tag for the older versions:

frameborder="0"

Maybe add this too: scrolling="no"

@cldskauthorJul 23.2011 — #Thanks for those suggestions---adding in the frameborder or scrolling codes actually brought back the border in Mozilla, and did nothing in IE...I am using IE8, so it might be okay if it works in newer versions...one other thing that I was trying to do was align the iframe to the center as on firefox it appears that there is a space on the left (kinda a gutter area). I know that usually the <p align=center> tag before the iframe src works on most areas, but it doesn't seem to work either for this...anyone have any suggestions by chance?

Here is my code as it stands now:

[CODE]output:function(){
 document.write('<div id="slashpage" style="z-index: 100; color: white;">') //Main splashpage container
 document.write(this.defineheader) //header portion of splashpage
 document.write('<p align=center><iframe name="splashpage-iframe" src="about:blank" style="margin:0px; padding:0px; width:100%; height:700px; border:0"></iframe></p>') //iframe
 document.write('<br />&nbsp;</div>')
 this.splashpageref=document.getElementById("slashpage")
 this.splashiframeref=window.frames["splashpage-iframe"]
 this.splashiframeref.location.replace(this.splashpageurl) //Load desired URL into splashpage iframe
 this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
 if (!/safari/i.test(navigator.userAgent)) //if not Safari, disable document scrollbars
 this.standardbody.style.overflow="hidden"
 this.splashpageref.style.left=0
 this.splashpageref.style.top=0
 this.splashpageref.style.width="100%"
 this.splashpageref.style.height="100%"
 this.moveuptimer=setInterval("window.scrollTo(0,0)", 50)
 },
 [/CODE]

Thanks so much for all your help!!

~Chris

@SeoConsultant1Jul 23.2011 — #I think you can place it in the head, in an external style sheet, or as an inline style attribute. Just apply border: none or border-width: 0 to the iframe.

@Major_PayneJul 25.2011 — #Well, the original suggestion worked fine in my FF, IE 8 and IE 9 as well as Chrome and Opera. I do not know why others see the border with those IE browsers as might suggestion for just adding the Border: 0; to the iframe styling worked fine. If the other stuff messed it up, just remove the framescroll/frameborder stuff.

That page could be loaded just as well without using the iframe tags, but it will take replacing the iframe code in script. Example:

[CODE]<object name="splashpage-iframe" style="margin: 0 auto; width: 960px; height: 700px; overflow: auto;" type="text/html" data="about:blank"></object>[/CODE]

You might be able to get away with leaving the name="splashpage-iframe" in this even though is is not an iframe. Just a call for the JS.

@cldskauthorJul 26.2011 — #hmm that didn't seem to work, i appreciate the suggestion...I think he is ok with it not working in the old IE browsers...any thoughts on trying to center it though to eliminate the left gutter in Firefox? I was trying a <p align> tag, but that didn't work...thanks so much for all your help---you have been invaluable!!

@Major_PayneJul 27.2011 — #I have used that code in many pages and it has always worked. Just checked it again and no problem with latest browsers. The CSS may have to be restyle to fit the situation. It should center with margin: 0 auto; as long as you keep the width less than 100%. Otherwise, insert it in its own div container. Changing the code which the JS file also affects means a lot of work. I still don't see any border in all the versions of IE I used and all the other browsers installed. Maybe take the time to use browsershots.org's site.

@AjjallenJul 30.2011 — #Thank you so much!! This little thing was incredibly frustrating...I was able to copy the code and do a search for it---it was buried in the javascript page...finally I got the border to be removed!!!

Also in #HTML _↴

Useless colspan Question about cellpadding What resolution do you design for?

Success!

Help @cldsk spread the word by sharing this article on Twitter...

Tweet This

Can’t seem to find where to remove border in an intro??

20 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Can’t seem to find where to remove border in an intro??

20 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #HTML _↴