|
CSS - Problems With Iframe
i've been designing a website and decided to use IFRAMES (try them out really). I'm using firefox, i've got an IFRAME that is correctly positioned when i view it locally in firefox, but when i upload it to the web (free host till i get hosting) the iframe is in the top left and not wide enough or tall enough. All the iframe attributes are in a stylesheet, and i am sure it is uploaded to the right spot and the links are correct
Question is, why would firefox view it correctly when its viewed locally, and not when it is uploaded it to the web. thanks in advance Similar TutorialsI'm trying to set up an IFRAME with a 1px solid border, no beveling - etc. It looks flawless in Mozilla, but no matter what I try... I cannot get IE to interpret the code properly. Here's what I have so far: Code: iframe {
border: solid 1px #727272;
height: 445px;
width: 100%;
padding: 0px;
}
Everything works fine in IE except for the border, which looks beveled and ugly, like a default frameborder Can someone please teach me how to overcome this? Thanks in advance! Dear all, I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments. Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads. If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background. Is there any way around this? Many thanks, Mark I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Is it possible to control the attributes of an IFRAME with CSS? Does anyone know of a way to make an IFrame go to 100% of the height of its container, in this case a DIV. I have to load in some external tools for a site and I don't want to have to split up my CSS layout into frame parts when I can just use an IFrame. I've considered using javascript to detect the browser size on load and redoing the height and also onResize but that's just ugly. I've tried t r b l all set to 0px with position:absolute that did nothing. Height:100% gives me no height at all, so far the only thing that works is width:100% and a fixed pixel height value dave Hi. I wondered if there was anyway to make this iframe auto resize (heightwise) so that there is never a vertical scrollbar if the browser is shrunk down... <iframe name="I1" src="frame.html" width="776" height="391" align="top" border="0" frameborder="0"> Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> I dont think you can do that with an iframe but have to use framesets but I just need another voice! To get an idea of what I mean... www.isolace.net (view the source) Cheers! I am trying to put an iframe into css but it's not working, when i do the iframe screws up and it does not hold the information. I have tried everything I can think of, I even went into dreamweaver to fix it but I got nothing. Here is the code. 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nintendo DS</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #DEDEDE;
background-image: url(images/back.jpg);
}
a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:5px; top:4px; width:791px; height:43px; z-index:1">
<table width="789" border="0">
<tr>
<td width="147" height="31"><a href="sound.html"target="myiframe">Sound</a></td>
<td width="179"><a href="dualscreens.html"target="myiframe">Dual Screens </a></td>
<td width="168"><a href="touch.html"target="myiframe">Touch</a></td>
<td width="110"><a href="voice.html"target="myiframe" class="style6">Voice</a></td>
<td width="151"><a href="connect.html" target="myiframe" class="style6">Connect</a></td>
</tr>
</table>
</div>
<table width="800" height="402" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<iframe src="back.html" name="myiframe" id="myiframe" width="400" height="600" frameborder="0" scrolling="AUTO" noresize> </iframe>
</div></td>
</tr>
</table></body>
</html>
Hi all, I am having great difficulty in setting a CSS style for an element in my IFrame. I know how to set the stylesheet for the IFRame using the function "createStyleSheet(strCSS);", however, I want to be able to set the stylesheet for the line that I am currently adding text. This would be like clicking on 'Bold' in Microsoft Word and having the ability to write text using this font until I click on the button again to turn it off. I know that there is an execCommand function that I can use to execute commands on the IFrame. However, I can not find a command identifier that will allow me to set the css style for my current position. Has anyone come across this problem before?!? Any help would be greatly appreciated! Cheers, gavC I've created a page with an iframe. The page that is being displayed in the iframe is as follows:
Code: <html>
<head>
<title></title>
<link href="mainsite.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width=100% height=100% border=1>
<tr>
<th id="welcome">Welcome to the American Communications Web Site</th>
</tr>
</table>
</body>
</html>
The page loads fine in the iframe, but the css th style is not being implemented on it. The css file has this in it: This is in the mainsite.css file Code: #welcome th
{
border:1px solid black;
font-size: 20px;
background: #FF9966;
}
Any reason why the css style isn't being used? I'm guessing it's because of the iFrame. The main page has no trouble displaying the css styles. I've searched the web hi and low yet I have not found any answers. I am using an iframe (it's a love-hate relationship) for my website. I have my index page loaded up with a flash .swf which influences the iframe to switch pages when the user clicks on any of the provided links. *PROBLEM* One of my links consists of a blogger- formulated with 'cryptic blogger code' which I have no intention on learning- just working around. However, no matter how hard I try and mess around with the blogger page's html code, I cannot get rid of the x-axis scrollbar- it appears when it is not needed at all and I am unsure of doing anymore messing around for fear of messing up the code. I've also tried adjusting the actual iframe script but still no results. Please- if any html/css demi-gods/goddesses can help me get rid the the iframe's horizontal scrollbar BUT keep the vertical one, you'll be my best friend :P Here are the websites: (ps- tell me what you think- and it isnt finished) URL <- actual site URL <- blogger page (you can see where i've tried to edit it but still no results) -Jason (i posted this in the html section hoping some html guys would help me- but it was a dud ) I want the iframe to have a horizontal scrollbar but no vertical scrollbar. My code I've been attempting looks like this: Code: <iframe scrolling="auto" src="quicklinks.php" width="100%" height="200" name="helpContent" style="overflow-x: visible; overflow-y: hidden"></iframe> Is this possible? If so, is it compatible with all browsers? I know many of you are going to say, well you have it on auto and if you don't want it to scroll vertically, don't have a page in the iframe that is too high in height. However the page has dynamic thing submitted to it and there might be the possibility that a user submits a name too long and I don't want to deal with only showing a certain length of the string. Can someone recommend a workaround for this issue I am having please. Rollover the top blue menus to see what i mean. There is an advert appearing in an iframe and it is blocking the drop down menus above it. Z indexes etc don't seem to help. this is the link ( very frustrating you can't post a link - it would make things easier for people to help ) sidouglas.net/nz-tourism-guide-prototype/index.html index.html: Iframe source is the same as the domain; menu can appear above the iframe no problem. index2.html: iframe source references another domain; menu dissapears. index3.html: iframe source is same as domain - but references swf resources from another domain. menu dissapears. Surely someone has faced this same issue? I am tied down to having to a situation with index2.html as there has to be a click tracking registering from another domain. Very frustrating, please help. Thanks. hi all, i am a beginner to html world ... hope someone can help me out.. i use iframe to display an external html page (maybe www.download.com), i can't use css to control the appearance of the iframe src page as i try it before. Is there anyway i can do so that my main page standardize the appearance, even displaying others web? Thank for ur attention..... Regards.... K Recently I learned of the tag <iframe> for including external stuff in my web site. It's use, of course, breaks every rule in the book concerning the strict DTD and modern CSS design. Can you suggest the proper alternative to the following?: <iframe height="250" width="190" scrolling="yes" src="../vsCalendar/upcoming.php"></iframe> Thank you for your valuable time. I am now learning CSS and I usually use iFrames to make dynamic content but I was wondering if there was a CSS equivalent. I have a two buttons, that when clicked, will load an image to an iFrame called "window". Is there a CSS way to do this? Thanks Hi guys, Currently, the only CSS I know of to edit the scrollbar is Code:
<style type="text/css">
body {
scrollbar-face-color: #9B9A9A;
scrollbar-shadow-color: #171717;
scrollbar-highlight-color: #171717;
scrollbar-3dlight-color: #171717;
scrollbar-darkshadow-color: #171717;
scrollbar-track-color: #171717C;
scrollbar-arrow-color: #171717;
}
</style>
</head>
However, I want a little more customization. Basically, the only thing I want to show is the actual bar in the middle that scrolls up and down. Nothing else. So, what I want to do is make everything else the normal color of the page, and make the bar in the middle a light color. The only problem is, the function scrollbar-face-color edits the bar itself, AND the arrow boxes above and below it. Is there are a more specific function to edit just the bar only? Thanks. Hi All, You may have come across this several times and may heard of people complain about this several times too. But unfortunately, after browsing 30 websites in my google search, I tried everything and cant seem to get it to work. Basically, I have a CSS drop down on my website (Site is made up of HTML/CSS and uses nested DIVs throughout). When I have a iframe (width=100%), below the horizontal navigation at the top, it just doesnt hover over it. Part of the drop down menu hides behind the iframe. I have constantly read to have parent menu item have a z-index as a higher value than all child divs, provided there is a position set (which i do! - position:relative; ). But still no luck! My CSS Code: .menu1 { float:left; z-index:30; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 0; position:relative; } .menu1 ul { margin:0; list-style-type:none; z-index:25; } .menu1 ul li { float:left; position:relative; background-image: url(../images/layout/img_dash.gif); background-repeat: no-repeat; background-position: right; z-index:20; } .menu1 ul li a, .menu1 ul li a:visited { float:left; display:block; text-decoration:none; color:#fff; line-height:35px; padding-top: 0px; padding-right: 16px; padding-bottom: 0px; padding-left: 16px; z-index:20; } My HTML: <!-- horizontal navigation--> <div id="menuh-container"> <div class="left"> </div> <div class="right"> </div> <div class="menu1"> <ul> <li><a class="menu1one" href="index.html">Home </a> </li> <li><a class="menu1one" href="commsadvisory.html">Comms Advisory </a> </li> <li><a class="menu1one" href="emailreports.html">Email Reports </a> </li> <li><a class="menu1one" href="overnightreports.html">Incident Reports </a> </li> <li><a class="menu1one" href="morninghealthcheck.html">Morning Healthcheck </a> </li> <li><a class="menu1one" href="#nogo">TOC Tools <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Autosys</a></li> <li><a href="#nogo">Bing Web</a></li> <li><a href="#nogo">Handover</a></li> <li><a href="#nogo">IPM Search (New Window)</a></li> <li><a href="#nogo">Sharepoint</a></li> <li><a href="#nogo">Reserved Bridges</a></li> <li><a href="#nogo">RSA Console</a></li> <li><a href="#nogo">Ticket Builders</a></li> <li><a href="#nogo">Uptime Tool</a></li> <li><a href="#nogo">User Admin</a></li> </li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </a> </li> <li><a class="menu1one" href="#nogo">Contacts <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Sub Link 1</a></li> <li><a href="#nogo">Sub Link 2</a></li> <li><a class="drop" href="#nogo">Sub Link 3 <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Sub sub Link 1</a></li> <li><a href="#nogo">Sub sub Link 2</a></li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </li> <li><a href="#nogo">Sub Link 4</a></li> <li><a href="#nogo">Sub Link 5</a></li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </li> </ul> </div> </div> <!-- horizontal navigation end --> <!-- main - content area--> <div id="contentBottomNLHS"> <div id="masterContent" class="col3"> <div class="content" > <div class="tabber"> <div class="tabbertab"> <h2>Start/Close of Day Handover EU-APAC</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/RegionalHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>Start/Close of Day Handover EU-US</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/EU_USRegionalHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>EU-Asia Networks Report</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/AsiaEUShiftHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>EU Daily Network Changes</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/NetworkCHG.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>US Unix/Linux Report</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/default.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>Daily Incident Review</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/DIRMM.aspx" scrolling="auto" height="720px"></iframe> </div> </div> ----------------------------------------------------------- My website is internal one for work, and is not uploaded anywhere so unfortunately cannot provide a link for you to view it. Thanks! Is it possible to overide a websites default css when you display it in an iframe? if so how is this done? I have found the following javascript but it doesn't seem to do anything (maybe im using it incorrectly...) Code:
var cssLink = document.createElement("link") cssLink.href = "test.css";
cssLink .rel = "stylesheet"; cssLink .type = "text/css";
frames['tbl'].document.body.appendChild(cssLink);
Does anyone know how to style an iFrame for IE so that it does not look sunken in? <iframe src="imageUploadForm.sphp" title="Image Upload Form" style="border: 1px solid #eaeaea; height: 70px;" marginwidth="0" marginheight="0"> the border above matches the page color that it is on .. however, it looks like the iframe is sunk in to the page. Firefox render's this great and it looks like it is part of the page.. any way i can get IE to look like that too? Just a quick question. Do IFrames inherit css from the parent window? Because in firefox is seem to but in IE it doesn't. Any explaination? |
|||||||