CSS - Best Way To Replace <iframe>

hey,

I got a form and use javascript to perform simple validations on it.

When all form fields are valid, ready_for_submit is true and i want to show a div saying everything is filled in correctly. (a different div is shown when not all fields are filled in correctly).

I got that working but what i want is that both div's have the same position. Now when one div is hidden, an empty line is shown, and below that line the visible div is shown. (Its the other way around when the other div is hidden.)

html Code:
Original - html Code <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td>

  

    <td colspan="4" align="right">
    <div id="not_ready" style="visibility: visible;">
        <img name='img_subRegister' src='images/invalid.gif'>
        Not all required data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    <div id="ready" style="visibility: hidden;">
        <img name='img_subRegister' src='images/valid.gif'>
        All data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    </td>

How can i set both div's on the same position?

Changing visibility is done with javascript like this:
javascript Code:
Original - javascript Code if(ready_for_submit == false){ document.getElementById("not_ready").style.visibility = "visible"; document.getElementById("ready").style.visibility = "hidden"; return; } else{ document.getElementById("not_ready").style.visibility = "hidden"; document.getElementById("ready").style.visibility = "visible"; }

  

  


 if(ready_for_submit == false){


     document.getElementById("not_ready").style.visibility = "visible";


     document.getElementById("ready").style.visibility = "hidden";


     return;


 } else{


     document.getElementById("not_ready").style.visibility = "hidden";


     document.getElementById("ready").style.visibility = "visible";


 } 

thanks in advance.

I'm creating a site with a few div layers. Like so:

Code:

<div id="mainDiv">
	<div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div>
	<div id="siteContent">
		<div id="mainContent">
			<div id="header">
				<a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a>
				<div id="orangeNav">Top Navigation</div>
			</div>
			<div id="content">
				 ****** Need left navigation and right content here**** 			</div>
		</div>
		<div id="bottomNav">Bottom Navigation Here</div>
		<div id="footer">Footer Info here</div>
	</div>
</div>

The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design.

The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags.

I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time.

In case you need it, here's the style sheet:

Code:

body {
 background-color: #1D1F12;
 margin: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
	position: relative;
	top: 0px;
	left: 0px;
	width: 767px;
	padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
	position: relative;
	width: 757px;
	padding-bottom: 8px;
	text-align: right;
	font-size: 10px;
	color: #999999;
}
#topLinks .linkStyle {
	font-size: 10px;
	color: #999999;
	text-decoration: none;
}
#topLinks .linkStyle:hover {
	text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
	position: relative;
	width: 741px;
	padding: 14px 13px 35px 13px;
	background-color: #393D23;
}
#mainContent {
	position: relative;
	border: 3px solid #ffffff;
}
#header {
	position: relative;
	height: 104px;
	background-image: url(img/bg-header.gif);
	border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
	position: relative;
	height: 25px;
	background-color: #993300;
	border-top: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	text-align: center;
	vertical-align: middle;
}
#orangeNav .navImg {
	padding: 4px 8px 0px 8px;
}
#content {
	position: relative;
	background-image: url(img/bg-content.gif);
	padding: 0px 0px 25px 0px;
}
#leftSide{
	position: relative;
	left: 9px;
	top: 12px;
	width: 150px;
}
#nav {
	position: relative;
	width: 150px;
	border: 1px solid #A8A81F;
	background-color: #E0DD92;
	padding-top: 5px;
}
#nav .navItem {
	padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
	background-color: #E9E6B0;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link:hover {
	text-decoration: underline;
}
#rightSide{
	position: relative;
	left: 200px;
	top: 12px;
	width: 520px;
	font-size: 11px;
	border: 1px solid red;
}
#bottomNav {
	position: relative;
	background-color: #989A8C;
	padding: 2px 25px 2px 0px;
	text-align: right;
}
/* START: footer area and related styles */
#footer {
	position: relative;
	padding: 20px 0px 0px 0px;
	color: #BFC1B8;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}
#footer .linkStyle {
	font-size: 10px;
	color: #BFC1B8;
	text-decoration: none;
}
#footer .linkStyle:hover {
	text-decoration: underline;
}

Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide

Hello

I would like to have some text replaced after, for example 10 seconds, with new text. And with fading in and fading out

Example given:
after opening page
fade in - show text1 "Welkom to the pleasure dome" - fade out
fade in - after 10 sec "For the latest Items, go to..." - fade out
fade in -after 10 sec "For ordering , call 0800-orderIT" - fade out

and so on. But al on the same place ( footer )

I did see this somewhere, but I am not sure if it was CSS only.

Thanks

I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative.

I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items.
I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that?

Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem?

Hi--

I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help!

I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png.

In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background.

My code:
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>

<body>

<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>

</html>

Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:

<input type="image" src="..."

and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?

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!

Is it possible to control the attributes of an IFRAME with CSS?

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

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">&nbsp;</div>
<div class="right">&nbsp;</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 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.

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?