Solved

Spry Vertical Menu Appearance in IE6

Posted on 2008-10-14
35
2,269 Views
Last Modified: 2013-12-08
Hello.  I am using the Dreamweaver spry asset tool to build a vertical menu system.  On the one menu item that opens to a submenu...IE6 shows what looks like a second container or iframe behind the submenu (please see attached image).  This shadow or frame or container does not show in IE7.  I have adjusted the spry css every way I can think of with no results.  Any help would be greatly appreciated.  Thanks!!


sprymenu.jpg
0
Comment
Question by:cindyredo
  • 19
  • 14
  • +1
35 Comments
 
LVL 3

Expert Comment

by:iPromoExpert
ID: 22714989
I'm willing to bet you'd have to use a CSS hack to target IE6 to change the offset of the shadow container
0
 

Author Comment

by:cindyredo
ID: 22715627
there are two such 'hacks' in the stylesheet generated by dreamweaver....see code below....the hacks are at the bottom of the page.  should these work for this problem?
@charset "UTF-8";
 

/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */
 

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 

/*******************************************************************************
 

 LAYOUT INFORMATION: describes box model, positioning, z-order
 

 *******************************************************************************/
 

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

ul.MenuBarVertical

{

	padding: 0;

	list-style-type: none;

	font-size: 100%;

	cursor: default;

	width: 8.5em;

	margin: 0px;

	border-top-width: 0px;

	border-right-width: 0px;

	border-bottom-width: 0px;

	border-left-width: 0px;

	border-top-style: none;

	border-right-style: none;

	border-bottom-style: none;

	border-left-style: none;

}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

ul.MenuBarActive

{

	z-index: 1000;

}

/* Menu item containers, position children relative to this container and are same fixed width as parent */

ul.MenuBarVertical li

{

	margin: 0;

	padding: 0;

	list-style-type: none;

	font-size: 100%;

	position: relative;

	text-align: left;

	cursor: pointer;

	width: 8em;

}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

ul.MenuBarVertical ul

{

	padding: 0;

	list-style-type: none;

	font-size: 100%;

	position: absolute;

	z-index: 1020;

	cursor: default;

	width: 8.5em;

	left: -1000em;

	top: 0;

	margin-top: -5%;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 92%;

}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

ul.MenuBarVertical ul.MenuBarSubmenuVisible

{

	left: 10px;

	bottom: 10px;

}

/* Menu item containers are same fixed width as parent SUB MENU CONTAINER */

ul.MenuBarVertical ul li

{

	width: 15em;

	float: none;

	padding-left: 3px;

	border: 1px solid #CCCCCC;

}
 

/*******************************************************************************
 

 DESIGN INFORMATION: describes color scheme, borders, fonts
 

 *******************************************************************************/
 

/* Outermost menu container has borders on all sides */

ul.MenuBarVertical

{

	border-top-width: 0px;

	border-right-width: 0px;

	border-bottom-width: 0px;

	border-left-width: 0px;

	border-top-style: none;

	border-right-style: none;

	border-bottom-style: none;

	border-left-style: none;

}

/* Submenu containers have borders on all sides  -- CHANGED 1px to 0px*/

ul.MenuBarVertical ul

{

	border: 0px solid #CCC;

}

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarVertical a

{

	cursor: pointer;

	background-color: #DADADA;

	padding: 0.2em;

	color: #000000;

	text-decoration: none;

	display: block;

	font-weight: bold;

	font-family: Tahoma, Verdana, Arial, sans-serif;

	font-size: 11px;

}

/* Menu items that have mouse over or focus have a blue background and white text */

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus

{

	background-color: #DADADA;

	color: #BA4C00;

}

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

{

	background-color: #DADADA;

	color: #BA4C00;

}
 

/*******************************************************************************
 

 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 

 *******************************************************************************/
 

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

ul.MenuBarVertical a.MenuBarItemSubmenu

{

	/*background-image: url(SpryMenuBarRight.gif);*/

	background-repeat: no-repeat;

	background-position: 100% 55%;

}
 

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

ul.MenuBarVertical a.MenuBarItemSubmenuHover

{

	/*background-image: url(SpryMenuBarRightHover.gif);*/

	background-repeat: no-repeat;

	background-position: 100% 50%;

}
 

/*******************************************************************************
 

 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 

 *******************************************************************************/
 

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

ul.MenuBarVertical iframe

{

	position: absolute;

	z-index: 1010;

}

/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

@media screen, projection

