How can I change IFRAME dynamically? / Glitch with Drop Down menus

**Cyclone** · 02-29-2008, 02:32 AM

http://www.inspiredvisuals.com

Is there a way to change the IFRAME attributes dynamically so when I click on a link it changes the IFRAME scrolling to 'yes'.

My problem is in Firefox the welcome page to my site which is an IFRAME has scrollbars. But in IE it does not. In IE the splash image is centered but in Firefox it is not.

When I set the scrolling="no" command Both IE and FF work fine and the position of the splash image is the same.

But I have pages on my site that need scrollbars ex. my resume. I want to be able to set the scrollbars="yes" so people can see my resume.

Also in IE my dropdown menus are not centered with the "titles" but in FF they are. hmm

Sorry if this is the wrong forum but I think maybe some scripting may be needed to configure the IFRAME after the page is loaded?

Code to the index page that contains the IFRAME.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>Chris Schlosser's Portfolio</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<style type="text/css">



body {
	font-family: arial, helvetica, serif;
	background-color: #212630;
	FONT-SIZE: 16px;
	background= #212630;
        BACKGOUND: url(Images/MenuBG.jpg);
	padding: 2em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: #212630;
	padding: .5em 0;
	Border: 6px double #276F91;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 64.5em;

}
html>body #content {
	width: 64.5em;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #276F91;
}

a:active {
	color: #779900;
}

a:hover {
	text-decoration: underline;
	
}

h1 {
	text-align: center;
	padding: 0 0 0.25em 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	
}

#nav a {
	font-weight: bold;
	color: #B4AEAE;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #B4AEAE;
	padding: 0.2em 10px;
	
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid white;
	border-width: 0 5px;
	color: white;
	text-decoration: underline;
}

li {
        
	float: left;
	position: relative;
	width: 12.0em;
	text-align: center;
	cursor: default;
	BACKGROUND-COLOR: #212630;
	BORDER-RIGHT: #276F91 5px solid;
        BORDER-TOP: #276F91 1px solid;
        BORDER-LEFT: #276F91 5px solid;
        BORDER-BOTTOM: #276F91 1px solid;
}

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background: url(Images/MenuBG.jpg) center no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 2px #276F91;
	border-left: solid 2px #276F91;
	border-bottom: solid 2px #276F91;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

hr {
	display: none;
}

p {
	clear: left;
	background: url(Images/MenuBGhmm.jpg) center left no-repeat;
	padding: 1em 1em 0 1em;
	margin: 0;
}

p.image {
	float: right;
	font-size: 0.8em;
	text-align: center;
	color: red;
	padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
	display: block;
	border: 1px solid #276F91;
}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--






startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">

<center><img src="Images/DigitalArt.jpg" alt="Chris Schlosser's Portfolio"/><img src="Images/Logo.gif" alt="Chris Schlosser's Portfolio"/><img src="Images/Photography.jpg" alt="Chris Schlosser's Portfolio"/></center>







<hr />

<ul id="nav">

	<li id="first">
		<div><a href="Pages/Welcome.html" target="main">Main</a></div>
	

	<li>
		<div><a href="">Digital Art</a></div>
		<ul>
			<li><a href="Pages/2D.html" target="main"><SPAN TITLE="2D">2D</SPAN></A></li> 
			<li><a href="Pages/3D.html" target="main"><SPAN TITLE="3D">3D</SPAN></A></li> 
			<li><a href="Pages/Animations.html" target="main"><SPAN TITLE="Animations">Animations</SPAN></A></li> 
			
			<li><img src="Images/MothThumb.gif"alt="Eight-Spotted Forester Moth" /></li>
		</ul>
	</li>

