HTML - Iframe Border Troubles
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! Similar TutorialsThe problem I'm encountering is that when I use an Iframe to load parts of a portfolio, the footer on the webpage disappears. The footer is fine as soon as I remove the Iframe. Does anyone know what the problem could be? For an example, see http://citrusphotography.ca/portfolio.html Thanks! Edyn 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 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> 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 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. So here's my problem, I am using a combination of div tags and tables to center my content. However, the blank space in tables overlap the content of other tables so I cannot click content in those tables, I cannot just use a z index since both tables have clickable content in them and whichever one has the lower z index becomes unusable. So my code is something along the lines of. Code: <div style="position: absolute; width: 98%; z-index: 1;" align="center"> <table width="905" height="600"> <tr> <td width="300"> this is where I have content with links </td> <td> </td> </tr> </table> </div> and then to align something on the other side of it I put Code: <div style="position: absolute; width: 98%; z-index: 1;" align="center"> <table width="905" height="600"> <tr> <td> </td> <td width="160"> This is where I have an ad </td> </tr> </table> </div> I tried wrapping the ad in another div tag and giving it a higher z index hoping that it would allow just the ad to pop out (rather than the whole table) but unfortunately it wasn't that easy for me. If anyone can help me solve this please let me know, the website it is currently uploaded on is www.docoden.com as you can see the ad on the right is not capable of being clicked (please do not try to click it just hover your mouse over it since that would violate the TOS) at least not if it's displaying text ads, for some reason image ads are still working for me perhaps due to the use of flash. If anyone can give me any help on this please do. Note: I did not stack them all in a single table because that tends to cause alignment problems from browser to browser, so if your advice is to just make it all a single table then that doesn't help me. If you can explain a simpler way for me to do this using div tags though then that may be appreciated. I apologize for the slightly sloppy code, I am very new to web development. hey ya'll... I've been having trouble with this site showing up in IE6-7 correctly and don't know how to fix it. View in FF or Safari to see how it's supposed to look. Any advice is much appreciated. Click here if more information is needed, don't be afraid to ask. Hello, I created a website and I have the fonts working perfectly on my computer. I noticed, though, that when it is on another computer they are either WAY smaller or WAY bigger than on mine. After some exploration I noticed that the font size on IE effects the size on my website... is there a simple peice of coding that can fix this? Thanks Ryan delete please Ok... the code below works fine in everything but IE, this is a known deficiency in IE, and I need a workaround. The tricky part is... I'm generating the form with a php loop and so it needs to basically be a workaround that I can use easily in my script. Thanks in advance. <form action=""> <select name="test"> <option value="t2" disabled="disabled">Test1</option> <option value="t1">Test2</option> </select> </form> How do I make something centered; like http://www.amazon.com/ the picture of the kindle is centered. What would be the code for it? Also, I'm completely new to html/coding/computer programs. I am making a website for a glass business >.< I have no idea why I accepted the offer; I guess its because I wanted to learn it..? Edit: This is what I'm trying to make [x] Do you think its possible for me to finish today? Hi, I have finally managed to create the drop down that I want and placed the code into my page after testing. However I have a table of 24 teams, and only 9 of them are showing. I have tried to add <tr> breaks and show 4 across but the mouseover box then appears at the bottom of the table even when I mouseover at the top. Ideallly I would like to place these links in the table I created here; http://www.freewebs.com/jonnibravo/l...forumsmain.htm Here is the test page where my code exsists; http://www.freewebs.com/jonnibravo/testpage.htm sorrted Hello! I am having some trouble with the way that my tables are being displayed. Everything shows up fine in firefox, but in safari and ie, it looks like my tables have some major spacing issues. Can anybody help me? http://www.mortgagesbykd.com/main.html The site isnt anywhere near complete, and I know that the menu istn' working yet, but this issue is just racking my brain Thanks a bunch Hi. I'm new here and a bit of a noob I am having a frames issue. I have all my frames set up in my main page: <frameset cols="10%,90%"> <frame src="navbar.html"> <frameset rows="25%,75%"> <frame src="banner.html"> <frame src="home.html"> now, the frame 'navbar' is my navigation frame on the left.I want the links in my 'navbar', to be displayed in the 'home' frame. the 'home' frame is where my main content will go. The only problem is that this opens up a whole new window instead. Oh, the link I am using is a graphic. the code for the link in the navigation bar: <a href="demo.html" target="home"> <img src="../Pictures/logo.gif" width="45" height="24" /> the question is, is something typed in wrong? I am using dreamweaver and am wondering if i have to do something with the Target, since the frames are in separate documents? so i want to display the link in the 'home' frame, but it just opens a new window any help would be greatly appreciated! Hi, I recently put up a new website at http://oubeta.org/ . I just realized that it works just fine in Firefox, but not in Safari. Would someone mind taking a peek at the source code of index2.htm (the page you go to after clicking on the main logo, or just he http://oubeta.org/index2.htm). Only the background image shows up in Safari, and none of the other content. Thanks hi..hopefully someone here will know a solution to my problem. i have made a page with a flash logo in the header section. now in ie7/firefox the page looks just about right. however in ie6 the flash logo appears above my page instead of where it should be. now i realize this may be because of how i have implemented the flash file. but i cant seem to figure it out..no matter what i do. i know i have some errors to correct in my code but none seem to be related to this specific problem. the problem is easy to see by comparing ie6 to ie7 if anyone can point me in the right direction it would be greatly appreciated. the site in question is www.nwotradingcards.com thanks for your help I'm trying to get this page to validate with the w3c, but there's something wrong with the playlist.I know it has to do with xhtml strict, but I didn't write the playlist code, I just copied and pasted it from playlist.com. So now I need to know what to change to make it validate. Also, if anyone knows about a better place to get an embeddable playlist that would be welcome. Hi, My new website I have been working on works perfect when I load it up on firefox but when I use internet explorer the left side nav loads in the middle of the page instead of in line on the left side like it does on firefox. I will post the index page below. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>E-Shop Jersey Specialist</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <a href="index.html" class="float"><img src="images/logo.jpg" alt="" height="73" width="171"></a> <div style="position: absolute; top: 1px; left: 1px; height: 0px; width: 0px; overflow: hidden;"> <h1><a href="http://www.greatdirectories.org">best web directories</a></h1> <h1><a href="http://www.bestfreetemplates.org">best free templates</a></h1> </div> <div class="topblock1"> Currency:<br> <select> <option>US Dollar</option> </select> </div> <div class="topblock2"> Lanquage:<br> <a href="#"><img src="images/flag4.gif" alt="" height="11" width="19"></a> </div> <div class="topblock2"> <img src="images/shopping.gif" alt="" class="shopping" height="24" width="24"> <p>Shopping cart</p> <p><strong>0</strong> <span>items</span></p> </div> <ul id="menu"> <li><img src="images/li.gif" alt="" height="29" width="19"></li> <li><a href="index.html"><img src="images/but1_a.gif" alt="" height="29" width="90"></a></li> <li><a href="new.html"><img style="border: 0px solid ; width: 129px; height: 29px;" src="images/but2.gif" alt=""></a></li> <li><a href="special.html"><img style="border: 0px solid ; width: 127px; height: 29px;" src="images/but3.gif" alt=""></a></li> <li><a href="error.html"><img style="border: 0px solid ; width: 113px; height: 29px;" src="images/but4.gif" alt=""></a></li> <li><a href="error.html"><img style="border: 0px solid ; width: 132px; height: 29px;" src="images/but5.gif" alt=""></a></li> <li><a href="locations.html"><img style="border: 0px solid ; width: 105px; height: 29px;" src="images/but6.gif" alt=""></a></li> <li><a href="faq.html"><img style="border: 0px solid ; width: 82px; height: 29px;" src="images/but7.gif" alt=""></a></li> <li><a href="contact.html"><img style="border: 0px solid ; width: 112px; height: 29px;" src="images/but8.gif" alt=""></a></li> <li><img src="images/but9.gif" alt="" height="29" width="71"></li> </ul> </div> <div id="container"> <div id="center" class="column"><a href="#" class="banner"><img src="images/bigbanner.jpg" alt="" height="236" width="572"></a><br> <div id="content"> <img src="images/title2.gif" alt="" height="29" width="540"><br> <p>Looking for a great price? Look no further because our online store has more than any other can offer! </p> <p>Here you will find one of the biggest selections of NHL Jerseys online. All jerseys are 100% embroidered and are of the highest quality possible. We have a large collection of all the biggest names in hockey as well as some of the biggest legends.</p> <p>Whether you are buying for yourself or looking to buy as a gift for someone special, we will always have you covered! We have great pricing as well as shipping on almost all orders is covered.</p> <p></p> <p>Here is why our site <br> </p> <img src="images/title3.gif" alt="" class="pad25" height="26" width="540"> <div class="stuff"> <div class="item"> <img src="images/pic1.jpg" alt="" height="90" width="124"> <a href="index2.html" class="name">Name Product</a> <span>$250</span> <a href="#"><img src="images/zoom.gif" alt="" height="19" width="53"></a><a href="#"><img src="images/cart.gif" alt="" height="19" width="71"></a></div> <div class="item"> <img src="images/pic2.jpg" alt="" height="111" width="124"> <a href="index2.html" class="name">Name Product</a> <span>$850</span> <a href="#"><img src="images/zoom.gif" alt="" height="19" width="53"></a><a href="#"><img src="images/cart.gif" alt="" height="19" width="71"></a></div> <div class="item"> <img src="images/pic3.jpg" alt="" height="89" width="124"> <a href="index2.html" class="name">Name Product</a> <span>$400</span> <a href="#"><img src="images/zoom.gif" alt="" height="19" width="53"></a><a href="#"><img src="images/cart.gif" alt="" height="19" width="71"></a></div> <div class="item"> <img src="images/pic4.jpg" alt="" height="89" width="124"> <a href="index2.html" class="name">Name Product</a> <span>$350</span> <a href="#"><img src="images/zoom.gif" alt="" height="19" width="53"></a><a href="#"><img src="images/cart.gif" alt="" height="19" width="71"></a></div> <div class="item"> <img src="images/pic5.jpg" alt="" height="97" width="124"> <a href="index2.html" class="name">Name Product</a> <span>$250</span> <a href="#"><img src="images/zoom.gif" alt="" height="19" width="53"></a><a href="#"><img src="images/cart.gif" alt="" height="19" width="71"></a></div> <div class="item"> <img src="images/pic6.jpg" alt="" height="111" width="124"> <a href="index2.html" class="name">Name Product</a> <span>$2250</span> <a href="#"><img src="images/zoom.gif" alt="" height="19" width="53"></a><a href="#"><img src="images/cart.gif" alt="" height="19" width="71"></a></div> </div> </div> </div> <div id="left" class="column"> <div class="block"> <img src="images/title1.gif" alt="" height="42" width="168"><br> <ul id="navigation"> <li class="color"><a href="vintage.html">Vintage NHL Jerseys</a></li> <li><a href="olympic.html">Olympic Jerseys</a></li> <li class="color"><a href="anaheim.html">Anaheim Ducks</a></li> <li><a href="atlanta.html">Atlanta Thrashers</a></li> <li class="color"><a href="boston.html">Boston Bruins</a></li> <li><a href="buffalo.html">Buffalo Sabres</a></li> <li class="color"><a href="calgary.html">Calgary Flames</a></li> <li><a href="carolina.html">Carolina Hurricanes</a></li> <li class="color"><a href="chicago.html">Chicago Blackhawks</a></li> <li><a href="colorado.html">Colorado Avalanche</a></li> <li class="color"><a href="columbus.html">Columbus Blue Jackets</a></li> <li><a href="dallas.html">Dallas Stars</a></li> <li class="color"><a href="detroit.html">Detroit Red Wings</a></li> <li><a href="edmonton.html">Edmonton Oilers</a></li> <li class="color"><a href="florida.html">Florida Panthers</a></li> <li><a href="la.html">Los Angeles Kings</a></li> <li class="color"><a href="minnesota.html">Minnesota Wild</a></li> <li><a href="montreal.html">Montreal Canadiens</a></li> <li class="color"><a href="nashville.html">Nashville Predators</a></li> <li><a href="nj.html">New Jersey Devils</a></li> <li class="color"><a href="nyi.html">New York Islanders</a></li> <li><a href="nyr.html">New York Rangers</a></li> <li class="color"><a href="ottawa.html">Ottawa Senators</a></li> <li><a href="sj.html">San Jose Sharks</a></li> <li class="color"><a href="stl.html">St. Louis Blues</a></li> <li><a href="tb.html">Tampa Bay Lightning</a></li> <li class="color"><a href="toronto.html">Toronto Maple Leafs</a></li> </ul> <ul id="navigation"> <li><a href="vancouver.html">Vancouver Canucks</a></li> </ul> <ul id="navigation"> <li class="color"><a href="washington.html">Washington Capitals</a></li> </ul> <ul id="navigation"> </ul> </div> <a href="#"><img src="images/banner1.jpg" alt="" height="200" width="172"></a> </div> <div id="right" class="column"> <a href="pavelbure.html"><img style="border: 0px solid ; width: 237px; height: 216px;" src="images/banner2.jpg" alt=""></a><br> <div class="rightblock"> <img src="images/title4.gif" alt="" height="29" width="223"><br> <div class="blocks"> <img src="images/top_bg.gif" alt="" height="12" width="218"> <form action="#"> <p class="line"><span>Login:</span> <input type="text"></p> <p class="line"><span>Password:</span> <input type="text"></p> <p class="line center"><a href="#" class="reg">Registration</a> | <a href="#" class="reg">Forgot password?</a></p> <p class="line center pad20"><a href="#"><img src="images/enter.gif" alt="" height="25" width="69"></a></p> </form> <img src="images/bot_bg.gif" alt="" height="10" width="218"><br> </div> <div class="blocks"> <img src="images/top_bg.gif" alt="" height="12" width="218"> <div id="news"> <img src="images/title5.gif" alt="" height="28" width="201"> <span class="date">23 november</span> <p>Recently acquired more Olympic Jerseys. We now have many more names in hockey for Canada and the USA! Check out our Olympic Hockey Jerseys Today!</p> <a href="news.html" class="more">read more</a> </div> <img src="images/bot_bg.gif" alt="" height="10" width="218"><br> </div> </div> </div> </div> <div id="footer"> <a href="index.html">Home</a> | <a href="new.html">New Products</a> | <a href="special.html">Special Offers</a> | <a href="error.html">My Account</a> | <a href="error.html">Shopping Chart</a> | <a href="locations.html">Locations</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> | <a href="privacy.html" class="terms">Privacy Policy</a> | <a href="terms.html" class="terms">Terms of Use</a> <p>Copyright ©. All rights reserved. Design by <a href="http://www.bestfreetemplates.info" target="_blank" id="bft" title="Best Free Templates">BFT</a> </p> </div> </body> </html> Hi all, I am creating a site for a client but need some help with the menu. The site so far is www.dream-creators.com/menu and the menu concerned is the one next to home. If you hover the mouse over it you will see that it drops down. This is done via js. Also you can see that the main link had an image rollover js attached to it, so it changes when you put your mouse over it. The problem is, once the mouse is moved off it and down onto the links below the image defaults back to the original image. I was hoping someone could help me fix it? Thanks in advance! Adam |