{

	ul.MenuBarVertical li.MenuBarItemIE

	{

	f\loat: left;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	display: inline;

	}

}

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22716221
don't wish to sound negative, but I have tried to help 5 or more people with Spry and IE6, and none of them got it working.  It seems spry doesn't work with IE6 in many cases.  You might have to use separate code for IE6 compliance, based on browser type and version detect.
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22716882
The only things I spotted in the stylesheet were probably the things you were tweaking to try to get it to work.  The padding in ul.MenuBarVertical ul li was causing some a strange offset in my browser, but not the same as the problem you showed.  In any event, I tried resetting that and a few other things to defaults.  Have attached update below.  Does this change anything?  If not, perhaps you could post your page code; am wondering if the problem is interaction with other styles, because I don't see the same issue in IE when I create a Spry menu.
@charset "UTF-8";

 

/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */

 

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

 

/*******************************************************************************

 

 LAYOUT INFORMATION: describes box model, positioning, z-order

 

 *******************************************************************************/

 

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

ul.MenuBarVertical

{

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        cursor: default;

        width: 8.5em;

        margin: 0px;

        border-top-width: 0px;

        border-right-width: 0px;

        border-bottom-width: 0px;

        border-left-width: 0px;

        border-top-style: none;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

ul.MenuBarActive

{

        z-index: 1000;

}

/* Menu item containers, position children relative to this container and are same fixed width as parent */

ul.MenuBarVertical li

{

        margin: 0;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: relative;

        text-align: left;

        cursor: pointer;

        width: 8em;

}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

ul.MenuBarVertical ul

{

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: absolute;

        z-index: 1020;

        cursor: default;

        width: 8.5em;

        left: -1000em;

        top: 0;

        margin-top: -5%;

        margin-right: 0px;

        margin-bottom: 0px;

        margin-left: 95%;  /* was 92% */

}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

ul.MenuBarVertical ul.MenuBarSubmenuVisible

{

        left: 0px;  /* was 10

        bottom: 10px;   */

}

/* Menu item containers are same fixed width as parent SUB MENU CONTAINER */

ul.MenuBarVertical ul li

{

        width: 15em;

        /* float: none;

        padding-left: 3px;

        border: 1px solid #CCCCCC;   */

}

 

/*******************************************************************************

 

 DESIGN INFORMATION: describes color scheme, borders, fonts

 

 *******************************************************************************/

 

/* Outermost menu container has borders on all sides */

ul.MenuBarVertical

{

        border-top-width: 0px;

        border-right-width: 0px;

        border-bottom-width: 0px;

        border-left-width: 0px;

        border-top-style: none;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

}

/* Submenu containers have borders on all sides  -- CHANGED 1px to 0px*/

ul.MenuBarVertical ul

{

        border: 1px solid #CCC;

}

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarVertical a

{

        cursor: pointer;

        background-color: #DADADA;

        padding: 0.2em;

        color: #000000;

        text-decoration: none;

        display: block;

        font-weight: bold;

        font-family: Tahoma, Verdana, Arial, sans-serif;

        font-size: 11px;

}

/* Menu items that have mouse over or focus have a blue background and white text */

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus

{

        background-color: #DADADA;

        color: #BA4C00;

}

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

{

        background-color: #DADADA;

        color: #BA4C00;

}

 

/*******************************************************************************

 

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 

 *******************************************************************************/

 

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

ul.MenuBarVertical a.MenuBarItemSubmenu

{

        background-image: url(SpryMenuBarRight.gif);

        background-repeat: no-repeat;

        background-position: 95% 50%;  /* was 55% */

}

 

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

ul.MenuBarVertical a.MenuBarItemSubmenuHover

{

        background-image: url(SpryMenuBarRightHover.gif);

        background-repeat: no-repeat;

        background-position: 95% 50%;

}

 

/*******************************************************************************

 

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 

 *******************************************************************************/

 

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

ul.MenuBarVertical iframe

{

        position: absolute;

        z-index: 1010;

}

/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

@media screen, projection

{

        ul.MenuBarVertical li.MenuBarItemIE

        {

        f\loat: left;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

        display: inline;

        }

}

Open in new window

0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22718410
was working on your other post when suddenly I stumbled across the problem with this one:  the style name "#center" seems to be confusing IE:  just change the name of that style to something else, say #main  and the problem goes away.  
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22718513
more info... it turns out the problem with "center" wasn't the name at all -- because the problem came right back after I renamed a second style:  "#center iframe" to "#main iframe".    Then I looked over in the spry css, and Eureka! there is "ul.MenuBarVertical iframe" with comment " HACK FOR IE...we underlay each submenu with an iframe".  So, it looks like you have two iframes conflicting with each other.  
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22718528
a possible solution:  rename "#center iframe" to "#pagetext iframe", then the two iframe styles won't conflict.
0
 

Author Comment

by:cindyredo
ID: 22722711
yessirnosir....i changed the name in the stylesheet and yes it took away the outer frame, however, it changed the way the center iframe looks on the home page......??
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22723416
unfortunately without all of your code it's hard to be sure what will work but the basic issue appears to be that the browser is seeing two different styles for iframe and is using the wrong one for the Spry menu.  So the goal is to do something to your stylesheet and html to make the iframe identification completely unique.  It's probably not a good idea to try to modify the Spry stylesheet, so you'd be best to focus on your code.  You could try replacing "#center iframe" with "#myiframe", and then in your code put an id="myiframe" inside your <iframe> tag.  
0
 

Author Comment

by:cindyredo
ID: 22724246
First, thank you so much for your help and patience!  It is working perfectly on the index page.  However, on another page, transnews.cfm, it will not change, even if I add the id=maintext iframe to the iframe tag.  I am including the code for this page.
<!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=utf-8" />

<title>Transition News</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]><link href="ie6.css" rel="stylesheet" type="text/css"><![endif]-->