</li>

	<li>
		<div><a href="">Photography</a></div>
		<ul>
			<li><a href="Pages/Flora.html" target="main"><SPAN TITLE="Plants">Flora</SPAN></A></li>
                        <li><a href="Pages/Fauna.html" target="main"><SPAN TITLE="Animals">Fauna</SPAN></A></li>
			<li><a href="Pages/Scenics.html" target="main"><SPAN TITLE="Scenics">Scenics</SPAN></A></li>
                        <li><a href="Pages/Buildings.html" target="main"><SPAN TITLE="Buildings">Buildings</SPAN></A></li>
			<li><a href="Pages/Abstract+Objects.html" target="main"><SPAN TITLE="Objects">Abstract / Objects</SPAN></A></li>
			<li><a href="Pages/Store.html" target="main"><SPAN TITLE="Buy My Photos">Buy My Photos</SPAN></A></li>			
			<li><img src="Images/BleedingHeartsThumb.jpg" border: 2  alt="Bleading Heart Flowers" /></li>
		</ul>
	</li>

<li>
		<div><a href="">About</a></div>
		<ul>
			<li><a href="Pages/Bio.html" target="main"><SPAN TITLE="Bio">Bio</SPAN></A></li>
			<li><a href="Pages/Resume.html" target="main"><SPAN TITLE="Resume">Resume</SPAN></A></li>
			<li><a href="mailto:Cyclone.Chris@gmail.com"><SPAN TITLE="How to contact me">Contact</SPAN></A></li>
			
		</ul>
	</li>

	<li id="last">
		<div><a href="">Links</a></div>
		<ul>
			<li><a href="http://www.cgtalk.com" target="_blank"><SPAN TITLE="CGTalk" litUp1>CGTalk</SPAN></A></li>
			<li><a href="http://www.3dtotal.com" target="_blank"><SPAN TITLE="3DTotal" litUp1>3DTotal</SPAN></A></li>
			<li><a href="http://www.3dartisan.net" target="_blank"><SPAN TITLE="3D Artisan" litUp1>3D Artisan</SPAN></A></li>
			<li><a href="http://www.dreamstime.com" target="_blank"><SPAN TITLE="Dreamstime Stock Photo" litUp1>Dreamstime Stock Photo</SPAN></A></li>
			<li><a href="http://www.bigstockphoto.com" target="_blank"><SPAN TITLE="Big stock Photo" litUp1>Big Stock Photo</SPAN></A></li>

		</ul>
	</li>



</ul>

<hr />

<hr />

<IFRAME SRC="Pages/Welcome.html" name="main" Width="1020" Height="555" scrolling="auto" align="middle" FRAMEBORDER="0"></IFRAME>


<center><FONT COLOR= "#B4AEAE"><p style="font-size: 9px">Copyright 2007 All Content Created by Chris Schlosser</p></FONT></center>

</div>

</body>

</html>

</center>

Thank you very much.

**jscheuer1** · 02-29-2008, 04:08 AM

You can't change the iframe scrolling dynamically by accessing its scrolling attribute, except in FF, at least not that I could tell. However, if you set the iframe's scrolling to auto:

Code:

<iframe id="sns" src="test.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe>

You can control what it does by the page that is loaded into it. Even a huge page that has this style on it:

Code:

<style type="text/css">
html, body {
overflow:hidden;
}
</style>

will not cause scrollbars when loaded into the iframe. If you want another page to have normal, as needed scrolling, just don't set the overflow for that page.

**Cyclone** · 02-29-2008, 05:27 AM

thanks for your reply. It did not work. I have set scrolling="auto" on my index page with the iframe code and pasted the overflow code into the welcome page but FF still shows the scrollbars.

also on another thread you said "The attribute scrolling="no" is a better choice." will the auto command cause problems with other browsers?

Page with overflow command

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT language="JavaScript"> 
<!--hide 

function newwindow1() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Animations/DemoReel(2007).html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

//--> 
</SCRIPT> 



<STYLE TYPE="text/css">
<!-- 

BODY {margin-left: 18pt}
BODY {margin-right: 0pt}
BODY {margin-top: 0pt}
BODY {margin-bottom:0pt}


