|
HTML - Strange White Border Around Iframe Content
Hi all!
I need some help with an IFRAME, which content is loaded with some strange borders in Opera and IE6, but not with Firefox. This is what it happens in the 3 browsers: This is the code of the page: Code: <html> <body bgcolor="#96c600"> <iframe style="background-color:#96c600;" scrolling="no" frameborder="0" height="190" width="170" id="meteo" src="http://www.meteodirect.com/vignette/md_vignette.php?params_meteo=terrestre&langue=fr&fond=000000&texte=FFFFFF&saisie_met eo=TENDE"></iframe> </body> </html> A test page to give example is online at: http://testroya.100webspace.net/test.html I already tried to: - Set the width and heigt of IFRAME to match exactly the content size. - Set a green background to IFRAME - Set a green background to the table containing the IFRAME Anyway white borders are always here in Opera and IE6, but not in FF! What should I do to get rid of this awful borders? Thank you very much Similar TutorialsHi everybody! I always try to avoid the use of IFRAMEs, but in this case I had to insert the weather forecast coming from another site. This "source" website has an api which allows one to choose the background of the IFRAME, so no problems with the actual background indeed... but on IE 7 I see an ugly white spot if I set the "height" of the IFRAME to something bigger than the actual height of the content. (see attachment) This does represent a problem, since the actual content is variable in size, and thus I wanted to allow for some padding. I googled for the solution, but the only thing I can find is "how to set the background to transparent" which is not what I need. I tryed it anyway, as seen in following code: HTML Code: <iframe scrolling="no" frameborder=0 style="width:200px;height:490px;background-color:#000000;color:#000000;" allowtransparency="true" src="http://www.ilmeteo.it/box/previsioni.php?citta=5155&type=mps1&width=200&ico=1&lang=ita&days=3&font=Arial&fontsize=12&bg=000000&fg=FFFFFF&bgtitle=FF0000&fgtitle=FFFFFF&bgtab=E8F000&fglink=1773C2"> </iframe> The real problem is that I have no control on that white area, not even by setting bgcolor=black or style="background: black;"... Any ideas would be greatly appreciated! I'm not sure if this is more of a CSS or a HTML qustion I am building a interface for an on demand radio station (so just an FYI when you visit the link below the sound will start up) page in question: http://www.lcc.edu/radio/indexPlayer.aspx The problem that I'm having is that in IE 7/8 there is a strange and quite visible white border appearing around the iframe that is pulling in the radio player interface. This white border is not displaying in any other browser that I've tested thus far. Only IE Thank you for the assist. John I'm a quite new web designer. And i have some amateur questions, which im quit sure of that you can answer I have this website: http://www.game-portfolio.nl/ The index.html works with the table and content. But when i click on home.html it turns white. I have made an style.css and frame.css cause i'm working with frames. Anyone can answer this question on how to fix this white page into a colouring table. Whenever I display a page with an swf file, the file has a strange black border around it can anyone follow this link and see the file and the border and the code and tell me what am I missing? I really appreciate it MArk www.marksmolen.com/a/tryswf4.html I have an iFrame on my website as the main navigation. You click a text link on the left and the iFrame changes. BUT... when I click on a link on the left, the iFrame refreshes and goes to my homepage when it shouldn't. The pages are already made and the html looks ok. Anybody got ideas why this is happening? Hi everyone, Recently i changed my portfolio page, and the new layout I have now has a Iframe in it. But for some strange reason when I press the menu-buttons on the right side I have to press it twice Portfolio Source Code from one of the Iframe pages: HTML Code: <html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><a href="Contact.html" target="_self"><img src="images/Contact_left.jpg" border="0"/></a></td>
<td width="20"><a href="Downloads.html" target="_self"><img src="images/Downloads_left.jpg" border="0"/></a></td>
<td width="20"><a href="ICT-Beheer.html" target="_self"><img src="images/ICT-Beheer_left.jpg" border="0"/></a></td>
<td width="825" align="center" valign="top" background="images/Webdesign_center.jpg"><br />
<br />
<br />
Welkom,<br />
<br />
Momenteel ben ik bezig met opvullen en indelen van de pagina's op deze site.<br />
Er zijn dus nog geen pagina's te bekijken.<br />
<br />
Kom gauw weer een keer terug zodra de website definitief af is!<br />
<br />
Mvg, Dream3R</td>
<td width="20"><a href="Portfolio.html" target="_self"><img src="images/Portfolio_right.jpg" border="0"/></a></td>
<td width="20"><a href="About.html" target="_self"><img src="images/About_right.jpg" border="0"/></a></td>
<td width="20"><a href="Home.html" target="_self"><img src="images/Home_right.jpg" border="0"/></a></td>
</tr>
</table>
</body>
</html>
I tried removing the Targets.. but no result, but its the only thing I could think of.. Hi all. I'm making a webpage based around tables and iFrame(which i beleive is an awful idea, but i couldn't be bothered doing it any way else ) Anyway, i want my iframe border to be 0, so that the 1px table border takes care of the border. I've tried various methods, but none of them worked. Here's my code. Code: <html> <head> <title>.: Welcome! :.</title> <link rel = "StyleSheet" href = "css\table.css" type = "text/css"> <link rel = "StyleSheet" href = "css\general.css" type = "text/css"> <link rel = "StyleSheet" href = "css\scrollbar.css" type = "text/css"> </head> <body bgcolor = "#111111"> <center> </br> <table width = "856" style = "border-bottom: none" height = "150" cellpadding = "0" cellspacing = "0"> <tr> <td align = "center"><img src = "images\banner.png" width = "856" height = "150"></td> </tr> </table> <table bgcolor = "#E5E5E5" height = "430" width = "856"> <tr> <td><iframe name = "links" frameborder = "0" width = "150" height = "430" scrolling = "auto" src = "left.html"></iframe></td> <td><iframe name = "body" frameborder = "0" width = "700" height = "430" scrolling = "auto" src = "body.html"></iframe></td> </tr> </table> </center> </br> </body> </html> The contents of my stylesheets are as follows: Code: table.css:
table
{
border: 1px solid #999999;
}
general.css
*
{
margin: 0px;
padding: 0px;
color:#cccccc;
}
scrollbar.css
body
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
Please Help me! I am trying to make a quick fruit machine for the company I am on placement with. (see pic below) It is to be use for a one day show and I only have 20hrs to complete it. (15 already used) I'm using a table (mainly for speed) 5x3 the top and bottom center cells span 3 columns and the middle row has the usual 5 td tags 1st and 5th are for the side images and the 3 in the middle contain Iframes to display the relevent info for each reel. the functionality of the game works fine but the borders ruin the look of the page. It's not finished yet but as you can see the borders trash any looks. the ifames are set with: frameborder="0" marginheight="0" marginwidth="0" scrolling="no" and the table is set using css with: border-collapse: collapse; the border-collapse: collapse; gets rid of all the table borders perfectly without the Iframes but the once the iframes are placed in the td's it seems they extend the cell by one pixel. Does anyone know of a way to get rid of them? thanks for looking. Below is the page code if it helps. Code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Fruit Machine</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />-->
<meta name="robots" content="noindex,nofollow" />
<meta name="author" content="www.custompages.co.uk" />
<style type="text/css" media="all">@import "./include/admin.css";</style>
</head>
<body style="background:#FFFFFF;">
<style type="text/css">
.game {
/*background:#000000;*/
/*border: thick solid rgb(128,128,128);*/
border-collapse: collapse;
border: none;
width:960px;
}
td {
background:#FFFFFF;
border-collapse: collapse;
}
.frame {
border-collapse: collapse;
margin:0;
padding:0;
}
</style>
<table align="center" class="game">
<!--row 1 score panel -->
<tr>
<td width="240px;" ><img src="images/topl.gif"></td>
<td align="center" width="480px;" colspan="3"><img src="images/score.gif"></td>
<td width="240px;" ><img src="images/topr.gif"></td>
</tr>
<!--row 2 reels -->
<tr>
<td><img src="images/midl.gif"></td>
<td class="frame"><iframe name="f1" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f1r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td class="frame"><iframe name="f2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f2r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td class="frame"><iframe name="f3" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f3r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td><img src="images/midr.gif"></td>
</tr>
<!--row 5 play/result button -->
<form name="play" method="post" action="play.asp">
<tr style="text-align:center;">
<td><img src="images/botl.gif"></td>
<td colspan="3" style="background:url('images/button.gif');"><input type="Submit" style="width:300px; background:#0000FF; color:#FFFFFF; font-size:26px;" name="play" value="PLAY" javascript:onkeyup="play.form.submit();" ></td>
<td><img src="images/botr.gif"></td>
</tr>
</form>
</table>
</body>
</html>
my website http://www.Avalon-Press.com you see the I Frame in the Middle, i think it would look cool to have like a cool little border around it because its a little plain.. can anyone tell me how i can do this? and maybe where to go to to find some borders? i kinda want something similar to this websites. http://www.thenewaddiction.com/ or if you have any other suggestions to my website, i would totally appricate it. - Mike Perez http://www.Avalon-Press.com Hi, Explaining Scenario: In an iFrame I am loading a website e.g. http://google.com Now I want my iFrame with no borders, but the Page I am calling has an iFrame with Border. How can I override the formatting settings of the website i am calling inside the iFrame ? The other website is not in my control so I can not make changes on that HTML. Regards, Chinmay Hi! On a page I'm trying to accomplish the following: A border with a static width surrounding positioned elements (divs). Each element can vary in height and holds text, tables, images, etc. Problem: Is there any way to dynamically adjust the border height to the content? I don't want to use scripting. I have tried using a div with auto height, but it does not adjust to inner divs. I have tried using a table cell containing divs, breaks as soon as divs are positioned. Please help! See simplified example below. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>HTML</title> <style> .borderdiv{ position:relative; width:628px; margin-left: auto; margin-right: auto; background-color:white; height:300px; border-color:#CA3182; border-style:solid; border-width:1px; background-color:#EDFBFD; } .pinkdiv{ position:absolute; width:628px; height:64px; border:none; background-color:#F8D7DA; } .div1{ position:absolute; width:292px; height:29px; top:24px; left:10px; border-width: 1px; border-style: solid; } .div2{ position:absolute; width:200px; height:49px; top:10px; right:11px; text-align:right; border-width: 1px; border-style: solid; } .div3{ position:absolute; width:193px; height:200px; top:175px; right:23px; background-color:#EDFBFD; border-width: 1px; border-style: solid; } </style> </head> <body> <div class="borderdiv"> <div class="pinkdiv"></div> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3"> <table border="1"> <tr> <td><strong>Table</strong></td> <td><b>Dynamic text.</b><br>Amount of text may change here.<br><br>Pink outer border (borderdiv) should adjust to the content in this table!!!</td> </tr> </table> div3 </div> </div> </body> </html> Hi How do i resize the website that fits in to an iframe? Thanks mrdeleigh url page: http://www.filtrexoem.com/application.aspx put in frame. header and footer no. how? see screenshot. Hello all. I'm relatively new to HTML, but have so far managed to create an index page with a navigation bar and IFRAME to hold content (in seperate HTML files). Using "target=" and "<div id=" I can successfully navigate through the content being displayed in the IFRAME. However, I also want the functionality to use a URL (passing parameters) to open the index page and display the desired content in the IFRAME without having to navigate through the menu. To give an example, I write match previews for a rugby site and would like to provide a link on other sites that will take them straight to the index but display the match preview within the IFRAME immediately. I'm not asking anyone to write this for me, but would like some guidance as it's starting to frustrate me. Thanks in advance, Tony. Hi guys! I need to show the content of a html link (<a href>) in an iframe placed into div tags, hiding the content between the divs when I click the link . I do the following : heading.html Code: <a href="http://maps.google.es target="centre">Where are </a> and in the div placed behind of the link , I do the following: index.html Code:
<div id="centre">
<iframe src="../html/heading.html" name="centre"> -->
<form action="../Fillm" method="post">
...
</form>
</iframe>
</div>
But the page appears me duplicated, one above and the other page behind this one, and when I click the link, the content appears me in the behind page. I would be grateful if somebody could help me, because I am Stuck. Bye Just wondering if there are some issues with IE7 handling iframe content. The initial iframe source page was loaded up fine. However, an attempt to reload the same content page by targeting it from an HTML form on the same main page doesn't work. It's structured like below. The same page works fine in IE8 and Safari. Any clues? Main Page -> <iframe name="frame" id="frame_id" src="abcd.html"></iframe> -> <form id="buttonform" name="buttonname" method="post" action="abcd.html" target="frame"> http://www.eczaderm.com/ I have an iframe that is linked to source.html and that source.html has a swf gallery in it. As you can see in this example the top menu stays behind the flash gallery. I tried with giving iframe z-index:-1 but it didin't work. How can I fix this ? Ups I figured the solution that wmode must set to transparent . Thanks anyway I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe |
|||||||