<style type="text/css">

<!--

.style1 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 

-->

</style>

</head>
 

<body>
 
 

<div id="header"> 

  <div align="left"><img src="SiteImages/banner.jpg" alt="Banner" width="782" height="125" /></div>

</div>
 

<div id="center">

  <div id="leftnav">

    <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />

    </p>

    <ul id="MenuBar1" class="MenuBarVertical">

      <li><a href="index.cfm" title="Home">Home</a></li>

      <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>

      <li><a href="https://sspweb.jsc.nasa.gov/webdata/upload/sspbull/SSPnews%2EFinal%2Epdf"title="SSP News" target="_blank">SSP News</a></li>

      <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>

          <ul>

            <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>

            <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>

            <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>

            <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>

            <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>

            <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>

            <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>

        </ul>

      </li>

      <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>

      <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>

      <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>

    </ul>

   

  <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/rendcurrent.jpg" alt="Current Rendezvous Issue" width="85" height="119" border="1" /></a>

    

<a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />

    </p>

  </div>

  <div id="pagetext">

    <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>

    

<iframe src="incTransNews.html" id="maintext iframe" name="MainFrame" width="620" frameborder="0" allowtransparency="yes" scrolling="auto" marginheight="6"></iframe>

 </p>

    </div>

      

      

</a></div>
 

<cfinclude template="sitefooterInclude.cfm">
 

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>

</html>

Open in new window

0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22724506
I think you are getting close!  
The id="maintext iframe" needs to be something different -- just a single unique identifier to match the identifier in your stylesheet.  So for example if your stylesheet contains this block:
#myiframe {
        border: 1px solid #000000;
        margin: 6px;
        height: 330px;
        background-color: #FFFFFF;
}
then you would use id="myiframe".

This may also be a case where instead of an id, you want to use a class.  ID's can only occur once in your page, while classes can occur multiple times.  So you could define .myiframe instead of #myiframe, and in your code use class="myiframe".
 
Just to be sure we're on the same page:  the syntax "#center iframe"  in your original stylesheet means "this is the style of any <iframe> that occurs inside the #center element".  So it should have applied to your iframe without any need for a specific id or class for the iframe itself.  But the other line:  "ul.MenuBarVertical iframe" in the Spry stylesheet means "this is the style for any iframe that occurs inside any <ul> element with class="MenuBarVertical".  The problem is that the iframe inside the Spry Menu is inside both "MenuBarVertical" and #center, so it fits BOTH of those definitions.  So then you are at the mercy of the browser figuring out the correct rule to apply.  There are rules of precedence for styles that should sort this out, but IE6 doesn't implement it the same as newer browsers, plus it makes my head spin to have to think about it, so best just to avoid the ambiguity in the first place by applying some unique id or class to your iframe.
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22724518
oh yea... I think you should be able to get rid of the conditional link to the ie6 stylesheet...
0
 

Author Comment

by:cindyredo
ID: 22725506
Just about to pull out the hair!!  Tried creating a whole new ID for that iframe with no luck.  Created a class for that iframe with no luck!!!
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22725885
perhaps you could repost your your current HTML and CSS files to make sure we're working on the same problem.  When you post your HTML, what would be really helpful would be if, instead of posting your source from Dreamweaver, you post what you see when you do a page in your View/Page Source on your own page in your browser.  That way, your system will interpret all your coldfusion code, because I can't tell whether anything in your code might be causing problems.

Alternately (even better) you could publish the page on a temporary folder on your server, then I could look at it there including images and any other elements that could mess up the layout.
0
 

Author Comment

by:cindyredo
ID: 22734632
yessir...again thank you for all of your help on this.  as you can tell, i am a beginner with the use of dreamweaver.  