-->
scrollbar-arrow-color: '#276F91'; scrollbar-track-color:'#276F91'; 
scrollbar-shadow-color: '#338BD4'; scrollbar-highlight-color:'lightblue'; 
scrollbar-3dlight-color:'#7C92B8'; scrollbar-darkshadow-
color:'black'; } -->

 
a {text-decoration: underline;}

a:link {color: #B4AEAE;}

a:visited {color: #B4AEAE;}

a:active {color: white;}

a:hover {text-decoration: underline; color: white; style="border-color:white"}

html, body {
overflow:hidden;
}

</STYLE>



<body bgcolor="#212630" text="#7C92B8" link="#7C92B8" vlink="#7C92B8" alink="#7C92B8">


<center><h1><FONT COLOR= "#B4AEAE"></FONT></br></h1></center>

<center><FONT COLOR= "#9C2127"><img src="http://www.inspiredvisuals.com/Photography/Images/Bubble.jpg" border = off padding= "100"></font></center>


<center><br><FONT COLOR= "#7C92B8" style="font-size:21px;">Welcome to my portfolio. I am a 3D Artist and Photographer. Please view my artwork using the above menus.</FONT></br></center>

<center><br><a href="javascript:newwindow1()" SPAN TITLE="2007 Demo Reel">Demo Reel</a></br></center>

<center><FONT COLOR= "#7C92B8" style="font-size:19px;"><a href = "http://www.inspiredvisuals.com/Pages/Updates.html" target="main"><SPAN TITLE="Updates" >Updates - August 26th 2007</SPAN></A></A></center>


</HTML>
</HEAD>

**jscheuer1** · 02-29-2008, 06:04 AM

Works here in FF, Opera, and IE using your exact page from your post which I named test_2.htm. It shows in this page with no scrollbars on the iframe:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<iframe name="sns" src="test.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe><br>
<a href="test.htm" target="sns">Test</a> <a href="test_2.htm" target="sns">Test 2</a>
</body>
</html>

Here is the code for my test.htm, which does show a vertical scrollbar in the iframe:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
Test
<p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p><p>Hey</p>
</body>
</html>

Using the links on my top page to switch between test and test 2, finds the iframe with a vertical scrollbar for test.htm and without scrollbars for your page (called test_2.htm for my experiment).

Edit: However, there are errors on your page, you cannot quote color values:

Code:

scrollbar-arrow-color: '#276F91'; scrollbar-track-color:'#276F91'; scrollbar-shadow-color: '#338BD4'; scrollbar-highlight-color:'lightblue'; scrollbar-3dlight-color:'#7C92B8'; scrollbar-darkshadow- color:'black'; } -->

And that arrow shouldn't be there either. Here:

Code:

a:hover {text-decoration: underline; color: white; style="border-color:white"}

should be:

Code:

a:hover {text-decoration: underline; color: white; border-color:white;}

These may be messing things up for you, or you may simply be working from a cached copy of your page from before when it wasn't working, or your iframe isn't right. Or, who knows. A link to your full setup would help me sort things out.

**Cyclone** · 02-29-2008, 07:45 AM

Hey John thanks for your suggestions. The hide overflow command works now

The problem was a missing </body> tag. I also fixed the things you pointed out.

I am still a little concerned about two things though. Firstly the drop down menus aren't aligned properly in IE. The user has to move their mouse to the right when all they should have to do is move the mouse down without thinking. They work fine in FF though...

Second. If you open up my site in IE and Firefox and switch between the two you will see that the format is different. The height of the page(border is different)?

Thanks again for your help. I should go through my website and clean up the code. I am beginer to all this coding stuff but i'm learning.

code and link to main site(index)

http://www.inspiredvisuals.com

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>Chris Schlosser's Portfolio</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<style type="text/css">



body {
	font-family: arial, helvetica, serif;
	background-color: #212630;
	FONT-SIZE: 16px;
	background= #212630;
        BACKGOUND: url(Images/MenuBG.jpg);
	padding: 2em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: #212630;
	padding: .5em 0;
	Border: 6px double #276F91;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 64.5em;

}
html>body #content {
	width: 64.5em;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #276F91;
}

