|
CSS - Really Aggrevating Iframe Css Problem!
Ok so basically I'm making a layout that is an image map and when you click on the links, the page I've made for that link pops up in the iframe below the image map. I have created an external style css sheet on my freewebs account and I linked it to all my individual pages that open in the iframe so the style will be the same on all. Now I want the iframe scrollbar to be transparent, instead of colors or boring gray. I've checked all over and followed every tutorial and it isn't working for me! instead of transparent, the color I set to be transparent in my code turns to white on the scrollbar. I would include a pic or a link so you could see the layout and the problem but this dumb board doesn't let new users do that.. (what's the point then of posting here??) ugh.. anyways...
Here is my code for the layout: <HTML> <HEAD> <TITLE>Epona layout 4</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <TABLE WIDTH=850 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=3> <IMG SRC="image" WIDTH=850 HEIGHT=152 ALT=""></TD> </TR> <TR> <TD ROWSPAN=4> <IMG SRC="image" WIDTH=347 HEIGHT=498 ALT=""></TD> <TD> <IMG SRC="image" WIDTH=386 HEIGHT=34 BORDER=0 ALT="" USEMAP="#EponaMap"></TD> <TD ROWSPAN=4> <IMG SRC="image" WIDTH=117 HEIGHT=498 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="image" WIDTH=386 HEIGHT=2 ALT=""></TD> </TR> <TR> <TD> <iframe name="main" src="Pageonmywebsite5.htm" scrolling="auto" frameborder=0 framespacing=0 width=386 height=314 allowtransparency="true" style="filter: chroma(color=#C3C9CD)"></iframe> </TD> </TR> <TR> <TD> <IMG SRC="image" WIDTH=386 HEIGHT=148 ALT=""></TD> </TR> </TABLE> <MAP NAME="EponaMap"> <AREA SHAPE="rect" ALT="" COORDS="315,5,379,25" HREF="Pageonmywebsite.htm" target="main"> <AREA SHAPE="rect" ALT="" COORDS="247,6,299,26" HREF="Pageonmywebsite2.htm" target="main"> <AREA SHAPE="rect" ALT="" COORDS="153,6,230,28" HREF="Pageonmywebsite3.htm" target="main"> <AREA SHAPE="rect" ALT="" COORDS="68,6,135,27" HREF="Pageonmywebsite4.htm" target="main"> <AREA SHAPE="rect" ALT="" COORDS="3,6,52,24" HREF="Pageonmywebsite5.htm" target="main"> </MAP> </BODY> </HTML> And here is the code I have in my external style sheet: body { background-image: url(mybackgroundimage); background-repeat: no-repeat; background-attachment: fixed; font-family: Verdana; font-size: 8pt; color: #466382; scrollbar-face-color:#C3C9CD; scrollbar-arrow-color:#EBF1ED; scrollbar-track-color:#C3C9CD; scrollbar-shadow-color:#EBF1ED; scrollbar-highlight-color:#C3C9CD; scrollbar-3dlight-color:#C3C9CD; scrollbar-darkshadow-Color:#C3C9CD; } As you can see I've placed the - allowtransparency="true" style="filter: chroma(color=#C3C9CD)" - in my iframe tags and this should make the scrollbar transparent but it doesnt?? Any help please?! PS: Before you post, I understand that when the pages load into the iframe, the iframe follows the style of the external style sheet linked to the page. I have done this already, so please don't tell me that since I already know this. Thanks! Similar TutorialsI'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. 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 I have a page which has an iframe which buffers the pages that are passed to the div "content" layer. the page that is loaded into the iframe extracts the data from the database and then includes the template which also holds the css. this works when the page isnt loaded through the iframe to the div but doesnt when buffered and loaded. does anyone know what I could be doing wrong? do I need to put the css (which is just for font and text) on the page holding the iframe and the div layer? any help will be greatly appreciated, thanks in advance. lo wonder if anyone can help :S i got advice from this board on doing an iframe using javascript. but know i have a new problem: when i use the scrolling="auto" attribute you get both vertical and hrozontal scroll bars even tho only vertical are needed. i knew how to get rid of this using this inside the body tag : style="overflow-x: hidden;" and that worked but it doesnt now :S also i used this inside a css on my last website to change colours of the scroll bars : body { background-color: #666666; scrollbar-3dlight-color:#999999; scrollbar-arrow-color:#666666; scrollbar-base-color:#666666; scrollbar-darkshadow-color:#e2e2e2; scrollbar-face-color:#575757; scrollbar-highlight-color:#666666; SCROLLBAR-TRACK-COLOR: #656565; scrollbar-shadow-color:#666666 } but for some reason its not working now is it cus i used a javascript for the iframe??? Any help would be much appreciated N3cr0 Hi everybody ! I'm having some trouble with a site i'm currently working on at (s328005659.onlinehome.fr/) the problem i'm experiencing is with facebook "like button" in the bar at the bottom, i haven't found a way to make it align with the other bookmark buttons on its left. It'd be great if you could help me with this issue... Thanks in advance, Joe Hi folks I have a strange problem - in IE6 and Opera, in an iframe within a page which has left padding (or margin - it makes no difference) for the content, leaving room for a left hand menu: the iframe is set to width: 100%. In FF, it takes this as 100% of the div it is in, as intended. But IE takes it as 100% of the screen width, and therefore puts some of the iframe off screen to the right: http://ied.gospelcom.net/churchdesign-exampletest.php I find it ever harder to understand because in other very similar situations I do have 100% iframes sitting happily within a div of less than full screen width. Anyone know what is going wrong here? Or the proper way to do it? Grateful thanks. Tony I made this administration system in php.. its a site php site with a table with a menu, under it is a iframe.. the code for the iframe = Code: <iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" width="524" height="100%" src="news.php"></iframe> then the news.php seems to fail when i scroll in firefox, since the bg in the iframe changes from #F4F4F4 to #FFFFFF in the new space thats uncovered when i scroll.. the bgcolor and bgimage is defined by css, heres the code: Code:
.bodyiframe {
background-color: #F4F4F4;
background-image: url(../images/bgiframe.gif);
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}
It works fine in explorer 7, but firefox 0.8 cant handle it!.. plz help Is it possible to control the attributes of an IFRAME with CSS? 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 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 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. 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 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 Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I've fiddled with the widths and container widths with no luck. Can anyone tell me why this is happening? thanks -Sean 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! 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. 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. 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. 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? |
|||||||