I am attaching two images...they way the transnews page should look and how it is currently looking after renaming the the center iframe style to maintext iframe.  This fix works perfectly on the index.cfm page.  However on the transnews.cfm page it the <iframe> does not seem to want to accept any style changes.  I added a new style and applied the id tag to the iframe with no luck.  I even tried hardcoding the style into the iframe and the only style that took was the height=330.  As you can tell, this iframe is supposed to have bgcolor = white and a border=1,black,solid.  This iframe seems to have a mind of its own.  Or, it could certainly be operator error.

The shadow on the spry menu has disappeard from both pages since changing the name of the center iframe style.

Also attaching the new css and the trans news code.  Thanks again!!!

TRANS NEWS 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=utf-8" />

<title>Transition News</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]><link href="ie6.css" rel="stylesheet" type="text/css"><![endif]-->

<style type="text/css">

<!--

.style1 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 

-->

</style>

</head>
 

<body>
 
 

<div id="header"> 

  <div align="left"><img src="SiteImages/banner.jpg" alt="Banner" width="782" height="125" /></div>

</div>
 

<div id="center">

  <div id="leftnav">

    <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />

    </p>

    <ul id="MenuBar1" class="MenuBarVertical">

      <li><a href="index.cfm" title="Home">Home</a></li>

      <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>

      <li><a href="https://sspweb.jsc.nasa.gov/webdata/upload/sspbull/SSPnews%2EFinal%2Epdf"title="SSP News" target="_blank">SSP News</a></li>

      <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>

          <ul>

            <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>

            <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>

            <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>

            <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>

            <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>

            <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>

            <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>

        </ul>

      </li>

      <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>

      <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>

      <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>

    </ul>

   

  <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/rendcurrent.jpg" alt="Current Rendezvous Issue" width="85" height="119" border="1" /></a>

    

<a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />

    </p>

  </div>

  <div id="pagetext">

    <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>

    

<iframe src="incTransNews.html" name="MainFrame" width="620" height="330" background-color="#FFFFFF" margin="6px" border="1" frameborder="0" allowtransparency="yes" scrolling="auto" marginheight="6"></iframe>

 </p>

    </div>

      

      

</a></div>
 

<cfinclude template="sitefooterInclude.cfm">
 

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>

</html>
 
 

*******************************

CSS

@charset "utf-8";

body {

	text-align: center;

	margin: 0px;

	padding: 0px;

	background-color: #000000;

	background-repeat: repeat-y;

	background-image: url(SiteImages/tableborder.jpg);

	background-position: center center;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	position: absolute;

	

}

#footer {

	width: 780px;

	background-image: url(SiteImages/footer.gif);

	height: 65px;

	padding-top: 6px;

	padding-bottom: 6px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #FFFFFF;

	text-decoration: none;

	vertical-align: middle;

	background-color: #000000;

	

}
 

#footer a:visited {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #FFFFFF;

	text-decoration: none;

}

#footer a:link {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #FFFFFF;

	text-decoration: none;

}

#footer a:active {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #FFFFFF;

}

#footer a:hover {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #FF9900;

	text-decoration: none;

}
 
 

#header {

	margin: auto;

	padding: 0px;

	width: 780px;

}

#center {

	height: 400px;

	width: 780px;

	border: 1px solid #000000;

	background-color: #999999;

	bottom: auto;

}
 

#leftnav {

	margin: 6px;

	height: 380px;

	width: 15%;

	border: 1px solid #000000;

	float: left;

	background-color: #DADADA;

	padding-top: 6px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

}

#maintext {

	background-color: #DADADA;

	width: 418px;

	margin-right: 0px;

	margin-left: -210px;

	position: absolute;

	margin-top: 6px;

	height: 380px;

	padding-top: 6px;

	border: 1px solid #000000;

}
 

#rightnav {

	background-color: #DADADA;

	float: right;

	height: 374px;

	width: 25%;

	border: 1px solid #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	text-align: justify;

	padding: 6px;

	margin-top: 6px;

	margin-right: 6px;

	margin-bottom: 6px;

	margin-left: 6px;

}

#maintext iframe {

	border: 1px solid #000000;

	margin: 6px;

	height: 330px;

	background-color: #FFFFFF;

}
 
 

#rightnav iframe {

	background-color: #FFFFFF;

	border: 1px solid #000000;

	height: 160px;

	padding: 0px;

	margin-top: 10px;

	margin-right: 5px;

	margin-bottom: 8px;

	margin-left: 0px;

}

#pagetext {

	background-color: #DADADA;

	width: 635px;

	margin-right: 0px;

	margin-left: -320px;

	position: absolute;

	margin-top: 6px;

	height: 380px;

	padding-top: 6px;

	border: 1px solid #000000;

}