a:active {
	color: #779900;
}

a:hover {
	text-decoration: underline;
	
}

h1 {
	text-align: center;
	padding: 0 0 0.25em 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	
}

#nav a {
	font-weight: bold;
	color: #B4AEAE;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #B4AEAE;
	padding: 0.2em 10px;
	
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid white;
	border-width: 0 5px;
	color: white;
	text-decoration: underline;
}

li {
        
	float: left;
	position: relative;
	width: 12.0em;
	text-align: center;
	cursor: default;
	BACKGROUND-COLOR: #212630;
	BORDER-RIGHT: #276F91 5px solid;
        BORDER-TOP: #276F91 1px solid;
        BORDER-LEFT: #276F91 5px solid;
        BORDER-BOTTOM: #276F91 1px solid;
}

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background: url(Images/MenuBG.jpg) center no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 2px #276F91;
	border-left: solid 2px #276F91;
	border-bottom: solid 2px #276F91;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

hr {
	display: none;
}

p {
	clear: left;
	background: url(Images/MenuBGhmm.jpg) center left no-repeat;
	padding: 1em 1em 0 1em;
	margin: 0;
}

p.image {
	float: right;
	font-size: 0.8em;
	text-align: center;
	color: red;
	padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
	display: block;
	border: 1px solid #276F91;
}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--






startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">

<center><img src="Images/DigitalArt.jpg" alt="Chris Schlosser's Portfolio"/><img src="Images/Logo.gif" alt="Chris Schlosser's Portfolio"/><img src="Images/Photography.jpg" alt="Chris Schlosser's Portfolio"/></center>







<hr />

<ul id="nav">

	<li id="first">
		<div><a href="Pages/Welcome.html" target="main">Main</a></div>
	

	<li>
		<div><a href="">Digital Art</a></div>
		<ul>
			<li><a href="Pages/2D.html" target="main"><SPAN TITLE="2D">2D</SPAN></A></li> 
			<li><a href="Pages/3D.html" target="main"><SPAN TITLE="3D">3D</SPAN></A></li> 
			<li><a href="Pages/Animations.html" target="main"><SPAN TITLE="Animations">Animations</SPAN></A></li> 
			
			<li><img src="Images/MothThumb.gif"alt="Eight-Spotted Forester Moth" /></li>
		</ul>
	</li>

</li>

	<li>
		<div><a href="">Photography</a></div>
		<ul>
			<li><a href="Pages/Flora.html" target="main"><SPAN TITLE="Plants">Flora</SPAN></A></li>
                        <li><a href="Pages/Fauna.html" target="main"><SPAN TITLE="Animals">Fauna</SPAN></A></li>
			<li><a href="Pages/Scenics.html" target="main"><SPAN TITLE="Scenics">Scenics</SPAN></A></li>
                        <li><a href="Pages/Buildings.html" target="main"><SPAN TITLE="Buildings">Buildings</SPAN></A></li>
			<li><a href="Pages/Abstract+Objects.html" target="main"><SPAN TITLE="Objects">Abstract / Objects</SPAN></A></li>
			<li><a href="Pages/Store.html" target="main"><SPAN TITLE="Buy My Photos">Buy My Photos</SPAN></A></li>			
			<li><img src="Images/BleedingHeartsThumb.jpg" border: 2  alt="Bleading Heart Flowers" /></li>
		</ul>
	</li>

