|
HTML - Negative Margin In Iframe
I'm using iframes code inside a table to display a remote page inside the table thus:
<body> <div align="center"> <table width="980" height="650" border="0"> <tr> <td><iFrame src='http://www.remotepage.com' frameborder=0 width=979 height='649' name='main' scrolling=no></iFrame></td></tr> </table> </div> </body> I need to invoke a negative margin to slice off a few pixels from the left and the top of the remote page being displayed in the table. The remote page is hardcoded and I can't edit it. I've tried for hours and also searched on google but I couldn't find a solution that worked for me. If I remove the <div align="center"> I have been able to slice pixels off the table with css but that's no good because the table has to be centered on the page and the negative margin has to be applied to the contents of the iframe and nothing else. Thanks for any help. Similar TutorialsI'm having trouble with elements overlapping in both IE 6 and 7. I took my code and broke it down to a very simple form to demonstrate the problem. I'm using the liquid/fixed layout found here http://blog.html.it/layoutgala/LayoutGala23.html So my major content area is liquid, with a fixed width sidebar on the right. Where I start to run into trouble is when I put any floated elements inside my content area. As I lessen the width of my browser window the white boxes in my code should bump down one at a time once the sidebar starts to fill their space but in IE the sidebar floats overtop of the white boxes. Here's a screen cap. http://kurtcruse.com/IEbug.gif and here's the code <style type="text/css" /> #FCholder { width: 100%; border: 1px solid red; } #FCwrapper { float: left; width: 100%; background: blue; } #FCcontent { margin: 0 141px 0 0; background: green; } #FCbuttonHolder { float: left; width: 141px; margin-left: -141px; background: yellow; } </style> <div id="FCholder"> <div id="FCwrapper"> <div id="FCcontent"> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> </div> </div> <div id="FCbuttonHolder"> Sample text Sample text Sample text Sample text Sample text Sample text Sample </div> </div> Hi, Do you know the answer to this question? (I wasted a lot of time trying figure out this problem, before finally giving up.) How do I get the book cover image to display with no left margin, while preserving the 5px right margin? It displays with no left margin in my WYSIWYG editor. But, it displays with a 5px left margin in IE and Firefox. Here is the code... <a target="_blank" title="New Covenant Theology" href="/images/stories/book/book_cover_original_size.jpg"> <img style="border-style: none; border-width: 0px; left-margin: 0px; right-margin: 5px; title=" alt="New Covenant Theology" src="/images/150x199.jpg" width="150" align="left" height="199" /></a> 24 Reasons Why All Old Testament Laws Are Cancelled and All New Testament Laws Are for Our Obedience. See God's law in redemptive history explained simply and clearly with 7 diagrams, 20 charts, and 702 verses. Dedicated to Reformed, Covenant Theologians; Seventh Day Adventists; and other Sabbath-keepers. Read 3, free chapters from the book now: <a href="/new-covenant-theology.htm" title="New Covenant Theology"><span class="style20">New Covenant Theology</span></a></p> And, here is the webpage... http://www.jesussaidfollowme.org/#biblestudies Thanks for your insight, Greg Gibson I have a username input, then a link, then a password input but I do not want a user-pressed <TAB> key to stop on the link in the middle. Up to now, I have been using a negative TABINDEX on the <A> attribute, but w3 does not allow a negative value. What should I do please? 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! 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. 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. Hi! I've been cracking my head trying to solve this: How can I insert a iframe [i.e. 300x200px] inside of another iframe [i.e. 700x500px] and pull different web content n each one? kind of concentric iframes or like a 'Donut iframe' I have a historical website that I'm going to rebuild. There are a lot of dates and unfamiliar terms. There are a lot of places where the text will say something like, "on the 9th so-and-so did such-and-such..." Using float:right, I have a little box that says "Jun 9, 1788." (I would like to do the same thing on the left with short definitions) I would like to scoot that little box over into the margin. I tried position:relative; left:90px, and that moved it over into the margin, but it still wrapped the text around the blank space it left. My thinking is that they'll be less distracting for people who don't care about the exact date or what the meaning of breaming is. I'm having problems getting my site to render correctly in internet explorer 7. It seems to ignore the margin-top, I want a gap at the top of the page. Also the absolute bar along the top seems to get moved to the right. This is my site: http://suffolkcottage.x10.bz/ Here is the css for the container on the page, where most of the content is inside. #container { width:900px; margin: 30px auto 0px auto!important; margin: 30px auto 0px auto; background-color:#FFFFFF; background:#ffffff url('grad.png') repeat-x bottom; border:1px solid #e8e8e8; z-index:100; } Any help would be appreciated Hi, Someone developed an html newsletter for one of my clients, but when I uploaded it to the website, the right margin gets cut off. This is the link: http://www.eastpointehealthandfitnes...r-2010/?&t=449 How can I fix that? I don't really know much HTML, so I'll appreciate very specific feedback on what I need to change. Any help will be much appreciated! Regards, Reem Hello, what is the coding for affecting the margins in HTML? Also, how can I change the color of the margins? (To make it different than the background) Edit: For example, I like the way gamespot.com is set up whereas there is a permanent left and right margin. When you adjust the size of the window from right to left, the whole webpage doesn't get smaller or word wrap, it just shrinks the margins. If that is actually something different, please explain. Thank you. I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in. How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div? Here is the HTML.... Code: <div id="content">
<div class="welcome">
<p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
Bookmark us and check back often....</p>
</div>
</div>
Here is the CSS... Code: #content {
margin: 5px 0 0 140px;
text-align: center;
width: 630px;
border-left: 1px solid #F4F4F4;
}
.welcome {
margin-top: 25px;
}
Here is the link to the site.... http://development.mesquitechristmas.com/index.html Any ideas or suggestions as why this is happening? -Thanks I inserted a SWF inside a table and it should fit perfectly. However, the table streches a bit and makes the background repeat for a couple of pixels which totally screws the layout. Here is my website: http://jlcq.uuuq.com/jl.html I'm talking about the two horizontal lines on each side of the banner. It looks like the SWF has some kind of margin. How can i delete it so it fits perfectly? If you have the time take a look at my code or download the site and find a way to modify the code so that it fits. Note that the problem also occurs if I insert an image in the same spot instead of a SWF. Thanks! OK guys I'm having a 'no brain day'. Could someone please take a look at http://www.telfordsteamrailway.co.uk...ture/usage.php Near the bottom is a yellow box. - why is there a yellow border / margin under the image? heres the code - which validates Code: <div style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border:0px; background-color:yellow;"> <img style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px; background-color: green;" src="http://www.meteogroup.co.uk/meteo/hptool/logo_meteogroup.png" alt="" width="120px" height="32px" /> </div> I havent got much hair left to tear out. Allan I have someone that develops an html newsletter that I send out to my clients contact database. I ask them to also provide me with a version for the web (as the right margin gets cut off when I upload the original HTML), but every time they struggle with this, and this time told me it's not possible without having access to my CMS (which my client refuses to provide). Someone on this forum (Rblbliss) helped me one time and told me exactly which line of code to change (I don't have any HTML experience). I'm hoping someone can help me this time around as well. Here is a link to the page I'm referring to: http://www.eastpointehealthandfitnes...er-newsletter/ Thanks in advance! Reem So I have a simple question about margins, say I have this code: HTML Code: <div id="content"> <div id="content_item"> </div> <div id="content_item"> </div> </div> with this css: Code: #content{
width: 770px;
height: 100%;
background-color: green;
}
#content_item{
margin: 50px 35px 50px 35px;
width: 700px;
height: 250px;
}
now my first content Item, instead of stretching the content div up the margin, pushes the header div on top of the content div up the amount of the top margin starting from the top of the content div, leaving a large empty space. Is there some way to make that work without using padding? edit-- Ok so I've set the top padding of the content div to 30px and got rid of the margin, that gives me a nice buffer between my header on top of the content div, namely the content_item div's margin pushes the padding up now. This is giving me the effect I wanted, if anyone would still like to help me I would like to know if this is on the right track code wise. Good code, bad code, I'm still a little html green. new css: #content{ padding: 30px 0px 0px 0px; width: 770px; height: 100%; background-color: green; } So, I'm new to HTML/CSS, and I just started a new website... I have a div inside of a div, 'cen' inside of 'tu', but when I try to add a top margin to cen, instead of adding the margin from the top of 'tu', it adds a margin from the bottom of 'top'. I can fix this by adding padding to 'tu' and and reducing its height, but I want to know why the problem exists, as I'm trying to learn. Thanks a lot... Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Austin</title> <style type="text/css"> html, body, h1, h2, h3, img, p, ul, li { margin: 0; padding: 0; } .top { height: 100px; width: 100%; background-color: #0F272B } .tu { height: 350px; width: 100%; background-color: #37648D; } .cen { margin-top: 50px; width: 800px; margin-left: auto; margin-right: auto; position: relative; height: 250px; background-color: #91CED9; } </style> </head> <body> <div class="top"> <h1>Austin</h1> </div> <div class="tu"> <div class="cen"> <h2>This is the website</h2> </div> </div> </body> </html> Hey guys, First post. Glad to see such an active forum. Can someone check out http://www.karmasfortune.com/ohiopainclinic/ I'm trying to get rid of the top margin between the very top and the div.. so that I can utilize the top portion of the background image as a menu system. I tried putting the top-margin: 0px in my div container, but it won't budge. Thanks in advance.. I want to embed a video player to an html page. The problem is that I want to player to butt all the way up to the top of the page what code should i google? YELP! <HTML> <HEAD><TITLE>This is your title.</TITLE> </HEAD><BODY><embed src="http://blip.tv/play/hMB_ApvuBg" type="application/x-shockwave-flash" width="590" height="360" allowscriptaccess="always" allowfullscreen="true"></embed> </a> thanks in advance. D.M. Rosemark |
|||||||