#comingsoon {

	font-size: 10px;

}

Open in new window

badTransNews.jpg
correctTransNews.jpg
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22734791
Hi again, I will have a look at this in more detail in a little while, but one thing I noticed yesterday that surprised me was that the iframe transparency setting says "yes", while documentation appears to show the choices to be either "true" or "false".  But then I googled around a bit and saw some others using "yes" so I'm a bit confused by that one.  In any event you might try switching to "true" or "false" just to observe if it has any impact.
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22735640
OK, here's my update of both the html and the stylesheet.  Note that I have substituted dummy info where you had include statements, including substituting www.google.com in your iframe, just so I would be able to test the code, so you'll have to change those references back.   Photos below show what both the original 3 column page and the 2 column page look like on my screen.  Note that I made the arbitrary decision to keep the middle column ID as "pagetext" but the right column in the two column layout is now "maintext".  I tweaked a lot of the margins, padding, etc... but I'm sure you'll still want to fine tune.

Hope that helps... let me know if it still isn't working right on your end...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<!-- two column layout  -->
 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Transition News</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
 

<style type="text/css">

<!--

.style1 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<style type="text/css">

 

-->

</style>

</head>

 

<body>

 

<div id="container">

 

<div id="header"> 

  <div align="left"><img src="SiteImages/banner.jpg" alt="Banner" width="782" height="125" /></div>

</div>

 

<div id="center">

  <div id="leftnav">

    <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />

    </p>

    <ul id="MenuBar1" class="MenuBarVertical">

      <li><a href="index.cfm" title="Home">Home</a></li>

      <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>

      <li><a href="https://sspweb.jsc.nasa.gov/webdata/upload/sspbull/SSPnews%2EFinal%2Epdf"title="SSP News" target="_blank">SSP News</a></li>

      <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>

          <ul>

            <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>

            <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>

            <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>

            <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>

            <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>

            <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>

            <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>

        </ul>

      </li>

      <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>

      <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>

      <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>

    </ul>

   

  <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/rendcurrent.jpg" alt="Current Rendezvous Issue" width="85" height="119" border="1" /></a>

    

<a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />

    </p>

  </div>

  <div id="maintext">

    <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>

    

<iframe src="http://www.google.com" name="MainFrame" width="620" height="330" background-color="#FFFFFF" margin="6" border="1" frameborder="0" allowtransparency="false" scrolling="auto" marginheight="6"></iframe>

 </p>

    </div>

      

      

</a></div>

<div id="footer">dummy footer (subst for cold fusion include)</div>

<!--<cfinclude template="sitefooterInclude.cfm">-->
 

</div>  <!-- end of container --> 

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>

</html>
 

*-*-*-*-*-*- *-*-*- *-*-*- *-*-*- *-*-*- *-*-*- *-*-*- *-*-*- 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<!-- three column layout  -->
 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Transition News</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

.style1 {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<style type="text/css">

 -->

</style>

</head>

<body>
 

 <div id="container">

    <div id="header"> 

        <div align="left"><img src="SiteImages/banner.jpg" alt="Banner" width="782" height="125" /></div>

    </div>

 

    <div id="center">

         <div id="leftnav">

            <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />

            </p>

            <ul id="MenuBar1" class="MenuBarVertical">

              <li><a href="index.cfm" title="Home">Home</a></li>

              <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>

              <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>

                  <ul>

                    <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>

                    <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>

                    <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>

                    <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>

                    <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>

                    <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>

                    <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>

                </ul>

              </li>

              <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>

              <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>

              <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>

            </ul>

           

          <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/vol2no3.jpg" alt="Current Rendezvous Issue" width="100" height="140" border="1" /></a>

            

                <a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />

            </p>

            </div>

          <div id="pagetext">

            <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="400" height="30" border="0"/>

            <iframe src="http://www.google.com" id="myiframe" name="MainFrame" width="400" frameborder="0" allowtransparency="yes" scrolling="auto" marginheight="6"></iframe></p>

          </div> 

          <!--<div id="pagetext">

            <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>

            

            <iframe src="nasavar.html" id="myiframe" name="MainFrame"  ></iframe></p>

          </div>  

              -->

         <div id="rightnav"></div>    

   </div>   <!-- close center div -->

        

    <div id="footer">dummy footer (subst for cold fusion include)</div>
 

</div> <!-- close container div -->

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>
 

</body>

</html>
 

*-*-*-*-*-*- *-*-*- *-*-*- *-*-*- *-*-*- *-*-*- *-*-*- *-*-*- 
 

@charset "utf-8";

/* styles.css - Oct 16, 2008 3:50 pm CST */

body {

        text-align: center;

        margin: 0px;

        padding: 0px;

        background-color: #000000;

        background-repeat: repeat-y;

        background-image: url(SiteImages/tableborder.jpg);

        background-position: center center;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

}

#container {

		width:782px;

		margin: 0 auto;

		}