<li>
		<div><a href="">About</a></div>
		<ul>
			<li><a href="Pages/Bio.html" target="main"><SPAN TITLE="Bio">Bio</SPAN></A></li>
			<li><a href="Pages/Resume.html" target="main"><SPAN TITLE="Resume">Resume</SPAN></A></li>
			<li><a href="mailto:Cyclone.Chris@gmail.com"><SPAN TITLE="How to contact me">Contact</SPAN></A></li>
			
		</ul>
	</li>

	<li id="last">
		<div><a href="">Links</a></div>
		<ul>
			<li><a href="http://www.cgtalk.com" target="_blank"><SPAN TITLE="CGTalk" litUp1>CGTalk</SPAN></A></li>
			<li><a href="http://www.3dtotal.com" target="_blank"><SPAN TITLE="3DTotal" litUp1>3DTotal</SPAN></A></li>
			<li><a href="http://www.3dartisan.net" target="_blank"><SPAN TITLE="3D Artisan" litUp1>3D Artisan</SPAN></A></li>
			<li><a href="http://www.dreamstime.com" target="_blank"><SPAN TITLE="Dreamstime Stock Photo" litUp1>Dreamstime Stock Photo</SPAN></A></li>
			<li><a href="http://www.bigstockphoto.com" target="_blank"><SPAN TITLE="Big stock Photo" litUp1>Big Stock Photo</SPAN></A></li>

		</ul>
	</li>



</ul>

<hr />

<hr />

<IFRAME SRC="Pages/Welcome.html" name="main" Width="1020" Height="555" scrolling="auto" align="middle" FRAMEBORDER="0"></IFRAME>


<center><FONT COLOR= "#B4AEAE"><p style="font-size: 9px">Copyright 2008 All Content Created by Chris Schlosser</p></FONT></center>

</div>

</body>

</html>

</center>

later

**jscheuer1** · 02-29-2008, 03:10 PM

As far as your menu's drop downs lining up to the center of their triggers in IE, that's because of this style (highlighted):

Code:

li {
        
	float: left;
	position: relative;
	width: 12.0em;
	text-align: center;
	cursor: default;
	BACKGROUND-COLOR: #212630;
	BORDER-RIGHT: #276F91 5px solid;
        BORDER-TOP: #276F91 1px solid;
        BORDER-LEFT: #276F91 5px solid;
        BORDER-BOTTOM: #276F91 1px solid;
}

Get rid of it, or if that doesn't help (you have so much centering going on in your source code, some centering may bleed through from parent elements), set it explicitly left:

Code:

li {
        
	float: left;
	position: relative;
	width: 12.0em;
	text-align: left;
	cursor: default;
	BACKGROUND-COLOR: #212630;
	BORDER-RIGHT: #276F91 5px solid;
        BORDER-TOP: #276F91 1px solid;
        BORDER-LEFT: #276F91 5px solid;
        BORDER-BOTTOM: #276F91 1px solid;
}

Oh, and as the li elements are dynamically styled as a part of this menu, more may need to be done, let's try the above out first.

You are a bit 'center happy'. I've noticed this with some beginner and intermediate coders. You really shouldn't use the center tag. And, when aligning things to center, you should use as little of that as is required to achieve the effect you want. Also, there are other ways of centering some things without resorting to alignment or text-alignment, or the center tag. But explaining that's probably best left to another time.

As for page height, I don't see anything like that. Either I misunderstood, or it is so small that only you can see it. I might notice too if you told me right where to look to see a difference. Or, our system may be presenting the page differently, such that there is no real difference here.

**Cyclone** · 02-29-2008, 09:43 PM

I changed the code to "text-align: left;" and that fixed the menus so that they are centered but now all the text is aligned to the 'left'. I found a way to fix the text but that means entering <center> on each li element.

But as you said i'm center happy, so I'm not sure if this is the right thing to do. I use <center> a lot cuzz it seems to work frequently like in this case but I can see how it can mess things up If I don't understand the logic of how it relates to the rest of the code.

In regards to the page height. I am refering to the the double green border that encompasses my site. In FF it seems to be 10pixels taller and makes the page look a little more elongated then I like. But its not that big a deal to me. If its an easy fix great but if not don't bother.

http://www.inspiredvisuals.com/index2.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>Chris Schlosser's Portfolio</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<style type="text/css">



body {
	font-family: arial, helvetica, serif;
	background-color: #212630;
	FONT-SIZE: 16px;
	background= #212630;
        BACKGOUND: url(Images/MenuBG.jpg);
	padding: 2em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: #212630;
	padding: .5em 0;
	Border: 6px double #276F91;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 64.5em;

}
html>body #content {
	width: 64.5em;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #276F91;
}

