Grow your CSS skills. Land your dream job.

Need help! Link works o.k. at first, then 404 not found

  • # September 6, 2009 at 3:03 am

    Hello All,

    Right now I only have the Home and About Pages uploaded plus all images and css and at first when you click on the about tab it works but then if you click back to home page and then back on about it is 404 not found and the string says about/about which makes no sensed.

    Here is the site: http://tolonopresbyterian.org

    Also, how to I make the sidebars extend??

    Thanks for any help.

    Kendra

    The main css:

    CSS -

    * Collapse All
    * Expand All

    Code:
    @charset “UTF-8″;
    body {
    margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #676356;
    font: 100% “Lucida Grande”, Lucida, Verdana, sans-serif;
    background: url(../img/shared_assets/mainbak_vine-1px.jpg) 50% 0;
    }

    #fauxBody {
    background: url(../img/shared_assets/mainbak_vine-small.jpg) no-repeat 50% 0;
    }

    .twoColFixLtHdr #container {
    width: 860px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    margin: 0 auto;
    text-align: left;
    }
    .twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 153px;
    margin: 0 0 0 -69px;
    background: url(../img/shared_assets/logotype-top_new.png) no-repeat 25px 23px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    }

    .twoColFixLtHdr #header #serviceTimes {
    /* The total height for this element is 34 px. 24 in height and 10 in padding*/
    width: 182px;
    height: 24px;
    background: url(../img/shared_assets/buttons/servicetimes_button-on.png) no-repeat;
    font-size: 9px;
    color: white;
    padding-top: 10px;
    padding-left: 14px;
    margin-left: 63px;
    }

    .twoColFixLtHdr #header #serviceTimes a:link {
    text-decoration: none;
    color: white;
    }

    .twoColFixLtHdr #header #serviceTimes a:visited {
    text-decoration: none;
    color: white;
    }

    .twoColFixLtHdr #header #serviceTimes a:hover {
    text-decoration: none;
    color: #fef600;
    }

    .twoColFixLtHdr #header h1 {
    margin: 0;
    padding: 0;
    }
    .twoColFixLtHdr #header #welcome #top {
    color: #800000;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 9px;
    }

    #welcome {
    padding-top: 12px;
    padding-left: 275px;
    text-decoration: none;
    color: #800000;
    font: normal normal 14px/15px Georgia, “Times New Roman”, Times, serif;
    margin-right: 103px;
    }

    #welcome a:link {
    color: #3d0800;
    text-decoration: none;
    background-color: #a54514;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    display: inline;
    border-style: none;
    background-image: none;
    }

    #welcome a:visited {
    color: #3d0800;
    text-decoration: none;
    background-color: #a54514;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    display: inline;
    border-style: none;
    background-image: none;
    }

    #welcome a:hover {
    color: #680c04;
    text-decoration: none;
    background-color: #d84100;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    background-image: none;
    }

    #welcome a:active {
    color: #680c04;
    text-decoration: none;
    background-color: #d84100;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    background-image: none;
    }

    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 20px;
    color: #1a1a19;
    font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
    background-color: transparent;
    }

    .twoColFixLtHdr #mainContent #image {
    border: 1px solid #c8c6ba;
    width: 565px;
    margin-top: 64px;
    }

    .twoColFixLtHdr #mainContent .intStory {
    margin-left: 24px;
    margin-right: 10px;
    line-height: 16px;
    color: #676356;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule {
    font-size: 9px;
    margin-top: 26px;
    margin-bottom: 36px;
    padding: 0;
    border-bottom: 1px dotted #bababa;
    width: 534px;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule td {
    padding: 6px 10px;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .tdLite {
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .tdDark {
    background-color: #f0ecda;
    color: #343434;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .hedr {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    border-bottom: 1px dotted #bababa;

    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons {
    font-size: 9px;
    margin-top: 26px;
    margin-bottom: 36px;
    padding: 0;
    border-bottom: 1px dotted #bababa;
    width: 534px;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons td {
    padding: 6px 10px;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .tdLite {
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .tdDark {
    background-color: #f0ecda;
    color: #343434;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .hedr {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    border-bottom: 1px dotted #bababa;

    }

    .twoColFixLtHdr #mainContent .intStory a:link {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #d30000;
    }

    .twoColFixLtHdr #mainContent .intStory a:visited {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #d30000;
    }

    .twoColFixLtHdr #mainContent .intStory a:hover {
    color: #4e4e4e;
    text-decoration: underline;
    }
    .
    twoColFixLtHdr #mainContent .intStory a:active {
    color: #4e4e4e;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory .imageBasic {
    float: left;
    margin-right: 14px;
    margin-bottom: 12px;
    }

    .twoColFixLtHdr #mainContent .intStory .imageBasicRight {
    float: right;
    margin-bottom: 12px;
    margin-left: 14px;
    }

    .twoColFixLtHdr #mainContent .intStory li {
    list-style-image: none;
    list-style-type: none;
    background: url(../img/shared_assets/bullet-orange.png) no-repeat 0 4px;
    padding: 0 0 2px 16px;
    }

    .twoColFixLtHdr #mainContent .intStory li a:link {
    color: #2e2e2e;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .intStory li a:visited {
    color: #2e2e2e;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .intStory li a:hover {
    color: #b90000;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory li a:active {
    color: #b90000;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory h4 {
    text-decoration: none;
    font: normal normal 18px Georgia, “Times New Roman”, Times, serif;
    margin: 0;
    padding-top: 22px;
    color: #404040;
    }

    .twoColFixLtHdr #mainContent .intStory h5 {
    text-decoration: none;
    margin: 0;
    padding-top: 22px;
    color: #404040;
    font-variant: normal;
    font-style: normal;
    font-size: 12px;
    }

    .twoColFixLtHdr #mainContent .hedrInterior1 {
    color: #ee850d;
    text-transform: lowercase;
    font: normal 26px Georgia, “Times New Roman”, Times, serif;
    margin-top: 10px;
    margin-bottom: 1px;
    margin-left: 24px;
    }

    .twoColFixLtHdr #mainContent .hedrInterior1 .tier2 {
    color: #c2ad98;
    display: inline;
    }

    #subhedrItalics {
    margin-bottom: 28px;
    margin-top: 4px;
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    margin-left: 24px;
    }

    #subhedrItalics .regularLink {
    display: inline;
    }

    #subhedrItalics a:link {
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    text-transform: lowercase;
    border-style: none;
    border-width: 0;
    background-color: transparent;
    margin: 0 0 28px;
    padding: 0;
    display: inline;
    text-decoration: none;
    background-image: none;
    }

    #subhedrItalics a:visited {
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    text-transform: lowercase;
    border-style: none;
    border-width: 0;
    background-color: transparent;
    margin: 0 0 28px;
    padding: 0;
    display: inline;
    text-decoration: none;
    background-image: none;
    }

    #subhedrItalics a:hover {
    color: #ff6c00;
    text-decoration: underline;
    }

    #subhedrItalics a:active {
    color: #ff6c00;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .hedrBody1 {
    background: url(../img/shared_assets/body_topHeaderBak-gradient.png) repeat-x;
    height: 45px;
    color: #9a3b0f;
    font: 20px Georgia, “Times New Roman”, Times, serif;
    padding-top: 10px;
    padding-left: 28px;
    margin-top: 18px;
    }

    .twoColFixLtHdr #mainContent .announcement {
    margin-left: 28px;
    margin-right: 14px;
    color: #1a1a19;
    }

    .twoColFixLtHdr #mainContent .announcement a:link, a:visited {
    color: #d30000;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .announcement a:hover, a:active {
    color: #4e4e4e;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .announcement .annoucePic{
    float: right;
    margin-left: 12px;
    }

    .twoColFixLtHdr #mainContent .announcement .buttonClick{
    margin-bottom: 30px;
    margin-top: 9px;
    display: block;
    border-style: none;
    }

    .twoColFixLtHdr #mainContent .announcement .eventDate {
    color: #c96a3e;
    font: 16px Georgia, “Times New Roman”, Times, serif;
    margin-top: 10px;
    margin-bottom: 8px;
    }

    .twoColFixLtHdr #mainContent .announcement .sig {
    font-style: italic;
    margin-top: 3px;
    }

    .horzBeveledLine {
    background: url(../img/shared_assets/beveled-line.gif) repeat-x;
    width: 100%;
    height: 2px;
    }

    /*
    .twoColFixLtHdr #mainContentBottom {
    color: #1a1a19;
    font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 0;
    width: 860px;
    background: url(../img/shared_assets/mainContentBak.jpg) 50%;
    padding-top: 0;
    padding-bottom: 0;
    }

    */

    /* @group 3TAB BOX */

    /* Ths is commented out because 3tab.css has this code

    .twoColFixLtHdr #mainContent #threetabBox {
    height: 270px;
    margin-top: 42px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody {
    background-color: white;
    width: 569px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {

    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow #tabTable {
    height: 25px;
    }

    .twoColFixLtHdr #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-image: url(../img/shared_assets/tabbak_idle.gif);
    color: #817c7b;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle li {
    list-style-image: none;
    list-style-type: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
    margin-left: 0;
    padding-left: 14px;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle a:link, a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
    padding-left: 16px;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    .twoColFixLtHdr #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;

    padding-right: 9px;
    color: #726155;
    font-size: 12px;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 4px;
    padding-left: 19px;
    margin: 0;
    }

    */
    /* @end */

    /* @group SIDEBARS */

    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 212px;
    margin-left: 20px;
    padding: 6px;
    margin-top: 0;
    }

    /* @group GLOBALNAV */

    #globalNav {
    color: #5c5e52;
    font: normal 16px Georgia, “Times New Roman”, Times, serif;
    text-align: right;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    #globalNav #topButton {
    border-top: 1px solid #d5d0ba;
    font-size: 16px;
    }

    #globalNav a:link {
    background-color: #eae8db;
    display: block;
    border-top: 1px solid white;
    border-left: 1px solid #d5d0ba;
    border-bottom: 1px solid #d5d0ba;
    height: 26px;
    margin: 0;
    padding-top: 9px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    color: #5e5e52;
    border-right: 1px solid #d5d0ba;
    font-size: 16px;
    background-image: none;
    }

    #globalNav a:visited {
    background-color: #eae8db;
    display: block;
    border-top: 1px solid white;
    border-left: 1px solid #d5d0ba;
    border-bottom: 1px solid #d5d0ba;
    height: 26px;
    margin: 0;
    padding-top: 9px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    color: #5e5e52;
    border-right: 1px solid #d5d0ba;
    font-size: 16px;
    background-image: none;
    }

    #globalNav a:hover {
    background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
    color: #c75a23;
    }

    #globalNav a:active {
    background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
    color: #c75a23;
    }

    /* @end */

    .twoColFixLtHdr #sidebar1 #sidebarMiddle {
    color: #5c5e52;
    background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
    margin-top: 18px;
    }

    .currentEvents
    {
    text-align: left;
    padding: 0;
    margin: 5px 5px 8px 14px;
    }

    .currentEvents .currentEventDate
    {
    color: #c85a23;
    text-transform: uppercase;
    font-size: 11px;
    }

    .currentEvents .currentClassDetail {
    color: #727267;
    font-size: 11px;
    }

    .currentClassDetail a:link {
    color: #727267;
    background-image: none;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    .currentClassDetail a:visited {
    color: #727267;
    background-image: none;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    .currentClassDetail a:hover {
    color: #383838;
    }

    .currentClassDetail a:active {
    color: #383838;
    }

    .dottedline {
    background: url(../img/shared_assets/dottedline.gif) repeat-x 0 0;
    height: 3px;
    margin-right: 10px;
    margin-left: 10px;
    }

    .twoColFixLtHdr #sidebar1 .hedrCalendar {
    color: #9a3b0f;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    background: url(../img/shared_assets/sidebars/hedr-calendarimage.png) no-repeat 8px 6px;
    height: 36px;
    padding-top: 14px;
    padding-bottom: 9px;
    padding-left: 61px;
    }

    .twoColFixLtHdr #sidebar1 .hedrPaper {
    color: #9a3b0f;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    background: url(../img/shared_assets/sidebars/hedr-paperimage.png) no-repeat 20px 10px;
    height: 36px;
    padding: 14px 12px 8px 64px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort {
    color: #5c5e52;
    background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
    margin-top: 24px;
    padding-bottom: 50px;
    }

    /* @group Join and Webmaster box */

    .twoColFixLtHdr #sidebar1 #boxWebmaster {
    border: 1px solid #d5d0ba;
    background-color: #eae8db;
    color: #727267;
    font-size: 10px;
    font-weight: bold;
    margin-top: 22px;
    margin-bottom: 12px;
    padding: 12px 12px 12px 16px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin {
    background: url(../img/shared_assets/icon-join.gif) no-repeat 0 0;
    padding-left: 28px;
    height: 20px;
    padding-top: 3px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin a:link, a:visited {
    text-decoration: none;
    color: #727267;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster {
    background: url(../img/shared_assets/icon-newsletter.gif) no-repeat 0 0;
    padding-left: 28px;
    height: 20px;
    padding-top: 3px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster a:link, a:visited {
    text-decoration: none;
    color: #727267;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress {
    font-size: 10px;
    text-align: center;
    padding-top: 26px;
    padding-bottom: 10px;
    line-height: 14px;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress a:link, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
    color: black;
    text-decoration: none;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress a:hover, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
    color: #727267;
    text-decoration: underline;
    }

    /* @end */

    /* all the styles for the SURMON sidebar – BEGIN*/

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonTitle {
    color: #2c2824;
    font-size: 11px;
    margin-left: 18px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonPastor {
    font-size: 11px;
    margin-left: 18px;
    color: #7f746c;
    margin-top: 4px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonDate {
    font-size: 11px;
    display: inline-block;
    color: #c85a23;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonTable {
    margin-left: 16px;
    margin-top: 8px;
    padding: 0;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell {
    padding-right: 4px;
    margin: 0;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell .buttonImg{
    border-width: 0;
    border-style: none;
    }

    /* all the styles for the SURMON sidebar – END*/

    /* @end */

    .twoColFixLtHdr #footer {
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background: url(../img/shared_assets/footer-baktile.jpg) 0 0;
    }

    .twoColFixLtHdr #lowerNavi {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
    padding: 10px 0;
    font-size: 9px;
    background: url(../img/shared_assets/logo-small_new.gif) no-repeat 655px 4px;
    height: 37px;
    color: #a8a899;
    float: none;
    display: block;
    }

    .twoColFixLtHdr #footer #copyright {
    color: #9b9c8e;
    font-size: 9px;
    padding-bottom: 20px;
    }

    .twoColFixLtHdr #footer #copyright a:link, .twoColFixLtHdr #footer #copyright a:visited {
    color: #9b9c8e;
    font-size: 9px;
    text-decoration: none;
    }

    .twoColFixLtHdr #footer #copyright a:hover, .twoColFixLtHdr #footer #copyright a:active {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #lowerNavi a:link {
    color: #727267;
    text-decoration: none;
    }

    .twoColFixLtHdr #lowerNavi a:visited {
    color: #727267;
    text-decoration: none;
    }
    .twoColFixLtHdr #lowerNavi a:hover {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #lowerNavi a:active {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }

    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

    iframe {
    width: 100%;
    height: 320px;
    }.address {
    font-size: 10px;
    color: #c96a3e;
    }

    http://www.npctucson.org/tab1.html

    http://www.npctucson.org/css/3tab.css

    /* this page formats the three tabs on the home page*/

    body {
    margin: 0;
    padding: 0;
    }

    /* @group 3TAB BOX */

    #threetabBox {
    margin-top: 42px;
    }

    #threetabBox #tabBoxbody {
    background-color: white;
    width: 568px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    font-size: 13px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {
    }

    #threetabBox #tabRow #tabTable {
    height: 25px;

    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    color: #817c7b;
    background-image: url(../img/shared_assets/tabbak_idle.png);
    }

    #tabRow #tabTable .idle a:link {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #726155;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 3px;
    padding-left: 19px;
    margin: 0;
    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    /* @end */

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





    Upcoming events
    WYN Starts up Again!
    Sign-up September 18 at 5:30 p.m.

    First Presbyterian Church of Tolono
    104 E. Vine St.
    Tolono, IL 61880
    (217) 485-3725
    tolonopres@yahoo.com


    Recent sermon
    “. . .!”
    by Kerry Bean|

    09.05.09

    listen listen

    Highlights
    Welcome
    Rev. Kerry Bean"If you are new to our First Presbyterian Church of Tolono Web site I welcome you! Please browse around and . . .”
    - Rev. Kerry Bean, Designated Pastor


    # September 6, 2009 at 5:01 am

    This a very simple mix-up with site arrangement.
    Are you doing it manually or using some program/builder to make web-site?
    Anyways, this is what’s happening:
    When you go to http://tolonopresbyterian.org/ it actually opens the first page in root directory – index.html
    When you click on "About", you go into http://tolonopresbyterian.org/about/index.html, into "about" directory. Now you’re inside "about" directory.
    Now you click back on Home, and you go to http://tolonopresbyterian.org/about/index.html which is the same page as About. It doesn’t take you back home, because you’re still in the "About" directory.
    And when you click on About again, it takes you to – http://tolonopresbyterian.org/about/about/index.html – now you’re inside "About/About" directory, which does not exist, and that’s why it give you the error 404.

    Solution:
    Edit "index.html" inside About directory – Change "Home" to <a href="http://tolonopresbyterian.org/index.html"&gt;, and "About" from <a href="http://tolonopresbyterian.org/about/about/index.html "> into <a href=" http://tolonopresbyterian.org/about/index.html"> – See the difference? Only one /about directory is used, because second does not exist.

    Same philosophy goes for other links if you run into the same problem. Just look carefully for the directories where it points to.

    # September 6, 2009 at 9:15 am

    404 is a not found command…..

    make sure your links are going to the correct places…

    if you want everyting in the same directory just make sure your links are to something unique/

    index.html, 1.html, 2.html, 3.html, etc

    and your links should look like <a href="1.html">Page One</a>

    all of the links should be roughly the same, except when styling your links and you want to show off where the user is…. thats for another time.

    but if you are using directories in your links then make sure all your links go to the correct directory to show the correct file

    e.g.

    Code:
    index.html
    |
    —–About //directory
    | |
    | ———index.html
    | |
    ——resources //directory
    | |
    | ———- index.html
    contact.html

    with teh above you can make your link to about an index.html
    e.g. <a href="http://www.abc.com/about/index.html">About us</a>

    so you have 2 options relative links or absolut links:
    Absolute links – <a href="http://www.abc.com/about/index.html">About us</a>
    relative links – <a href="about/index.html">About us</a>

    I hope this helps???

    # September 6, 2009 at 3:22 pm

    In addition to the above, you can also use relative links in the following manner.

    Assuming your site is laid out like this:

    • index.html[/*:m]
    • about/
      • index.html[/*:m][/list:u][/*:m][/list:u]
        Code:

        Hope this helps, instead of confusing you further!

    # September 6, 2009 at 8:18 pm

    It worked! Now see my next note if you can help me with the image issue that would be great!

    Thanks so much for you help!

    Kendra

    # September 6, 2009 at 8:42 pm

    Never mind. It seems to be working!! Thanks for your help and my scatterbrain.

    Now if you could help me with the image problem that would be great – where the background image needs to extend to meet up with the footer so it is a square essentially.

    Thanks so much – I couldn’t survive without this board!

    Kendra

    The css again:

    CSS – http://www.tolonopresbyterian.org

    * Collapse All
    * Expand All

    Code:
    @charset “UTF-8″;
    body {
    margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #676356;
    font: 100% “Lucida Grande”, Lucida, Verdana, sans-serif;
    background: url(../img/shared_assets/mainbak_vine-1px.jpg) 50% 0;
    }

    #fauxBody {
    background: url(../img/shared_assets/mainbak_vine-small.jpg) no-repeat 50% 0;
    }

    .twoColFixLtHdr #container {
    width: 860px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    margin: 0 auto;
    text-align: left;
    }
    .twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 153px;
    margin: 0 0 0 -69px;
    background: url(../img/shared_assets/logotype-top_new.png) no-repeat 25px 23px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    }

    .twoColFixLtHdr #header #serviceTimes {
    /* The total height for this element is 34 px. 24 in height and 10 in padding*/
    width: 182px;
    height: 24px;
    background: url(../img/shared_assets/buttons/servicetimes_button-on.png) no-repeat;
    font-size: 9px;
    color: white;
    padding-top: 10px;
    padding-left: 14px;
    margin-left: 63px;
    }

    .twoColFixLtHdr #header #serviceTimes a:link {
    text-decoration: none;
    color: white;
    }

    .twoColFixLtHdr #header #serviceTimes a:visited {
    text-decoration: none;
    color: white;
    }

    .twoColFixLtHdr #header #serviceTimes a:hover {
    text-decoration: none;
    color: #fef600;
    }

    .twoColFixLtHdr #header h1 {
    margin: 0;
    padding: 0;
    }
    .twoColFixLtHdr #header #welcome #top {
    color: #800000;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 9px;
    }

    #welcome {
    padding-top: 12px;
    padding-left: 275px;
    text-decoration: none;
    color: #800000;
    font: normal normal 14px/15px Georgia, “Times New Roman”, Times, serif;
    margin-right: 103px;
    }

    #welcome a:link {
    color: #3d0800;
    text-decoration: none;
    background-color: #a54514;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    display: inline;
    border-style: none;
    background-image: none;
    }

    #welcome a:visited {
    color: #3d0800;
    text-decoration: none;
    background-color: #a54514;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    display: inline;
    border-style: none;
    background-image: none;
    }

    #welcome a:hover {
    color: #680c04;
    text-decoration: none;
    background-color: #d84100;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    background-image: none;
    }

    #welcome a:active {
    color: #680c04;
    text-decoration: none;
    background-color: #d84100;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    background-image: none;
    }

    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 20px;
    color: #1a1a19;
    font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
    background-color: transparent;
    }

    .twoColFixLtHdr #mainContent #image {
    border: 1px solid #c8c6ba;
    width: 565px;
    margin-top: 64px;
    }

    .twoColFixLtHdr #mainContent .intStory {
    margin-left: 24px;
    margin-right: 10px;
    line-height: 16px;
    color: #676356;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule {
    font-size: 9px;
    margin-top: 26px;
    margin-bottom: 36px;
    padding: 0;
    border-bottom: 1px dotted #bababa;
    width: 534px;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule td {
    padding: 6px 10px;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .tdLite {
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .tdDark {
    background-color: #f0ecda;
    color: #343434;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .hedr {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    border-bottom: 1px dotted #bababa;

    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons {
    font-size: 9px;
    margin-top: 26px;
    margin-bottom: 36px;
    padding: 0;
    border-bottom: 1px dotted #bababa;
    width: 534px;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons td {
    padding: 6px 10px;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .tdLite {
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .tdDark {
    background-color: #f0ecda;
    color: #343434;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .hedr {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    border-bottom: 1px dotted #bababa;

    }

    .twoColFixLtHdr #mainContent .intStory a:link {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #d30000;
    }

    .twoColFixLtHdr #mainContent .intStory a:visited {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #d30000;
    }

    .twoColFixLtHdr #mainContent .intStory a:hover {
    color: #4e4e4e;
    text-decoration: underline;
    }
    .
    twoColFixLtHdr #mainContent .intStory a:active {
    color: #4e4e4e;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory .imageBasic {
    float: left;
    margin-right: 14px;
    margin-bottom: 12px;
    }

    .twoColFixLtHdr #mainContent .intStory .imageBasicRight {
    float: right;
    margin-bottom: 12px;
    margin-left: 14px;
    }

    .twoColFixLtHdr #mainContent .intStory li {
    list-style-image: none;
    list-style-type: none;
    background: url(../img/shared_assets/bullet-orange.png) no-repeat 0 4px;
    padding: 0 0 2px 16px;
    }

    .twoColFixLtHdr #mainContent .intStory li a:link {
    color: #2e2e2e;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .intStory li a:visited {
    color: #2e2e2e;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .intStory li a:hover {
    color: #b90000;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory li a:active {
    color: #b90000;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory h4 {
    text-decoration: none;
    font: normal normal 18px Georgia, “Times New Roman”, Times, serif;
    margin: 0;
    padding-top: 22px;
    color: #404040;
    }

    .twoColFixLtHdr #mainContent .intStory h5 {
    text-decoration: none;
    margin: 0;
    padding-top: 22px;
    color: #404040;
    font-variant: normal;
    font-style: normal;
    font-size: 12px;
    }

    .twoColFixLtHdr #mainContent .hedrInterior1 {
    color: #ee850d;
    text-transform: lowercase;
    font: normal 26px Georgia, “Times New Roman”, Times, serif;
    margin-top: 10px;
    margin-bottom: 1px;
    margin-left: 24px;
    }

    .twoColFixLtHdr #mainContent .hedrInterior1 .tier2 {
    color: #c2ad98;
    display: inline;
    }

    #subhedrItalics {
    margin-bottom: 28px;
    margin-top: 4px;
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    margin-left: 24px;
    }

    #subhedrItalics .regularLink {
    display: inline;
    }

    #subhedrItalics a:link {
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    text-transform: lowercase;
    border-style: none;
    border-width: 0;
    background-color: transparent;
    margin: 0 0 28px;
    padding: 0;
    display: inline;
    text-decoration: none;
    background-image: none;
    }

    #subhedrItalics a:visited {
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    text-transform: lowercase;
    border-style: none;
    border-width: 0;
    background-color: transparent;
    margin: 0 0 28px;
    padding: 0;
    display: inline;
    text-decoration: none;
    background-image: none;
    }

    #subhedrItalics a:hover {
    color: #ff6c00;
    text-decoration: underline;
    }

    #subhedrItalics a:active {
    color: #ff6c00;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .hedrBody1 {
    background: url(../img/shared_assets/body_topHeaderBak-gradient.png) repeat-x;
    height: 45px;
    color: #9a3b0f;
    font: 20px Georgia, “Times New Roman”, Times, serif;
    padding-top: 10px;
    padding-left: 28px;
    margin-top: 18px;
    }

    .twoColFixLtHdr #mainContent .announcement {
    margin-left: 28px;
    margin-right: 14px;
    color: #1a1a19;
    }

    .twoColFixLtHdr #mainContent .announcement a:link, a:visited {
    color: #d30000;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .announcement a:hover, a:active {
    color: #4e4e4e;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .announcement .annoucePic{
    float: right;
    margin-left: 12px;
    }

    .twoColFixLtHdr #mainContent .announcement .buttonClick{
    margin-bottom: 30px;
    margin-top: 9px;
    display: block;
    border-style: none;
    }

    .twoColFixLtHdr #mainContent .announcement .eventDate {
    color: #c96a3e;
    font: 16px Georgia, “Times New Roman”, Times, serif;
    margin-top: 10px;
    margin-bottom: 8px;
    }

    .twoColFixLtHdr #mainContent .announcement .sig {
    font-style: italic;
    margin-top: 3px;
    }

    .horzBeveledLine {
    background: url(../img/shared_assets/beveled-line.gif) repeat-x;
    width: 100%;
    height: 2px;
    }

    /*
    .twoColFixLtHdr #mainContentBottom {
    color: #1a1a19;
    font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 0;
    width: 860px;
    background: url(../img/shared_assets/mainContentBak.jpg) 50%;
    padding-top: 0;
    padding-bottom: 0;
    }

    */

    /* @group 3TAB BOX */

    /* Ths is commented out because 3tab.css has this code

    .twoColFixLtHdr #mainContent #threetabBox {
    height: 270px;
    margin-top: 42px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody {
    background-color: white;
    width: 569px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {

    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow #tabTable {
    height: 25px;
    }

    .twoColFixLtHdr #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-image: url(../img/shared_assets/tabbak_idle.gif);
    color: #817c7b;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle li {
    list-style-image: none;
    list-style-type: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
    margin-left: 0;
    padding-left: 14px;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle a:link, a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
    padding-left: 16px;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    .twoColFixLtHdr #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;

    padding-right: 9px;
    color: #726155;
    font-size: 12px;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 4px;
    padding-left: 19px;
    margin: 0;
    }

    */
    /* @end */

    /* @group SIDEBARS */

    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 212px;
    margin-left: 20px;
    padding: 6px;
    margin-top: 0;
    }

    /* @group GLOBALNAV */

    #globalNav {
    color: #5c5e52;
    font: normal 16px Georgia, “Times New Roman”, Times, serif;
    text-align: right;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    #globalNav #topButton {
    border-top: 1px solid #d5d0ba;
    font-size: 16px;
    }

    #globalNav a:link {
    background-color: #eae8db;
    display: block;
    border-top: 1px solid white;
    border-left: 1px solid #d5d0ba;
    border-bottom: 1px solid #d5d0ba;
    height: 26px;
    margin: 0;
    padding-top: 9px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    color: #5e5e52;
    border-right: 1px solid #d5d0ba;
    font-size: 16px;
    background-image: none;
    }

    #globalNav a:visited {
    background-color: #eae8db;
    display: block;
    border-top: 1px solid white;
    border-left: 1px solid #d5d0ba;
    border-bottom: 1px solid #d5d0ba;
    height: 26px;
    margin: 0;
    padding-top: 9px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    color: #5e5e52;
    border-right: 1px solid #d5d0ba;
    font-size: 16px;
    background-image: none;
    }

    #globalNav a:hover {
    background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
    color: #c75a23;
    }

    #globalNav a:active {
    background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
    color: #c75a23;
    }

    /* @end */

    .twoColFixLtHdr #sidebar1 #sidebarMiddle {
    color: #5c5e52;
    background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
    margin-top: 18px;
    }

    .currentEvents
    {
    text-align: left;
    padding: 0;
    margin: 5px 5px 8px 14px;
    }

    .currentEvents .currentEventDate
    {
    color: #c85a23;
    text-transform: uppercase;
    font-size: 11px;
    }

    .currentEvents .currentClassDetail {
    color: #727267;
    font-size: 11px;
    }

    .currentClassDetail a:link {
    color: #727267;
    background-image: none;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    .currentClassDetail a:visited {
    color: #727267;
    background-image: none;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    .currentClassDetail a:hover {
    color: #383838;
    }

    .currentClassDetail a:active {
    color: #383838;
    }

    .dottedline {
    background: url(../img/shared_assets/dottedline.gif) repeat-x 0 0;
    height: 3px;
    margin-right: 10px;
    margin-left: 10px;
    }

    .twoColFixLtHdr #sidebar1 .hedrCalendar {
    color: #9a3b0f;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    background: url(../img/shared_assets/sidebars/hedr-calendarimage.png) no-repeat 8px 6px;
    height: 36px;
    padding-top: 14px;
    padding-bottom: 9px;
    padding-left: 61px;
    }

    .twoColFixLtHdr #sidebar1 .hedrPaper {
    color: #9a3b0f;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    background: url(../img/shared_assets/sidebars/hedr-paperimage.png) no-repeat 20px 10px;
    height: 36px;
    padding: 14px 12px 8px 64px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort {
    color: #5c5e52;
    background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
    margin-top: 24px;
    padding-bottom: 50px;
    }

    /* @group Join and Webmaster box */

    .twoColFixLtHdr #sidebar1 #boxWebmaster {
    border: 1px solid #d5d0ba;
    background-color: #eae8db;
    color: #727267;
    font-size: 10px;
    font-weight: bold;
    margin-top: 22px;
    margin-bottom: 12px;
    padding: 12px 12px 12px 16px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin {
    background: url(../img/shared_assets/icon-join.gif) no-repeat 0 0;
    padding-left: 28px;
    height: 20px;
    padding-top: 3px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin a:link, a:visited {
    text-decoration: none;
    color: #727267;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster {
    background: url(../img/shared_assets/icon-newsletter.gif) no-repeat 0 0;
    padding-left: 28px;
    height: 20px;
    padding-top: 3px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster a:link, a:visited {
    text-decoration: none;
    color: #727267;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress {
    font-size: 10px;
    text-align: center;
    padding-top: 26px;
    padding-bottom: 10px;
    line-height: 14px;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress a:link, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
    color: black;
    text-decoration: none;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress a:hover, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
    color: #727267;
    text-decoration: underline;
    }

    /* @end */

    /* all the styles for the SURMON sidebar – BEGIN*/

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonTitle {
    color: #2c2824;
    font-size: 11px;
    margin-left: 18px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonPastor {
    font-size: 11px;
    margin-left: 18px;
    color: #7f746c;
    margin-top: 4px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonDate {
    font-size: 11px;
    display: inline-block;
    color: #c85a23;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonTable {
    margin-left: 16px;
    margin-top: 8px;
    padding: 0;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell {
    padding-right: 4px;
    margin: 0;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell .buttonImg{
    border-width: 0;
    border-style: none;
    }

    /* all the styles for the SURMON sidebar – END*/

    /* @end */

    .twoColFixLtHdr #footer {
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background: url(../img/shared_assets/footer-baktile.jpg) 0 0;
    }

    .twoColFixLtHdr #lowerNavi {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
    padding: 10px 0;
    font-size: 9px;
    background: url(../img/shared_assets/logo-small_new.gif) no-repeat 655px 4px;
    height: 37px;
    color: #a8a899;
    float: none;
    display: block;
    }

    .twoColFixLtHdr #footer #copyright {
    color: #9b9c8e;
    font-size: 9px;
    padding-bottom: 20px;
    }

    .twoColFixLtHdr #footer #copyright a:link, .twoColFixLtHdr #footer #copyright a:visited {
    color: #9b9c8e;
    font-size: 9px;
    text-decoration: none;
    }

    .twoColFixLtHdr #footer #copyright a:hover, .twoColFixLtHdr #footer #copyright a:active {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #lowerNavi a:link {
    color: #727267;
    text-decoration: none;
    }

    .twoColFixLtHdr #lowerNavi a:visited {
    color: #727267;
    text-decoration: none;
    }
    .twoColFixLtHdr #lowerNavi a:hover {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #lowerNavi a:active {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }

    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

    iframe {
    width: 100%;
    height: 320px;
    }.address {
    font-size: 10px;
    color: #c96a3e;
    }

    http://www.npctucson.org/tab1.html

    http://www.npctucson.org/css/3tab.css

    /* this page formats the three tabs on the home page*/

    body {
    margin: 0;
    padding: 0;
    }

    /* @group 3TAB BOX */

    #threetabBox {
    margin-top: 42px;
    }

    #threetabBox #tabBoxbody {
    background-color: white;
    width: 568px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    font-size: 13px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {
    }

    #threetabBox #tabRow #tabTable {
    height: 25px;

    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    color: #817c7b;
    background-image: url(../img/shared_assets/tabbak_idle.png);
    }

    #tabRow #tabTable .idle a:link {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #726155;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 3px;
    padding-left: 19px;
    margin: 0;
    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    /* @end */

    # September 7, 2009 at 1:40 am

    I edited your post for you to include your code in the [ code] [ /code] tags :- I have added a space after the first square bracket so you can see what it should look like, or use the code tags which is under the subject part of your reply page.

    I wish I could help with your back ground problem, but I can’t see which area you are talking about and what image your talking about…

    posting a link is the most helpful way, we will use firebug to help
    posting code snippets also helps, but only if you show us round about you think you have the problem, not the whole code.

    # September 7, 2009 at 9:34 am

    Well, your CSS is all funky, frankly. That body class seems to be giving the body element an 8px margin, and at a quick glance, I’m not really seeing an easily evident way to fix it right out besides changing a lot. Your header image is about 20px too wide, and the negative left margin of -69px is pulling it way outside the content container.

    As for the background… It is likely something fairly obvious. If I had more time, I’d go over it a bit closer, but you should be able to find it using FireBug or Safari’s Web Inspector.

    Edit: actually, after a moment of pause, it struck me that you are using a background image. Why? Seems silly to me. For the colors you’re using, couldn’t you just place a ‘border-left: 10px; border-right: 10px; border-color: #d5d0ba;’ on the content container, give said container a ‘background: #f9f6f1;’ rule, then give the body a ‘background: #e2ddca;’? Seems like that would just make a lot more sense, as there are no noticeable gradients. If you place the footer inside the outer container, that solves your problems in whole.

    Now, time to go turn this problem-solving to my own work. :D

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".