#header {

        width:782px;		

		height:125px;

}

#center {

        height: 400px;

        width: 780px;

        border: 1px solid #000000;

        background-color: #999999;

        bottom: auto;

		position:relative;

}

#leftnav {

        position:absolute;

		top:0px;

		left:0px;

		margin: 6px;

        height: 380px;

        width: 117px;

        border: 1px solid #000000;

        background-color: #DADADA;

        padding-top: 6px;

        padding-right: 0px;

        padding-bottom: 0px;

        padding-left: 0px;

		z-index:10;

}

#pagetext {

        position: absolute;

		top:0px;

		left:131px;

		background-color: #DADADA;

        margin: 6px 6px 6px 0px;

        height: 380px;

		width:426px;

        padding: 6px 0px 0px 0px;

        border: 1px solid #000000;

		

}

#maintext {

        position: absolute;

		top:0px;

		left:131px;

		background-color: #DADADA;

        margin: 6px 6px 6px 0px;

        height: 380px;

		width:629px;

        padding: 6px 6px 0px 6px;

        border: 1px solid #000000;

		

}

#rightnav {

        position:absolute;

		top:0px;

		right:0px;

		background-color: #DADADA;

        height: 374px;

        width: 195px;

        border: 1px solid #000000;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 10px;

        text-align: justify;

        padding: 6px 6px 6px 6px;

        margin: 6px 6px 6px 0px;

}

#maintext iframe {

        border: 1px solid #000000;

		height: 330px;

		background-color: #FFFFFF;
 

} 

#pagetext iframe {

        border: 1px solid #000000;

		height: 330px;

	    background-color: #FFFFFF;

}

#rightnav iframe {

        background-color: #FFFFFF;

        border: 1px solid #000000;

        height: 160px;

        padding: 0px;

        margin-top: 10px;

        margin-right: 5px;

        margin-bottom: 8px;

        margin-left: 0px;

}

#footer {

        width: 782px;

		background-image: url(SiteImages/footer.gif);

        height: 65px;

        padding-top: 6px;

        padding-bottom: 6px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

        text-decoration: none;

        vertical-align: middle;

}

 

#footer a:visited {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

        text-decoration: none;

}

#footer a:link {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

        text-decoration: none;

}

#footer a:active {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

}

#footer a:hover {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FF9900;

        text-decoration: none;

}

Open in new window

mainpage.jpg
transitionnews.jpg
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:cindyredo
ID: 22735926
wow, thanks!!  i will get to work on this again in the morning and let you know my progress!!
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22737103
one thing that I wondered about your code was whether you really need that <iframe> ?  you can avoid all the strange iframe compatibility issues if you switch to a css div with scrolling.  But didn't know whether there was some reason why you prefer to use iframe in your case.   If you wanted to try an alternative, I think the code would be something like shown below.




<div id="maintext">

    <img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>

   <div class="scrollbox">

      <cfinclude template="incTransNews.html">

   </div>

</div>
 

.scrollbox {

position:absolute;	

left:0px;	

bottom:0px;	

background:transparent;       

border: 1px;

border-style:solid;	

border-color:#000000;       

height: 340px;	

width: 626px;       

padding: 0px;

margin: 6px;        

overflow:auto;	

}

Open in new window

0
 

Author Comment

by:cindyredo
ID: 22740628
Yessir....I did not know that was an option.  As you can tell, the div is new to me.  I am used to working with tables and am forcing myself to learn divs and css's.  

I have just heard from my customer that they are wanting to re-arrange the site a bit -- moving the news text to the home page, just shuffling some things around.  So now is my time to make some structural changes.  Do you think I would be better off changing to a table structure?  Also, I know I am using a width of 780 -- should I increase this - what is the most common width being used these days?

As far as the issues with IE6...as I'm sure you can tell, this is not a public site and the customer will be switching all machines to IE7 within the next couple of weeks...so that issue should go away (except I know it does not render well in Firefox), but IE is the company standard and that is what we are to design for.

