|
CSS - Problem With Javascript Iframe And Css
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 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 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! 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. 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 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 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 Hi Everyone, I am working on redesigning a website in WordPress that I had previously built in HTML. Most things seems to be working well, except some styling of some JavaScript. The script has a special hover image, but in the new site I can't get the descriptions to be inside the hover box. You can see an example of the old, correctly working site he e3ncw [dot] com And the new, broken one he e3ncw [dot] com /page/1 If you hover over any button in the sidebar you'll see the problem. I'm using float:left on both the image and the description, but can't get it to work. Here's the current CSS I'm using: Code: .sb-blocks li em {
background: url(images/hover.png) no-repeat center top;
width: 350px;
height: 200px;
position: absolute;
top: 0px;
left: -100px;
padding: 5px 0 0;
font-style: normal;
z-index: 2;
display: none;
}
p.url {
font-weight: bold;
color: #a82125;
text-align: center;
font-size: 1em;
line-height: .5em;
}
.sb-blocks em img {
float: left;
padding: 5px 5px 15px 15px;
}
.sb-blocks p.description {
color: #a82125;
float: left;
width: 275px;
}
Any help is greatly appreciated. Thanks! Trying to change 'traditional' mailto link to one using CSS. Currently, I use JS to hide email address from spam bots as follows: Sample page code: Code: <script language="javascript"> var add1="me" var add2="mydomain" var add3=".com" var text = "Text for text link" </SCRIPT> email: <script language="javascript" SRC="mail2link.js"> Sample .js code: Code: <!--
var subject="?Subject=Subject line in email"
document.write("<a href=" + "mail" + "to:" + add1 +"%40"+ add2 +add3+subject+">" + text +"</a>")
//-->
Created CSS email link because wanted 2 different colours of mailto link on one page. Therefore use class= as follows: Code: email: <a href="mailto:me@mydomain.com?Subject=Subject to appear in email prog" class="link1"> Link text with appropriate style sheet in directory. HOWEVER, when I trying to include the class="link1" line within the above setup I fail miserably. I tend to get the class= coding echosed on the screen. I've tried including it in .js file with single quotes, I've tried making it a variable and calling it, but all to no avail. Suggestions? If this is not clear enough, I'll post complete sample html+.js+CSS Robert Hi all, I'm sure this is an easy fix, but I can't get it. I have a javascript rollover image swap, and can only get it to validate if I don't use the border="0" attribute. The site is to be pure css, but the course requires me to use some javascript to show understanding. So it works fine, but showing a blue border in ie, and a red border in mozilla. My question is, if you can help, how to hide/get rid of the border, and have validate at the same time. Cheers Solar. html link http://darkspeed.atspace.com/Javascript.htm css link http://darkspeed.atspace.com/speedstyle.css the div is #roll, hope this makes sense.. thanks. And if I'm doing it all wrong any advice would be appreciated.. Thanks again. Hi, I'm new to CSS (and Javascript) and am wondering how to fix a <div> overflow on my site (www.logicland.co.uk). here is my CSS code: Quote: /* Font CSS */ body { font-family: Arial, Helvetica, sans-serif; } #footer { font-size: 11px; } /* Layout CSS */ body { padding: 0px; margin: 0px; background-color: #D0DFEF; } #container { margin: 10px; border: 1px solid white; background-color: #6699FF; } #header { padding: 1px 7px 1px 7px; border-bottom: 1px solid white; height: 60px; background-color: #6C86DC; } #columnA { width: 150px; position: relative; float: left; padding: 5px; } #columnB { margin-left: 160px; margin-right: 160px; padding: 10px; border-left: 1px solid white; border-right: 1px solid white; background-color: #CCD5F2; } #columnC { width: 150px; position: relative; float: right; padding: 5px; } #footer { padding: 1px 3px 1px 3px; border-top: 1px solid white; text-align: right; background-color: #DDE3FF; } Is there simply a property I can change to cause the right <div> to push the footer down like the middle column does. Any info would be great. Cheers, BuckRogers01 I have a problem involving the ie only filter alpha(). My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! I have been told by a client that my dreamweaver-generated drop-down Javascript menu goes behind the flash movies in Safari. HERE IS THE LINK Since I am not using absolute <divs /> is there any to control the "Z" index to make sure the drop down menu goes above the flash movie? Thanks. 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 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>
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 ok there is this trick that i saw that you can get a div to "act" as an iframe, by that i mean have it with a scroll bar and all but not call the info from a diff page like an iframe, anyone know what im talking about? |
|||||||