PDA

View Full Version : 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.


<!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:


<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:


<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


<!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:


<!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:


<!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).

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


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:


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

should be:


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



<!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):


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:


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



<!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:


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
<!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>';

Cyclone
03-01-2008, 06:29 AM
sorry i had to split it up :(



////////////////////////////////////////////////////////////
// initTip - initialization for tooltip.
// Global variables for tooltip.
// Set styles
// Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.width = 'auto';
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
tipcss.textAlign='center';
tipcss.margin='0 auto';
}
if (tooltip&&tipFollowMouse) {
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>
</head>





<style> <!-- BODY{ scrollbar-face-color:'#7C92B8';

SCROLLBAR-FACE-COLOR: #212630; SCROLLBAR-HIGHLIGHT-COLOR: #212630; SCROLLBAR-SHADOW-COLOR: #212630; SCROLLBAR-3DLIGHT-COLOR: #212630; SCROLLBAR-ARROW-COLOR: #212630; SCROLLBAR-TRACK-COLOR: #212630; scrollbar-darkshadow-: '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"}

</style>


<body bgcolor="#212630" text="#7C92B8">
<br>
<center><h2><FONT COLOR= "#7C92B8">Photo Gallery</FONT></h2></center>
<center><h3><FONT COLOR= "#7C92B8">Flora</FONT></h3></center>



<center><TABLE BORDER="3" RULES="none" CELLSPACING="3" CELLPADDING="3" BORDERCOLOR="#7C92B8">






<TR>
<TD><a href="javascript:newwindow9()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/Flora/AppleBlossoms2.jpg" alt="Apple Blossoms" style= border-color:#7C92B8 border=3 onMouseover="doTooltip(event,0) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></TD>
<TD><center><a href="javascript:newwindow()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/BleedingHearts.jpg" alt="Bleeding Hearts" style= border-color:#7C92B8 border=3 onMouseover="doTooltip(event,1) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></TD>
<TD><center><a href="javascript:newwindow2()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/DewDrops.jpg" alt="Branch With Raindrops" style= border-color:#7C92B8 border=3 onMouseover=doTooltip(event,0) ,this.style.borderColor='white'" onMouseout="this.style.borderColor='#7C92B8'"/></a></center></TD>
<TD><center><a href="javascript:newwindow3()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/AppleBlossoms.jpg" alt="Apple Blossoms" style= border-color:#7C92B8 border=3 onMouseover=doTooltip(event,2) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></center></TD>
<TD><center><a href="javascript:newwindow4()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/Mushrooms.jpg" alt="Mushrooms" style= border-color:#7C92B8 border=3 onMouseover="doTooltip(event,0) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></center></TD>
</TR>



<TR>

<TD><center><a href="javascript:newwindow5()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/FlowersWithRaindrops.jpg" alt="Flowers With Raindrops" style= border-color:#7C92B8 border=3 onMouseover="doTooltip(event,2), scrollbars=no ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></center></TD>

<TD><center><a href="javascript:newwindow6()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/FallColours.jpg" alt="Fall Colours" style= border-color:#7C92B8 border=3 onMouseover=doTooltip(event,0) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></center></TD>

<TD><center><a href="javascript:newwindow7()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/YellowFlower.jpg" alt="Yellow Flower" style= border-color:#7C92B8 border=3 onMouseover=doTooltip(event,1) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></center></TD>

<TD><center><a href="javascript:newwindow8()"><img src="http://inspiredvisuals.com/Photography/Thumbnails/Flora/LilacBush(TimeLapse).gif" alt="Lilac Bush Time-Lapse" style= border-color:#7C92B8 border=3 onMouseover=doTooltip(event,2) ,this.style.borderColor='white'" onMouseout="hideTip(),this.style.borderColor='#7C92B8'"/></a></center></TD>

<TD><center></center></TD>

</TR>





</TABLE>
</center>






<center><br><FONT COLOR= "#7C92B8">Welcome to the photo gallery. Click the thumbnails for a larger version.</FONT></br></center>




</html>