I appreciate your suggestions!!
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22741163
fyi... in the "things I never really needed to know" department, your post got me digging a bit into the whole iframe transparency thing, and I learned a few things  
1) in Firefox, Safari, Opera, iframes appear to always be transparent, regardless of what allowtransparency is set to.
 2) in IE6 and IE7, by default, transparency is turned off.  If you include the allowtransparency parameter in your code, then transparency is turned on.  Remarkably, contrary to the documentation it doesn't seem to matter whether you put in ="true", ="yes", ="false", ="billgates" or even if you just leave "allowtransparency" as a standalone keyword.  All of these (even "false" !!!) result in the iframe transparency being "true".   Programatically, I was able to prove to myself that
 "document.all.myiframe.allowTransparency" evaluates to "true" in all of the above cases in both IE6 and IE7.   Nice work, Microsoft!  
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22741437
I would definitely keep going with CSS and divs for your overall structure.... in the last couple of months I've taken the plunge converting a couple of sites with complicated table layouts to CSS divs, and the code is so much cleaner now and easier to maintain -- defininitely worth it; wish I'd switched those sites years ago..

Lot's of different opinions about fixed vs. variable widths, and whether 780 or some other width is a good choice.  I don't really have any expertise to offer... probably best just to google around and decide what you like.

I'll attach an example of a way to do variable-width.  The stylesheet sets the outer container to 80% of the user's browser width, and then scales everything else too.   There is an html file, followed by a stylesheet (to be named varstyles.css).  The internal margins get VERY tricky with variable widths, and browser compatibility is more of an issue.  But there are lots of tutorials on the web if you need help.  
<!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=utf-8" />

<title>Transition News</title>

<link href="varstyles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

.style1 {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

}

-->

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

<style type="text/css">

 -->

</style>

</head>

<body>

 

<div id="container">

 

    <div id="header"> 

        

    </div>

 

    <div id="center">

         <div id="leftnav">

            <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />

            </p>

            <ul id="MenuBar1" class="MenuBarVertical">

              <li><a href="index.cfm" title="Home">Home</a></li>

              <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>

              <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>

                  <ul>

                    <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>

                    <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>

                    <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>

                    <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>

                    <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>

                    <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>

                    <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>

                </ul>

              </li>

              <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>

              <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>

              <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>

            </ul>

           

          <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/vol2no3.jpg" alt="Current Rendezvous Issue" width="100" height="140" border="1" /></a>

            

                <a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />

            </p>

            </div>

          

   <!--       <div id="pagetext">

            <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>

            <iframe src="incTransNews.html" name="MainFrame" width="620" frameborder="0" allowtransparency="yes" scrolling="auto" marginheight="6"></iframe></p>

          </div>  -->

              

         <div id="rightnav">

         <div id="iespacer">

         </div></div>    

  </div>   <!-- close center div -->

        

    <div id="footer"></div>
 

</div>   <!-- close container div -->

<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>
 

</body>

</html>
 
 
 

@charset "utf-8";

/* varstyles.css  */

body {

        text-align: center;

        margin: 0px;

        padding: 0px;

        background-color: #000000;

        background-repeat: repeat-y;

        background-image: url(SiteImages/tableborder.jpg);

        background-position: center center;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

}

#container {

		width:80%;

		margin: 0 auto;

		}

#header {

        width:100%;		

		height:125px;

		background-image:url(SiteImages/banner.jpg);

		background-repeat:repeat;

}

#center {

        height: 400px;

        width: auto;

        border: 1px solid #000000;

        background-color: #999999;

        bottom: auto;

		position:relative;

}

#leftnav {

        position:absolute;

		top:0px;

		left:0px;

		margin: 6px;

        height: 380px;

        width: 20%;

        border: 1px solid #000000;

        background-color: #DADADA;

        padding-top: 6px;

        padding-right: 0px;

        padding-bottom: 0px;

        padding-left: 0px;

		z-index:10;

}

#pagetext {

        position: absolute;

		top:0px;

		left:131px;

		background-color: #DADADA;

        margin-right: 0px;

        margin-left: 0px;

        margin-top: 6px;

        height: 380px;

		width:400px;

        padding-top: 6px;

        border: 1px solid #000000;

		overflow:hidden;

}

#rightnav {

        position:absolute;

		top: 0px;

		left: 20%;  /* this will match content width of leftnav, but needs to be adjusted with margin-left for margins and borders  */

	    right: 0px;   /*causes auto width to stretch all the way to the right but fails in IE6; added hack iespacer div to correct*/

		background-color: #DADADA;

        height: 374px;

        border: 1px solid #000000;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 10px;

        text-align: justify;

        padding: 6px;

        margin-top: 6px;

        margin-right: 6px;

        margin-bottom: 6px;

        margin-left: 14px;  /* extra 8 px to compensate for 14 px of border + margin on leftnav */

}

#iespacer {

position:relative;

width:76%;

}

#pagetext iframe {

        border: 1px solid #000000;

        margin: 6px;

        height: 330px;

        background-color: #FFFFFF;

}

