I have a site I am developing and I've run into a problem when scaling the browser content. I have one page at http://frustrated-inc.bluehorizoncons... that was set up and scales fine. Using <ctl>+/- on the browser the site scales fine, no issues when enlarged or reduced.
But even though I used the same page setup, except a modification to a DIV section (instead of 1 DIV spanning the contentpane, I have split the DIV into 3 DIVs to result in 3 columns in that element, as seen at http://frustrated-inc.bluehorizoncons...
As you can see the scaling and positioning is all messed up. I have tried to recreate the page multiple times, tweak the skin, recreate the skin, etc. with no resolution. Below is the code for the two pages.
The .ascx file for the working page (AboutUs): http://frustrated-inc.bluehorizoncons...
<!--Doctype Declaration and CSS Links--------------------------------------------------- -->
<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<link href="skin.css" rel="stylesheet" type="text/css" />
<!--
Created by Kim Peterson v1.0
-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<body>
<div id="main">
<dnn:LOGIN runat="server" id="dnnLOGIN" />
<div class="box sheet">
<div class="box-body sheet-body">
<div class="header">
<!-- header -->
<div class="header" runat="server" id="header" visible="true">
</div>
</div>
<div class="bar nav">
<div class="nav-outer">
<ul class="hmenu">
<li><a href="./Home.aspx" class="active">Home</a> </li>
<li><a href="./AboutUs.aspx">About Us</a> </li>
<li><a href="./Products.aspx">Products</a> </li>
<li><a href="./Warranty.aspx">Warranty</a> </li>
<li><a href="./Suppliers.aspx">Suppliers</a> </li>
<li><a href="./FAQs.aspx">FAQs</a> </li>
<li><a href="./ContactUs.aspx">Contact Us</a> </li>
</ul>
</div>
</div>
<div class="ContentPane" id="ContentPane">
<div class="contentrow1" id="row1" visible="true">
<div class="item1" runat="server" id="item_1" visible="true">
</div>
<div class="item2" runat="server" id="item_2" visible="true">
</div>
</div>
<div class="contentrow2" id="row2" visible="true">
<div class="item3" runat="server" id="item_3" visible="true">
</div>
</div>
<div class="contentrow3" id="row3" visible="true">
<div class="item4" runat="server" id="item_4" visible="true">
</div>
</div>
<div class="contentrow4" id="row4" visible="true">
<div class="item5" runat="server" id="item_5" visible="true">
</div>
</div>
<div class="contentrow5" id="row5" visible="true">
<div class="item6" runat="server" id="item_6" visible="true">
</div>
</div>
<div class="contentrow6" id="row6" visible="true">
<div class="footerleft" runat="server" id="footer_left" visible="true">
</div>
<div class="footerright" runat="server" id="footer_right" visible="true">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-body">
<div class="footer-center">
<div class="footer-wrapper">
<div class="footer-text">
<p>
Copyright © 2012, Johnson Lifters. All Rights Reserved.</p>
<p class="page-footer">
<a href="http://www.johnsonlifters.com" target="_blank"></a>created by Frustrated
Incorporated.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
=============================
The related .css file:
=============================
/* Theme Name: Johnson Lifters
Theme URI: http://www.johnsonlifters.com
Version: 1.0
Author: Kim Peterson
Author URI: http://www.frustrated-inc.com */
/* begin Page */
#main, table
{
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
text-align: justify;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
#main
{
position: relative;
z-index: 0;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor: default;
overflow: hidden;
}
body /* site static background image */
{
background: #FFFFFF url('../johnson/images/Bottom_texture.jpg') fixed center top;
padding: 0;
margin: 0;
min-width: 800px;
color: #C4C4C4;
}
.cleared
{
display: block;
clear: both;
float: none;
margin: 0;
padding: 0;
border: none;
font-size: 0;
height: 0;
overflow: hidden;
}
form
{
padding: 0 !important;
margin: 0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* Start Box */
.box, .box-body /* Center site */
{
margin: 0 auto;
position: relative;
}
.box:before, .box:after, .box-body:before, .box-body:after /* Content container -transparent element */
{
position: absolute;
top: 0;
bottom: 0;
content: ' ';
background-repeat: no-repeat;
line-height: 0;
}
.box:before, .box-body:before
{
left: 0;
}
.box:after, .box-body:after
{
right: 0;
}
.box:before
{
overflow: hidden;
background-position: bottom left;
direction: ltr;
z-index: -3;
}
.box:after
{
background-position: bottom right;
z-index: -3;
}
.box-body:before, .box-body:after
{
background-repeat: repeat-y;
}
.box-body:before
{
background-position: top left;
z-index: -3;
}
.box-body:after
{
background-position: top right;
z-index: -3;
}
.box .box:before, .box .box:after, .box-body .box-body:before, .box-body .box-body:after
{
z-index: -2;
}
.box .box .box:before, .box .box .box:after, .box-body .box-body .box-body:before, .box-body .box-body .box-body:after
{
z-index: -1;
}
/* End Box */
/* Start Bar */
.bar /* Menu background image */
{
position: relative;
}
.bar:before, .bar:after
{
position: absolute;
top: 0;
bottom: 0;
content: ' ';
background-repeat: repeat;
z-index: -1;
}
.bar:before
{
left: 0;
background-position: top left;
}
.bar:after
{
right: 0;
background-position: top right;
}
/* End Bar */
/* begin Box, Sheet */
.sheet /* Contentpane */
{
max-width: 800px;
margin-top: 20px;
margin-bottom: 0;
cursor: auto;
width: 800px;
}
.sheet-body
{
padding: 1px;
min-width: 10px;
min-height: 10px;
padding-top: 1px;
padding-bottom: 5px;
}
.sheet:before, .sheet:after
{
content: url('images/sheet_t.png');
font-size: 0;
background-image: url('../johnson/images/sheet_b.png');
}
.sheet:after
{
clip: rect(auto, auto, auto, 794px); /* (top, right, bottom, left) */
}
.sheet:before, .sheet-body:before
{
right: 6px;
}
.sheet-body:after
{
width: 6px;
top: 6px;
bottom: 6px;
background-image: url('../johnson/images/sheet.png');
}
.sheet-body:before
{
top: 6px;
bottom: 6px;
background-image: url('../johnson/images/sheet.png');
}
/* end Box, Sheet */
/* begin Header kp*/
div.header /* Header block */
{
margin: 0 auto;
position: relative;
width: 100%;
height: 169px;
top: 0px;
left: 0px;
}
.header:before /* Header image */
{
position: absolute;
display: block;
content: ' ';
z-index: -2;
top: 0;
width: 100%;
height: 169px;
background-image: url('../johnson/images/JL-logo800.png');
background-repeat: no-repeat;
background-position: center top;
}
/* begin Menu */
/* menu structure */
ul.hmenu a, ul.hmenu a:link, ul.hmenu a:visited, ul.hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.hmenu, ul.hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.hmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
ul.hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.hmenu li li
{
float: none;
width: auto;
}
ul.hmenu li:hover > ul
{
visibility: visible;
top: 100%;
}
ul.hmenu li li:hover > ul
{
top: 0;
left: 100%;
}
ul.hmenu:after, ul.hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.hmenu, ul.hmenu ul
{
min-height: 0;
}
ul.hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('../johnson/images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
ul.hmenu ul.hmenu-left-to-right
{
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.hmenu ul.hmenu-right-to-left
{
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.hmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
ul.hmenu ul ul.hmenu-left-to-right
{
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
ul.hmenu ul ul.hmenu-right-to-left
{
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
}
ul.hmenu li li:hover > ul.hmenu-left-to-right
{
right: auto;
left: 100%;
}
ul.hmenu li li:hover > ul.hmenu-right-to-left
{
left: auto;
right: 100%;
}
ul.hmenu
{
position: relative;
padding: 6px 0 0 0;
float: left;
}
/* end menu structure */
/* menu bar */
.nav
{
margin: 0 auto;
min-height: 45px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
}
.nav:before, .nav:after
{
background-image: url('../johnson/images/nav.png');
}
.nav:before
{
right: 5px;
}
.nav:after
{
width: 5px;
}
/* end menu bar */
.nav-outer
{
position: absolute;
width: 100%;
}
/* end Menu */
/* begin MenuItem */
ul.hmenu > li > a
{
position: relative;
display: block;
height: 39px;
cursor: pointer;
text-decoration: none;
color: #D2D2D2;
padding: 0 20px;
line-height: 39px;
text-align: center;
}
ul.hmenu > li > a:before, ul.hmenu > li > a:after
{
position: absolute;
display: block;
content: ' ';
top: 0;
bottom: 0;
z-index: -1;
background-image: url('../johnson/images/menuitem.png');
}
ul.hmenu > li > a:before
{
left: 0;
right: 8px;
background-position: top left;
}
ul.hmenu > li > a:after
{
width: 8px;
right: 0;
background-position: top right;
}
.hmenu a, .hmenu a:link, .hmenu a:visited, .hmenu a:hover
{
font-family: "Arial Narrow" ,Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 16px;
text-align: left;
text-decoration: none;
}
ul.hmenu > li > a.active:before
{
background-position: bottom left;
}
ul.hmenu > li > a.active:after
{
background-position: bottom right;
}
ul.hmenu > li > a.active
{
color: #FFFFFF;
}
ul.hmenu > li > a:hover:before, ul.hmenu > li:hover > a:before
{
background-position: center left;
}
ul.hmenu > li > a:hover:after, ul.hmenu > li:hover > a:after
{
background-position: center right;
}
ul.hmenu > li > a:hover, ul.hmenu > li:hover > a
{
color: #4D3901;
}
/* end MenuItem */
/* begin MenuSeparator */
ul.hmenu > li
{
margin-left: 2px;
}
ul.hmenu > li:first-child
{
margin-left: 0;
}
/* end MenuSeparator */
/* begin MenuSubItem */
.hmenu ul a
{
display: block;
white-space: nowrap;
height: 23px;
background-image: url('../johnson/images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0;
border-style: solid;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 23px;
color: #ECECEC;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-size: 12px;
margin: 0;
padding: 0 8px;
}
.hmenu ul > li:first-child > a
{
border-top-width: 0;
}
.hmenu ul a:link, .hmenu ul a:visited, .hmenu ul a:hover, .hmenu ul a:active
{
text-align: left;
text-decoration: none;
line-height: 23px;
color: #ECECEC;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-size: 12px;
margin: 0;
padding: 0 8px;
}
.hmenu ul li a:hover
{
color: #FEF4D9;
background-position: left bottom;
border-top-width: 0 !important;
}
.hmenu ul li:hover > a
{
color: #FEF4D9;
background-position: left bottom;
border-top-width: 0 !important;
}
/* end MenuSubItem */
/* begin Layout */
.ContentPane
{
width: 800px;
height: auto;
}
.contentrow1
{
width: 764px;
height: 258px;
position: relative;
margin: 0 auto 0 auto; /* background-color:Red;*/
}
.item1
{
float: left;
width: 48%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.item2
{
float: left;
width: 46%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow2
{
width: 764px;
height: 193px;
position: relative;
margin: 0 auto 0 auto; /* background-color:Yellow; */
}
.item3
{
float: left;
width: 97%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow3
{
width: 764px;
height: 193px;
position: relative;
margin: 0 auto 0 auto;
}
.item4
{
float: left;
width: 97%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow4
{
width: 764px;
height: 143px;
position: relative;
margin: 0 auto 0 auto;
}
.item5
{
float: left;
width: 97%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow5
{
width: 764px;
height: 123px;
position: relative;
margin: 0 auto 0 auto;
}
.item6
{
float: left;
width: 97%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow6
{
width: 795px;
height: 225px;
position: relative;
margin: 0 auto 0 auto;
background-color: black;
}
.footerleft
{
float: left;
width: 46%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.footerright
{
float: left;
width: 48%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
/* end Layout */
/* begin Footer - copyright */
.footer
{
position: relative;
margin-top: 0;
margin-bottom: 0;
width: 100%;
}
.footer-body
{
position: relative;
padding: 8px;
color: #FCD15A;
font-size: 10px;
}
.footer-body ul li
{
font-size: 13px;
line-height: 125%;
color: #FFF9EA;
}
.footer-text p
{
padding: 0;
margin: 0;
text-align: center;
}
.footer-body a, .footer-body a:link, .footer-body a:visited, .footer-body a:hover, .footer-body td, .footer-body th, .footer-body caption
{
color: #FCD15A;
font-size: 10px;
}
.footer-text
{
min-height: 5px;
padding-left: 10px;
padding-right: 10px;
position: relative;
float: left;
left: 50%;
text-align: center;
}
.footer-body a, .footer-body a:link
{
color: #FDE092;
text-decoration: underline;
}
.footer-body a:visited
{
color: #FDE091;
}
.footer-body a:hover
{
color: #FEEEC3;
text-decoration: none;
}
.footer-center
{
position: relative;
float: right;
right: 50%;
}
div.footer img
{
/* WARNING do NOT collapse this to 'border' - inheritance! */
border-width: 0;
margin: 0;
}
/* begin PageFooter */
.page-footer, .page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover
{
font-family: Arial;
font-size: 10px;
letter-spacing: normal;
word-spacing: normal;
font-style: normal;
font-weight: normal;
text-decoration: underline;
color: #E0E0E0;
}
.page-footer
{
position: relative;
z-index: 10;
padding: 1em;
text-align: center;
text-decoration: none;
color: #FDE091;
}
/* end PageFooter */
================================================================
The .ascx of the page that is NOT working - (Home) http://frustrated-inc.bluehorizoncons...
Modified sections Highlighted BOLD
================================================================
<!--Doctype Declaration and CSS Links--------------------------------------------------- -->
<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<link href="skin.css" rel="stylesheet" type="text/css" />
<!--
Created by Kim Peterson v1.0
-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<body>
<div id="main">
<dnn:LOGIN runat="server" id="dnnLOGIN" />
<div class="box sheet">
<div class="box-body sheet-body">
<div class="header">
<!-- header -->
<div class="header" runat="server" id="header" visible="true">
</div>
</div>
<div class="bar nav">
<div class="nav-outer">
<ul class="hmenu">
<li><a href="./Home.aspx" class="active">Home</a> </li>
<li><a href="./AboutUs.aspx">About Us</a> </li>
<li><a href="./Products.aspx">Products</a> </li>
<li><a href="./Warranty.aspx">Warranty</a> </li>
<li><a href="./Suppliers.aspx">Suppliers</a> </li>
<li><a href="./FAQs.aspx">FAQs</a> </li>
<li><a href="./ContactUs.aspx">Contact Us</a> </li>
</ul>
</div>
</div>
<div class="ContentPane" id="ContentPane">
<div class="contentrow1" id="row1" visible="true">
<div class="item1" runat="server" id="item_1" visible="true">
</div>
<div class="item2" runat="server" id="item_2" visible="true">
</div>
</div>
<div class="contentrow2" id="row2" visible="true">
<div class="item3" runat="server" id="item_3" visible="true">
</div>
<div class="item4" runat="server" id="item_4" visible="true">
</div>
<div class="item5" runat="server" id="item_5" visible="true">
</div>
</div>
<div class="contentrow6" id="row6" visible="true">
<div class="footerleft" runat="server" id="footer_left" visible="true">
</div>
<div class="footerright" runat="server" id="footer_right" visible="true">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-body">
<div class="footer-center">
<div class="footer-wrapper">
<div class="footer-text">
<p>
Copyright © 2012, Johnson Lifters. All Rights Reserved.</p>
<p class="page-footer">
<a href="http://www.johnsonlifters.com" target="_blank"></a>created by Frustrated
Incorporated.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
=============================
The related .css file:
=============================
/* Theme Name: Johnson Lifters
Theme URI: http://www.johnsonlifters.com
Version: 1.0
Author: Kim Peterson
Author URI: http://www.frustrated-inc.com */
/* begin Page */
#main, table
{
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
text-align: justify;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
#main
{
position: relative;
z-index: 0;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor: default;
overflow: hidden;
}
body /* site static background image */
{
background: #FFFFFF url('../johnson/images/Bottom_texture.jpg') fixed center top;
padding: 0;
margin: 0;
min-width: 800px;
color: #C4C4C4;
}
.cleared
{
display: block;
clear: both;
float: none;
margin: 0;
padding: 0;
border: none;
font-size: 0;
height: 0;
overflow: hidden;
}
form
{
padding: 0 !important;
margin: 0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* Start Box */
.box, .box-body /* Center site */
{
margin: 0 auto;
position: relative;
}
.box:before, .box:after, .box-body:before, .box-body:after /* Content container -transparent element */
{
position: absolute;
top: 0;
bottom: 0;
content: ' ';
background-repeat: no-repeat;
line-height: 0;
}
.box:before, .box-body:before
{
left: 0;
}
.box:after, .box-body:after
{
right: 0;
}
.box:before
{
overflow: hidden;
background-position: bottom left;
direction: ltr;
z-index: -3;
}
.box:after
{
background-position: bottom right;
z-index: -3;
}
.box-body:before, .box-body:after
{
background-repeat: repeat-y;
}
.box-body:before
{
background-position: top left;
z-index: -3;
}
.box-body:after
{
background-position: top right;
z-index: -3;
}
.box .box:before, .box .box:after, .box-body .box-body:before, .box-body .box-body:after
{
z-index: -2;
}
.box .box .box:before, .box .box .box:after, .box-body .box-body .box-body:before, .box-body .box-body .box-body:after
{
z-index: -1;
}
/* End Box */
/* Start Bar */
.bar /* Menu background image */
{
position: relative;
}
.bar:before, .bar:after
{
position: absolute;
top: 0;
bottom: 0;
content: ' ';
background-repeat: repeat;
z-index: -1;
}
.bar:before
{
left: 0;
background-position: top left;
}
.bar:after
{
right: 0;
background-position: top right;
}
/* End Bar */
/* begin Box, Sheet */
.sheet /* Contentpane */
{
max-width: 800px;
margin-top: 20px;
margin-bottom: 0;
cursor: auto;
width: 800px;
}
.sheet-body
{
padding: 1px;
min-width: 10px;
min-height: 10px;
padding-top: 1px;
padding-bottom: 5px;
}
.sheet:before, .sheet:after
{
content: url('images/sheet_t.png');
font-size: 0;
background-image: url('../johnson/images/sheet_b.png');
}
.sheet:after
{
clip: rect(auto, auto, auto, 794px); /* (top, right, bottom, left) */
}
.sheet:before, .sheet-body:before
{
right: 6px;
}
.sheet-body:after
{
width: 6px;
top: 6px;
bottom: 6px;
background-image: url('../johnson/images/sheet.png');
}
.sheet-body:before
{
top: 6px;
bottom: 6px;
background-image: url('../johnson/images/sheet.png');
}
/* end Box, Sheet */
/* begin Header kp*/
div.header /* Header block */
{
margin: 0 auto;
position: relative;
width: 100%;
height: 169px;
top: 0px;
left: 0px;
}
.header:before /* Header image */
{
position: absolute;
display: block;
content: ' ';
z-index: -2;
top: 0;
width: 100%;
height: 169px;
background-image: url('../johnson/images/JL-logo800.png');
background-repeat: no-repeat;
background-position: center top;
}
/* begin Menu */
/* menu structure */
ul.hmenu a, ul.hmenu a:link, ul.hmenu a:visited, ul.hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.hmenu, ul.hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.hmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
ul.hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.hmenu li li
{
float: none;
width: auto;
}
ul.hmenu li:hover > ul
{
visibility: visible;
top: 100%;
}
ul.hmenu li li:hover > ul
{
top: 0;
left: 100%;
}
ul.hmenu:after, ul.hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.hmenu, ul.hmenu ul
{
min-height: 0;
}
ul.hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('../johnson/images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
ul.hmenu ul.hmenu-left-to-right
{
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.hmenu ul.hmenu-right-to-left
{
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.hmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
ul.hmenu ul ul.hmenu-left-to-right
{
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
ul.hmenu ul ul.hmenu-right-to-left
{
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
}
ul.hmenu li li:hover > ul.hmenu-left-to-right
{
right: auto;
left: 100%;
}
ul.hmenu li li:hover > ul.hmenu-right-to-left
{
left: auto;
right: 100%;
}
ul.hmenu
{
position: relative;
padding: 6px 0 0 0;
float: left;
}
/* end menu structure */
/* menu bar */
.nav
{
margin: 0 auto;
min-height: 45px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
}
.nav:before, .nav:after
{
background-image: url('../johnson/images/nav.png');
}
.nav:before
{
right: 5px;
}
.nav:after
{
width: 5px;
}
/* end menu bar */
.nav-outer
{
position: absolute;
width: 100%;
}
/* end Menu */
/* begin MenuItem */
ul.hmenu > li > a
{
position: relative;
display: block;
height: 39px;
cursor: pointer;
text-decoration: none;
color: #D2D2D2;
padding: 0 20px;
line-height: 39px;
text-align: center;
}
ul.hmenu > li > a:before, ul.hmenu > li > a:after
{
position: absolute;
display: block;
content: ' ';
top: 0;
bottom: 0;
z-index: -1;
background-image: url('../johnson/images/menuitem.png');
}
ul.hmenu > li > a:before
{
left: 0;
right: 8px;
background-position: top left;
}
ul.hmenu > li > a:after
{
width: 8px;
right: 0;
background-position: top right;
}
.hmenu a, .hmenu a:link, .hmenu a:visited, .hmenu a:hover
{
font-family: "Arial Narrow" ,Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 16px;
text-align: left;
text-decoration: none;
}
ul.hmenu > li > a.active:before
{
background-position: bottom left;
}
ul.hmenu > li > a.active:after
{
background-position: bottom right;
}
ul.hmenu > li > a.active
{
color: #FFFFFF;
}
ul.hmenu > li > a:hover:before, ul.hmenu > li:hover > a:before
{
background-position: center left;
}
ul.hmenu > li > a:hover:after, ul.hmenu > li:hover > a:after
{
background-position: center right;
}
ul.hmenu > li > a:hover, ul.hmenu > li:hover > a
{
color: #4D3901;
}
/* end MenuItem */
/* begin MenuSeparator */
ul.hmenu > li
{
margin-left: 2px;
}
ul.hmenu > li:first-child
{
margin-left: 0;
}
/* end MenuSeparator */
/* begin MenuSubItem */
.hmenu ul a
{
display: block;
white-space: nowrap;
height: 23px;
background-image: url('../johnson/images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0;
border-style: solid;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 23px;
color: #ECECEC;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-size: 12px;
margin: 0;
padding: 0 8px;
}
.hmenu ul > li:first-child > a
{
border-top-width: 0;
}
.hmenu ul a:link, .hmenu ul a:visited, .hmenu ul a:hover, .hmenu ul a:active
{
text-align: left;
text-decoration: none;
line-height: 23px;
color: #ECECEC;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-size: 12px;
margin: 0;
padding: 0 8px;
}
.hmenu ul li a:hover
{
color: #FEF4D9;
background-position: left bottom;
border-top-width: 0 !important;
}
.hmenu ul li:hover > a
{
color: #FEF4D9;
background-position: left bottom;
border-top-width: 0 !important;
}
/* end MenuSubItem */
/* begin Layout - begin Box, BlockContent */
.ContentPane
{
width: 800px;
height: auto;
}
.contentrow1
{
width: 764px;
height: 258px;
position: relative;
margin: 0 auto 0 auto; /* background-color:Red;*/
}
.item1
{
float: left;
width: 48%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.item2
{
float: left;
width: 46%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow2
{
width: 764px;
height: 255px;
position: relative;
margin: 0 auto 0 auto;
}
.item3
{
float: left;
width: 30%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.item4
{
float: left;
width: 30%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.item5
{
float: left;
width: 30%;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
.contentrow6 /* Footer Modifications - footer info sections included in content box*/
{
width: 795px;
height: 225px;
position: relative;
margin: 0 auto 0 auto;
background-color: black;
}
.footerleft
{
float: left;
width: 46%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
.footerright
{
float: left;
width: 48%;
height: auto;
padding-top: 20px;
padding-right: 10px;
padding-left: 10px;
}
/* end Layout */
/* begin Footer - copyright */
.footer
{
position: relative;
margin-top: 0;
margin-bottom: 0;
width: 100%;
}
.footer-body
{
position: relative;
padding: 8px;
color: #FCD15A;
font-size: 10px;
}
.footer-body ul li
{
font-size: 13px;
line-height: 125%;
color: #FFF9EA;
}
.footer-text p
{
padding: 0;
margin: 0;
text-align: center;
}
.footer-body a, .footer-body a:link, .footer-body a:visited, .footer-body a:hover, .footer-body td, .footer-body th, .footer-body caption
{
color: #FCD15A;
font-size: 10px;
}
.footer-text
{
min-height: 5px;
padding-left: 10px;
padding-right: 10px;
position: relative;
float: left;
left: 50%;
text-align: center;
}
.footer-body a, .footer-body a:link
{
color: #FDE092;
text-decoration: underline;
}
.footer-body a:visited
{
color: #FDE091;
}
.footer-body a:hover
{
color: #FEEEC3;
text-decoration: none;
}
.footer-center
{
position: relative;
float: right;
right: 50%;
}
div.footer img
{
/* WARNING do NOT collapse this to 'border' - inheritance! */
border-width: 0;
margin: 0;
}
/* begin PageFooter */
.page-footer, .page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover
{
font-family: Arial;
font-size: 10px;
letter-spacing: normal;
word-spacing: normal;
font-style: normal;
font-weight: normal;
text-decoration: underline;
color: #E0E0E0;
}
.page-footer
{
position: relative;
z-index: 10;
padding: 1em;
text-align: center;
text-decoration: none;
color: #FDE091;
}
/* end PageFooter */
=========================================================== END CODE SECTION=============
Please help. Can anyone out there tell me how to get the Home page to act like the About Us page? I am lost as to how to resolve this.
All suggestions are greatly appreciated.
Thank you for taking the time to review this post.
Regards.