a:active {
	color: #779900;
}

a:hover {
	text-decoration: underline;
	
}

h1 {
	text-align: center;
	padding: 0 0 0.25em 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	
}

#nav a {
	font-weight: bold;
	color: #B4AEAE;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #B4AEAE;
	padding: 0.2em 10px;
	
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid white;
	border-width: 0 5px;
	color: white;
	text-decoration: underline;
}

li {
        
	float: left;
	position: relative;
	width: 12.0em;
	text-align: left;
	cursor: default;
	BACKGROUND-COLOR: #212630;
	BORDER-RIGHT: #276F91 5px solid;
        BORDER-TOP: #276F91 1px solid;
        BORDER-LEFT: #276F91 5px solid;
        BORDER-BOTTOM: #276F91 1px solid;
}

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background: url(Images/MenuBG.jpg) center no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 2px #276F91;
	border-left: solid 2px #276F91;
	border-bottom: solid 2px #276F91;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

hr {
	display: none;
}

p {
	clear: left;
	background: url(Images/MenuBGhmm.jpg) center left no-repeat;
	padding: 1em 1em 0 1em;
	margin: 0;
}

p.image {
	float: right;
	font-size: 0.8em;
	text-align: center;
	color: red;
	padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
	display: block;
	border: 1px solid #276F91;
}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--






startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">

<center><img src="Images/DigitalArt.jpg" alt="Chris Schlosser's Portfolio"/><img src="Images/Logo.gif" alt="Chris Schlosser's Portfolio"/><img src="Images/Photography.jpg" alt="Chris Schlosser's Portfolio"/></center>







<hr />

<ul id="nav">

	<li id="first">
		<div><a href="Pages/Welcome.html" target="main">Main</a></div>
	

	<li>
		<div><a href="">Digital Art</a></div>
		<ul>
			<li><a href="Pages/2D.html" target="main"><SPAN TITLE="2D">2D</SPAN></A></li> 
			<li><a href="Pages/3D.html" target="main"><SPAN TITLE="3D">3D</SPAN></A></li> 
			<li><a href="Pages/Animations.html" target="main"><SPAN TITLE="Animations">Animations</SPAN></A></li> 
			
			<li><img src="Images/MothThumb.gif"alt="Eight-Spotted Forester Moth" /></li>
		</ul>
	</li>

</li>

	<li>
		<div><a href="">Photography</a></div>
		<ul>
			<li><a href="Pages/Flora.html" target="main"><SPAN TITLE="Plants">Flora</SPAN></A></li>
                        <li><a href="Pages/Fauna.html" target="main"><SPAN TITLE="Animals">Fauna</SPAN></A></li>
			<li><a href="Pages/Scenics.html" target="main"><SPAN TITLE="Scenics">Scenics</SPAN></A></li>
                        <li><a href="Pages/Buildings.html" target="main"><SPAN TITLE="Buildings">Buildings</SPAN></A></li>
			<li><a href="Pages/Abstract+Objects.html" target="main"><SPAN TITLE="Objects">Abstract / Objects</SPAN></A></li>
			<li><a href="Pages/Store.html" target="main"><SPAN TITLE="Buy My Photos">Buy My Photos</SPAN></A></li>			
			<li><img src="Images/BleedingHeartsThumb.jpg" border: 2  alt="Bleading Heart Flowers" /></li>
		</ul>
	</li>