#rightnav iframe {

        background-color: #FFFFFF;

        border: 1px solid #000000;

        height: 160px;

        padding: 0px;

        margin-top: 10px;

        margin-right: 5px;

        margin-bottom: 8px;

        margin-left: 0px;

}

#footer {

        width: 100%;

		background-image: url(SiteImages/banner.jpg);

		background-repeat:repeat-x;

        height: 65px;

        padding-top: 6px;

        padding-bottom: 6px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

        text-decoration: none;

        vertical-align: middle;

}

 

#footer a:visited {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

        text-decoration: none;

}

#footer a:link {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

        text-decoration: none;

}

#footer a:active {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FFFFFF;

}

#footer a:hover {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #FF9900;

        text-decoration: none;

}

Open in new window

0
 

Author Comment

by:cindyredo
ID: 22741823
Thank you for your thoughts.  I will start reworking this soon, can't wait to use all of your new tips and ideas!!  I will keep you posted!
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22742147
you're welcome...  fyi, I'm about to head out of town till next Wednesday so if you need more assistance you'd probably be best to start a new question to get someone else's attention.  Good luck!
0
 

Author Comment

by:cindyredo
ID: 22771117
yessir...i changed the 2-column layout page and everything looks good with the exception of a couple little things that I cannot seem to fix no matter what I try.  First, on the body style you suggested:

text-align: center;
      margin: 0px;
      padding: 0px;
      background-color: #000000;
      background-repeat: repeat-y;
      background-image: url(SiteImages/tableborder.jpg);
      background-position: center center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
When I change to the above, and remove the 'position: absolute' line, I lose the tableborder image.  See attached image with arrow.

Also, you will notice that I lose the small gap of space at the top of the maintext div.  The image "Transition News" should align with the "Links" image in the left nav.  I have tried numerous adjustments in the maintext div with no luck.  Any suggestions?


bodyAbsolute.jpg
bodyNoPosition.jpg
0
 

Author Comment

by:cindyredo
ID: 22771293
yessir...never mind my comments about the images not lining up -- fixed that.  only thing left is the background image not appearing when the absolute positioing is removed!!  Sorry!!
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22775434
Hi again Cindy... when you say the "absolute positioning is removed", does that mean that you are using a variable width layout?  If so, we'll have to do something with the background graphic SiteImages/tableborder.jpg to allow the border to expand and contract as well.  
0
 

Author Comment

by:cindyredo
ID: 22777448
Morning.
In the body style I had position: absolute.  In your suggested/improved css, you did not have position: absolute, when that is not an element in that style the border image no longer appears -- actually its there, just shifted so you cannot see it.  I did mess with the image size to see if that made a difference and it did not.
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22777579
maybe you could post the actual image file so I can test it on my end.
when you say the image is there, but shifted, do you see part of it, like only on the left, or only on the right?
0
 

Author Comment

by:cindyredo
ID: 22777695
I am attaching the image.  If you scroll over to the right you can see part of the image.  Image size is 800x10.
tableborder.jpg
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22777810
...hmmm   the border works for me.    I didn't change any code from what I posted Oct 16 @ 3:53 pm, but as soon as I saved that image to my hard drive, it appeared in the right place, so hard to speculate what is causing it to be in the wrong place for you.
0
 

Author Comment

by:cindyredo
ID: 22777876
don't know.  looks fine in ie7...just ie6....thanks for checking it for me!!
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22778086
...double hmm... on my machine it looks fine in IE6 too.

one observation:  when I look really closely at the page, the content is too wide by 2 pixels, so it covers up a very narrow strip of the border image.  The issue stems back to the very beginning where some of the elements on your page were 780 px wide, while some were 782 px.  I dealt with that by increasing the container width to 782 px.  But if you want everything to work right with that border image, you'll have sharpen your pencil and take 2 px off the width of each element of your page. eg. container, header, footer would shirink from 782 to 780, while center would shrink from 780 to 778 , and you would have to trim 2 px from one of the columns as well.
0
 
LVL 14

Assisted Solution

by:yessirnosir
yessirnosir earned 500 total points
ID: 22779264
Hey Cindy, have you ever tried a little utility called "Beyond Compare"?  It is a powerful tool that can compare two files or two folders, or even two entire hard drives.  Anyway, I use it all the time to track down little stylesheet problems.  So in this case, you could load up your current stylesheet and my last posted stylesheet in Beyond Compare, and very quickly identify every difference between the two.  9  times out of 10 that approach will find the critical difference in seconds, rather than minutes.  Anyway, if you haven't tried it, it is highly recommended... http://www.scootersoftware.com/download.php
0
 

Accepted Solution

by:
cindyredo earned 0 total points
ID: 22779311
i will check it out, thanks!!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now