|
CSS - Iframe Inherit Css
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? Similar TutorialsHello everyone! my apologies if this is a dumb/old question - I did a search but didn't find anything like this... Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes. Or would I be better ditching the iframes and using hidable DIV's? cheers guys! Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way? Will this work as I hope? Code:
div.news {
width:690px;
padding:10px;
margin:0;
float:left;
background-color: #DDDDDD;
}
.button_div {
width:180px;
padding:10px;
background-color:#953956;
cursor:pointer;
}
.body_text {
color:#284186;
line-height:130%;
font-size:11px;
}
@media print {
div.news {background-color:#EEEEEE;}
.button_div {display:none;}
.body_text {color:#000000;}
}
Also, is it ok to do this? Any issues I should be aware of? Code:
// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}
// HTML
<p class="italic large">Italic and large.</p>
Thanks, Hi all 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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
body {
}
.page {
background-color: red;
}
.menu {
float: left;
width: 100px;
background-color: yellow;
height: 100%;
}
.content {
margin-left: 101px;
background-color: blue;
height: 100%;
}
</style>
</head>
<body>
<div class="page">
<div class="menu">asdf</div>
<div class="content">content<br />asdf</div>
</div>
</body>
</html>
Is there a way to make the yellow div.menu exactly as high as the height of the enclosing div.page? So div.menu and div.content have always the same length no matter which of them has the longer content? Thanks for help Josh Here is a small snippet of my CSS: Code:
body {
font-family: verdana, arial, sans-serif;
color: #0A142B;
background-color: #006699;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
}
#main {
background-color:#FFFFFF;
height: inherit;
padding: 5px;
}
My question is that in the <div id="main"> how can I get that to set the height to 100% from the body, I have tried both setting it to 100% and inherit and it just stays the same height. Hello there, I have a question about floating and automatic heights. First, i don't want to use tables becouse of layout etc... I want to have a "row" with 3 seperate "columns". Each "Cell" should have the same height as the heighest "Cell". Now this is where the problem is. The height isn't correct . I Tryed height: auto and 100%. But nothing is working. How can i fix this? Thx in advance. CSS: Code:
.divRow {
float: left;
position: relative;
height: auto;
margin: 2px 0;
}
.columnTo, .columnMessage, .columnDate {
height: 100%;
float: left;
padding: 0;
padding-right: 2px;
background-color: #f0f0f0;
vertical-align: middle;
}
.columnTo {
width:75px;
overflow: hidden;
background-color: #ff0000;
}
.columnMessage {
margin-left: 2px;
width:270px;
overflow: hidden;
background-color: #00ff00;
}
.columnDate {
margin-left: 2px;
width:40px;
overflow: hidden;
background-color: #0000ff;
}
HTML Code: <div class="divRow"><div class="columnTo" style="background:#ffad39">Column#1:</div><div class="columnMessage" style="background:#ffad39">Column#2:</div><div class="columnDate" style="background:#ffad39">Column#3:</div><div class="clearBoth"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? 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! 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>
Is it possible to control the attributes of an IFRAME with CSS? 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 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. 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 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. 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);
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'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. |
|||||||