<li>
		<div><a href="">About</a></div>
		<ul>
			<li><a href="Pages/Bio.html" target="main"><SPAN TITLE="Bio">Bio</SPAN></A></li>
			<li><a href="Pages/Resume.html" target="main"><SPAN TITLE="Resume">Resume</SPAN></A></li>
			<li><a href="mailto:Cyclone.Chris@gmail.com"><SPAN TITLE="How to contact me">Contact</SPAN></A></li>
			
		</ul>
	</li>

	<li id="last">
		<div><a href="">Links</a></div>
		<ul>
			<li><a href="http://www.cgtalk.com" target="_blank"><SPAN TITLE="CGTalk" litUp1>CGTalk</SPAN></A></li>
			<li><a href="http://www.3dtotal.com" target="_blank"><SPAN TITLE="3DTotal" litUp1>3DTotal</SPAN></A></li>
			<li><a href="http://www.3dartisan.net" target="_blank"><SPAN TITLE="3D Artisan" litUp1>3D Artisan</SPAN></A></li>
			<li><a href="http://www.dreamstime.com" target="_blank"><SPAN TITLE="Dreamstime Stock Photo" litUp1>Dreamstime Stock Photo</SPAN></A></li>
			<li><a href="http://www.bigstockphoto.com" target="_blank"><SPAN TITLE="Big stock Photo" litUp1>Big Stock Photo</SPAN></A></li>

		</ul>
	</li>



</ul>

<hr />

<hr />

<IFRAME SRC="Pages/Welcome.html" name="main" Width="1020" Height="555" scrolling="auto" align="middle" FRAMEBORDER="0"></IFRAME>


<center><FONT COLOR= "#B4AEAE"><p style="font-size: 9px">Copyright 2008 All Content Created by Chris Schlosser</p></FONT></center>

</div>

</body>

</html>

</center>

Thanks

**jscheuer1** · 03-01-2008, 05:33 AM

I think you went a little overboard getting rid of center, but that might be good. You should only have it where it does what you need it to, while not creating other problems. On your index2.html page, add these styles:

Code:

li a {
display:block;
text-align:center;
}

li li, li div {
text-align:center;
}

I still don't get the bit about the height of the page, but I will keep looking.

**Cyclone** · 03-01-2008, 06:28 AM

ok works now. thank you. I don't know why the tutorial I used did not include some of these things. In order to see the hight difference you have to line up the windows one on top of each other.

This is a bit off topic so you can ignore this but I was wondering if its possible to change the border color depending on what browser the user is using. I am using that "floating image" script that you were helping me with in another forum and I changed the boderstyle to "Ridge" but there is a big color-shift between Firefox and IE, FF is way too bright. I was going to via script try to get it to display a different color depending on the browser. I searched google but I have no idea where to start.

Thanks.

**Cyclone** · 03-01-2008, 06:29 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<SCRIPT language="JavaScript"> 
<!--hide 

function newwindow() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/BleedingHearts.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

function newwindow2() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/BranchWithRainDrops.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

function newwindow3() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/AppleBlossoms.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

function newwindow4() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/Mushrooms.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 


function newwindow5() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/FlowersWithRaindrops.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

function newwindow6() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/FallColours.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

function newwindow7() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/YellowFlower.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
} 

function newwindow8() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/LilacBush(TimeLapse).html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
}

function newwindow9() 
{ 
window.open('http://www.inspiredvisuals.com/Pages/Photography/Flora/AppleBlossoms2.html','jav','location=yes,directories=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes'); 
}  


//--> 
</SCRIPT> 

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or 
	 put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;	
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20;	// how far from mouse to show tip
var offY= -175; 
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#7C92B8";
var tipBgColor= "#212630"; 
var tipBorderColor= "#7C92B8";
var tipBorderWidth= 6;
var tipBorderStyle= "Ridge";
var tipPadding= 0;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing: 
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('http://inspiredvisuals.com/Photography/Thumbnails/Flora/test2.jpg','Apple Blossoms');
messages[1] = new Array('http://inspiredvisuals.com/Photography/Thumbnails/Flora/test4.jpg','Bleeding Hearts');
messages[2] = new Array('http://inspiredvisuals.com/Photography/Thumbnails/Flora/test.jpg','Flowers With Rain Drops');

////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

Thread: How can I change IFRAME dynamically? / Glitch with Drop Down menus

Thread Tools

Search Thread

How can I change IFRAME dynamically? / Glitch with Drop Down menus

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions