|
HTML - Problems With Iframe Boarders (even With Border Set To Zero)
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>
Similar TutorialsHello, i need some help with adding some margins and boarders to my HTML website. Could anyone explain how I can do this? I am very new to HTML. Thankyou 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! 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 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 I'm currently working on my first blog and am trying to add a twitter hyperlink but it has a nasty border to it. I tried typing in different types of 'border=0' but it doesnt seem to work. I found the main code for the entire page post img, table.tr-caption-container { padding:4px; border:1px solid $bordercolor; if I put a zero in the border it takes it off the entire page, but I'd like my pictures to have a border and have The twitter hyperlink be without a border. This is the twitter link I want to have with no border. <a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i835.photobucket.com/albums/zz275/amberink/social%20networking%20icons/th_twitter_32.png' width='20'/></a> Thanks, Ashton this works fine in safari and fire fox but not in IE, its the links i'm having problems with, in safari and fire fox the links and the background image fit right but in IE there pushed down about 4px take a look, to see what i mean rollover the links and you will see what i mean the url is: http://nathanoconnor.co.uk/kartingchampionships/site/ thanks For this page on my site: http://www.monkeygambling.com/new%20...ingindex.shtml I am having trouble with the borders on the central part. I have created an external css file with these commands table.border { border-top:1px outset "gray"; border-right:1px outset "gray"; border-bottom:1px outset "gray"; border-left:1px outset "gray"; } td.border { border-top:0px inset "gray"; border-right:1px inset "gray"; border-bottom:0px inset "gray"; border-left:1px inset "gray"; } I want a border with one px width like a normal table, but I don't want the cells to have horizontal borders where the <hr> are. I have got the table to have a border around it, but I want the double line with highlighted edges like in a normal table. If that makes sense could anyone help me? thanks I am building an adwords landing page. The URL is he http://www.amanochocolate.com/adwords/dark-chocolate If you notice, I have put a text block on the right that is all black. I wanted it to have rounded corners so I used some graphics to achieve that. However, for some reason, the table cell color is showing up around the border even though I have no borders set for the table. (I.,e., border:0pt) Also, the border I don't want on the bottom is thicker for some odd reason. I've seen this before but have never figured out what causes this. I would simply like my table borders to be really clean (and gone). Any ideas? -Art In a website i'm designing, there is a slideshow I created, and instead of using flash I used Windows Media Player. For some reason the html border attribute on both the <embed> and <object> tags, when viewed in Firefox, do not work. Page with border problems here is the code, if you want it: Code: <center>
<object id="MediaPlayer"
width="800"
height="650"
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
standby="Loading Windows Media Player components..."
type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
title="Pete's Mountain Road Slideshow"
border="3">
<param name="filename" value="http://www.petesmountainroad.com/PetesMountain.wmv" />
<param name="Showcontrols" value="True" />
<param name="autoStart" value="False" />
<param name="wmode" value="transparent" />
<embed type="application/x-mplayer2" src=http://www.petesmountainroad.com/PetesMountain.wmv"
name="MediaPlayer"
autoStart="False"
wmode="transparent"
width="800"
height="650"
title="Pete's Mountain Road Slideshow" />
</object>
<br />
<p class="main">If you do not have Windows Media Player, you can view the video by following
<a class="Link" href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx" target="_blank" title="Download Windows Media Player 11">this link</a>
to download the program to your computer, then try to play it again.</p>
</center>
</body>
</html>
Hello I was updating my layout for my fansite (http://completely-gaga.com) last night and for some apparant reason my iframe which worked perfectly well before won't display any of the pages i've linked to it. Any suggestions? http://www.cedarcreekyouth.org/calendar.html Works fine in Firefox/Chrome but the iFrame'd Calendar is messed up in Internet Explorer, it is too small.. How can I fix this? Thanks, Cody Hello, I need some help, im trying to help a friend with his fathers website.. He is using a script (JS) thats showing the way to his photostudio and he got the script from a known website called Eniro.se (swedish website). the this is, when he installed the script it worked as he wanted and after about 1 year it became a problem. It is an Iframe problem, he want it to be iframe but he want to make the site open in a new window. its easier to check by ur self to help i copied the site to my server so the link is http://gotno.name/conny/hitta_hit.html so if you want to help, go there and help me understand why its not opening the site in a new window anymore... Sincerely! Ompaa I am using Webstudio 5.0 to build my website. What I am trying to achieve with this iframe is to bring a blog from another website into my current one. If you go to www.nigh****ch.net/Blog.html you will see what it looks like. This works perfect in Firefox, but not in IE and Chrome. The code used is: <iframe src="http://nigh****chsecurity.blogspot.com/" width="767" height="600"></iframe> It looks as if Web Studio tries to add the master page onto the iframe. You can see the image boxes that show up in the same format that the whole website layout is, and these images are not on the target website. Any ideas? Hey,I use an iframe on my site but if i wanna open a page it opens in a popup but its supposed to open in the iframe.. what am i doin wrong?? this is my iframe: Code: <iframe src="Home.html" name="Content" width="100%" height="400" marginwidth="0" marginheight="0" frameborder="0" > </iframe> this is my menu: Code: <h1>Home</h1>
<a href="../index.html" target="content"">Index</a>
<a href="forum.html" target="content>Forums</a>
<a href="mailto:" target="content>Contact</a>
<h1>Anime</h1>
<p><a href="naruto.html" target="content">Naruto</a>
<a href="dragonball.html" target="content">Dragonball </a>
<a href="dragonballz.html" target="content">Dragonball Z</a>
<a href="dragonballgt.html" target="content">Dragonball GT</a>
<a href="bleach.html" target="content">Bleach</a>
<h1>Games</h1>
<p><a href="f2p.html" target="content">F2P MMORPG</a>
<a href="p2p.html" target="content">P2P MMORPG</a>
<a href="role.html" target="content"><strong>TBRPG</strong></a></p>
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. I have 2 IFrames on a page. I am going to end up with a long list of shows to catch-up on. Is there a way I can embed an IFrame with the list, and when you click on a show, you it will change the Playing Show http://tiny.cc/catchup <---The page I am referring to. hi, i've a very simple html page, where i have an iframe. The problem is that i want to add some text below the iframe. however, my text keeps showing up on the right hand side of the iframe. i've looked at the tutorials discussing the tags available for iframe, but surprisingly, none seem to relevant to this. Code: <html> <body> <table border="0" cellspacing="10"> <table border="0" cellpadding="0" cellspacing="0" align="left"> <td valign="top"> <iframe src="mySource.jsp" height="700" width="600" frameborder="0" scrolling="auto"></iframe> </td> </table> This should be displayed below the iframe but actually gets displayed on the right </body> </html> any help / guidance in this will be much appreciated. thanks in advance! this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Now here is my problem. I'm not familiar with other laguages then html and a little bit of javascript and I wanted to make a site for me and my brothers photography company. I currently using dreamweaver and have figured out the way I want to make this site. I tried using ordinary frames, but I want the website to be aligned in the middle and I could make that happen. That is why I went into iframes and a regular table on the index page. My problem now is that I have several iFrames and I want a link from one to open in another. http://www.trans4mind.com/personal_d...e/iframes3.htm here is a link for this to happen, and the simple solution is to name the frame and then target the link. but I have tried that and when the link is from one iframe to another it won't work. If the link is on the index page and target the iframe then it works. Do you have any idea why this happens? I know it's possible since the link above does it. |
|||||||