HTML - Centering Iframe Problem
hi,
im trieing to center my i frame. it worked first, but when i added a overflow to hide the scrollbar the center didnt work anymore, any fix on that would be greatly appreciated.. current code: <div style='width:1000px; height: 2000px; overflow: hidden;'> <IFRAME SRC="http://www.gras-valkparkieten.nl/smf/" WIDTH="1042" HEIGHT="2000" FRAMEBORDER="0" align="middle"> </IFRAME> </div> html webpage: http://www.gras-valkparkieten.nl/forum.html Similar TutorialsCan anyone help me re-adjust the starting point of the iframe contents? If I make no sense I'll make some pictures. I don't know how to describe it, sorry. Thanks for the help My site is working correctly in bot Safari & FF but I can't seem to get it to center in IE7. In Safari and FF, the content is centered and the window can be shrunk down to 1000px without scrollbars appearing (which is what I want). In IE7 its all sliding to the right and scrollbars are appearing at 1150px or something like that (which is what I want definitely don't want). This template is a little bit problematic because the background image for the blue area extends outside the central column on the left side and I need it to disappear when the window width is shrunk. I hope that makes sense. I can't figure out an alternative solution that works in IE7, any ideas? Check out the template in question at: http://current-post.com Hey guys my site http://www.atlanta-web.com I have 3 <div>s which i centered using the css technique Code: margin: 0 auto; They work perfect in IE 7, FF2, FF3 but fail in IE6 any idea what i could do to make this correct? Thanks, Eric http://www.cubedspacedesigns.com/imagegallery/ This page has a row of scrolling thumbnails along the bottom. Each thumbnail, when clicked on, changes the main image. My problem is that I can't get the main image to centre. The image itself is in a div called #image, and that is inside a container box called #imagebox. For some reason my #image div automatically takes on the width of its parent, #imagebox. What I want it to do is to take on the width of the new image and get centred inside its parent. How do I go about centering an image in a table cell so it is centered in both IE and Firefox? Right now, when I use "center" tags, it will be centered in Firefox, but will be up against the left side in IE. Any help is appreciated! I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html> <head> <title>Official Site of Premier Security Group, Inc.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .centerContainer { margin: 0 auto; } body { background-image:url(images/bkgd2.png) } #Table_01 { position:absolute; left:0px; top:0px; width:800px; height:1200px; } #PSindex-01 { position:absolute; left:0px; top:0px; width:800px; height:69px; } #PSindex-02 { position:absolute; left:0px; top:69px; width:20px; height:174px; } #PSindex-03 { position:absolute; left:20px; top:69px; width:760px; height:174px; } #PSindex-04 { position:absolute; left:780px; top:69px; width:20px; height:174px; } #PSindex-05 { position:absolute; left:0px; top:243px; width:800px; height:13px; } #PSindex-06 { position:absolute; left:0px; top:256px; width:20px; height:35px; } #PSindex-07 { position:absolute; left:20px; top:256px; width:126px; height:35px; } #PSindex-08 { position:absolute; left:146px; top:256px; width:129px; height:35px; } #PSindex-09 { position:absolute; left:275px; top:256px; width:125px; height:35px; } #PSindex-10 { position:absolute; left:400px; top:256px; width:1px; height:944px; } #PSindex-11 { position:absolute; left:401px; top:256px; width:123px; height:35px; } #PSindex-12 { position:absolute; left:524px; top:256px; width:130px; height:35px; } #PSindex-13 { position:absolute; left:654px; top:256px; width:126px; height:35px; } #PSindex-14 { position:absolute; left:780px; top:256px; width:20px; height:35px; } #PSindex-15 { position:absolute; left:0px; top:291px; width:400px; height:909px; } #PSindex-16 { position:absolute; left:401px; top:291px; width:399px; height:909px; } </style> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <div class="centerContainer"> <div> <div id="Table_01"> <div id="PSindex-01"> <img src="images/PSindex_01.png" width="800" height="69" alt=""> </div> <div id="PSindex-02"> <img src="images/PSindex_02.png" width="20" height="174" alt=""> </div> <div id="PSindex-03"> <img src="images/PSindex_03.png" width="760" height="174" alt=""> </div> <div id="PSindex-04"> <img src="images/PSindex_04.png" width="20" height="174" alt=""> </div> <div id="PSindex-05"> <img src="images/PSindex_05.png" width="800" height="13" alt=""> </div> <div id="PSindex-06"> <img src="images/PSindex_06.png" width="20" height="35" alt=""> </div> <div id="PSindex-07"> <img src="images/PSindex_07.png" width="126" height="35" alt=""> </div> <div id="PSindex-08"> <img src="images/PSindex_08.png" width="129" height="35" alt=""> </div> <div id="PSindex-09"> <img src="images/PSindex_09.png" width="125" height="35" alt=""> </div> <div id="PSindex-10"> <img src="images/PSindex_10.png" width="1" height="944" alt=""> </div> <div id="PSindex-11"> <img src="images/PSindex_11.png" width="123" height="35" alt=""> </div> <div id="PSindex-12"> <img src="images/PSindex_12.png" width="130" height="35" alt=""> </div> <div id="PSindex-13"> <img src="images/PSindex_13.png" width="126" height="35" alt=""> </div> <div id="PSindex-14"> <img src="images/PSindex_14.png" width="20" height="35" alt=""> </div> <div id="PSindex-15"> <img src="images/PSindex_15.png" width="400" height="909" alt=""> </div> <div id="PSindex-16"> <img src="images/PSindex_16.png" width="399" height="909" alt=""> </div> </div> </div> </div> </body> </html> ok...I have an iframe named "aaa" and the target links will go to "aaa". It works perfectly fine in Firefox but in IE it won't work at all! Any ideas?? Code: <a href="http://www.yahoo.com" target="aaa">Yahoo.com</a> | <a href="http://www.aol.com" target="aaa">AOL.com</a> | <a href="http://www.lycos.com" target="aaa">Lycos.com</a> | <a href="http://www.altavista.com" target="aaa">AltaVista.com</a> <p> <iframe name="aaa" width="600" height="400" src="http://www.yahoo.com" frameborder="3" scrolling="yes" > </iframe> Hello, I made a site and created an image on which I use area shapes to create a menu. When I press a button in the menu, the corresponding page should load in the iframe 'main', but it just loads in the center of the page in stead of in the center of frame (respecting the boundaries of the frame). http://users.skynet.be/fa227919/interface.htm http://users.skynet.be/fa227919/main.htm hi all. I am working on a partner site for a rigging company, site located here. i'm using an iframe to display the content, which displays everything perfectly in firefox. however, if i switch to internet explorer, the first page loads fine, but when you link off to any of the other pages the iframe expands out from its div and overlaps the div on the right. any help appreciated! Can i make a site and have a search tab, and when he for example writes SHOES and click search they all the sites is showing on SHOES. <This were hard to explain> I found a site who use that function (this site was just a example.) i know this was dificul but try to understand Hi everyone. I am totally new here and kinda new to html. I have built my site using paint and notpad so it's pretty basic. most of the codes used are codes i have found using google. anyways, on my site i got an iframe containing an external text based browser game and has been working for a while, untill recently... i think the games creators has changed some coding so that the same second the my page containing the iframe loads it automaticly redirects you to the game itself and away from my site. anyone know what has been changed and maby a way to work around it? I have created Iframe with source of another domains web sites.So i dont have control over target attribute of their sites. Some links on sites get open in primary window rather than same iframe. Is there any solution to this problem ? Thanx Please have a look on code below: In div section u will find one iframe within which gmail account has been called,problem is that first time u will see the login page within the frame but as soon as u log in and try to logout it will come out of frame.Is there any way to bind the flow of any website/webpage within the iframe. <html> <link rel="stylesheet" type="text/css" href="./css/left.css" /> <body leftmargin="0" topmargin="0" > <table height=450 width="100%" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <!--Content Section Section--> <td width="30%"> <div id="login"> Left Panel </div> </td> <td width="70%"> <div id="login"> <iframe src="http://www.gmail.com" width="100%" height="450"> </iframe> </div> </td> </tr> </table> <!--Content Section Section end here--> <table width="100%" border="0" cellpadding="0" cellspacing="0" > <!--Bottom section--> <tr><td>Bottom section</td></tr> </table> </body> </html> Hello all! I have an issue with my iframe I can't quite figure out. I have an iframe that is displaying a Google map with no scrollbars (scrolling=no). I want to click a link on my main page and display other data in the iframe that does scroll. Problem is I am not sure how to specify for it not to scroll when the map is displayed and to scroll when the other data is displayed. Does anyone have any ideas how to do this? I would greatly appreciate any help. Thanks! Hi people. I've got html page with an iFrame in the middle displaying my main content. I've worked hard on the layout and css, and it's exactly what I want BUT....... The reason I used an iFrame was that I needed to have the same updatable content shown across many pages. BUT I only wanted ONE URL. I did not want my visitors to access the iFrame pages outside of the iFrame as they would not see the important stuf that is on the main page (not included on the iFrame). I've now discovered that my adress bar is saving all the pages that get shown in the iFrame, so my visitors may now see the individual pages that should only be seen in the iFrame. What I need (if it exists) is a bit of code that either: a. stops the browser saving the iFrame pages or b. redirects the browser if a page that should only be shown in the iFrame is accessed to my main index page. I've tried to explain as best I can. Leroy Hello , i have a small problem with iframe content width. I have 2 pages with the folowing code : Page 1 Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>Page1</title></head> <body leftmargin="0" topmargin="0" bgcolor="black"> <iframe src="page2.html" width="100%"></iframe> </body> </html> Page 2 Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Page 2</title> </head> <body leftmargin="0" topmargin="0"> <table style="color:white" width="100%" cellspacing="0" cellpadding="0" border="1"> <tr><td width="100%">SIZE IS 100%</td></tr> </table> </body> </html> The problem is that the iframe content width is smaller than 100% of the page I've attached a photo to see the problem Smaller square ( page 2 table border) have the width set to 100% and is smaller than the iframe border I've tested with multiple doctypes but the problem remains I forgot to say that i have IE 9 but the problem is the same on Mozila Can someone tell me why this page won't display in IE? I assume it's something to do with the iframe, perhaps the page length? It displays fine in Chrome. Firefox also displays it but loses some content at the bottom. The link to the page is keywordseek.com <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Keyword Research Software Tool</title> <META NAME="keywords" CONTENT="Keyword Research Software, Keyword Tool, Keyword Analysis, Analyze Keywords"> <META NAME="description" CONTENT="The new Keyword Elite software will triple the amount of money you make online through proper keyword research or your money back!"> </head> <body> <iframe src="http://deuce.bryxen4.hop.clickbank.net" width="100%" height="35000" frameborder="0" scrolling="no"></iframe></th> </body> </html> Hi, I was helped by some of you guys a couple of days ago, the code i was given works great! but i'm now trying to use it in a different thing altogether also. I have 8 iframes in a page which link to 8 different perl survey scripts, in firefox, it works a dream, in internet explorer it shows whiteness around the boxes, i've tried everythign i can think of, applying styles to the <div> assigning a styled <div class> in the css, i cant make the whiteness go. You'll see what i mean. http://i-conica.net/surveys/survey.htm View that in Firefox, thats how it should look. view it in IE and you'll see my problem, view source to see the things I've tried. If there is a solution, I'd love to hear about it! Thanks! |