Footer styling "spills" back onto front page template (problem in Safari and IE only - FF is OK)
bcobin - November 18, 2007 - 05:25
| Project: | Advanced Theme Construction Kit (ATCK) |
| Version: | 5.x-3.0 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
I have two modified templates I'm using thus far:
page-front.tpl.php
page.tpl.php
The footer styling in page-layout.css is as follows:
#new_footer a:active, a:visited {
color: #ff0000;
text-decoration: underline;
}(I created a 'new footer' to eliminate certain possibilities - in red so I could more easily see the problem.)
When a link from the front page is clicked, we switch to another page using the page.tpl.php template - everything's fine. But when you return to the front page (which uses page-front.tpl.php), the visited link takes on the styling of the footer, as above, instead of the following:
#pod1 a:link, a:visited {
color: #000033;
text-decoration: none;
margin: 0;
}The footer is the last style element on the page - somehow the tag doesn't seem to "close," and I can't figure out why the attributes should be applied to the same class with a different div id# when you switch to a different page. Is there something I'm missing that you have to do when you switch templates? I'm very new at all this...
Firefox behaves correctly - this is only in Safari and IE. The footer styling is clearly "spilling onto the other elements of the page. I've been working on this now all day and I can't figure it out for the life of me.
The theme is otherwise fabulous - it's brilliantly commented and I've now learned more CSS and PHP than I would have ever thought possible. I'm attaching the two .php files and enclosing the page-layout.css file here - nothing of significance has been done with the other files. Thanks in advance to anyone who can help... this is actually a major problem, for me anyway.
-b
/***********
Below is css for the individualized styling of specific theme elements. The source of this code is from a combination of Hunchbaque and some changes/additions which I added in order to provide baseline settings I prefer and/or provide more granular settings.
NOTE:
1. Add any IE specific css to the fix-ie-6.css and fix-ie-7.css file(s). Conditional comments and separate css files were created for IE in order to avoid adding css hacks to this file and so that atck properly passes w3c validation. (atck is css3 valid)
2. The template.php file which comes with atck disables the following core stylesheets: defaults.css, node.css, user.css. You can easily disable others and/or re-enable the three mentioned.
*************/
/*
Layout the core sections of the site.
*/
#header {
overflow: hidden;
}
#wrapper {
width: 100%;
}
#subwrapper {
float: left;
width: 98%;
background: #50676b url(images/joe_in_the_news.jpg) no-repeat right top;
margin: 1px 0 4px -1px;
}
#content {
margin: 48px 8px 0 4px;
padding: 0 0 8px 0;
}
#front_window {
margin: 4px 0 0 14px;
}
#action {
margin: 0;
}
#content-top {
padding: 0;
}
#container .content {
overflow: hidden;
}
#three_pods {
margin: 4px 0 0 0;
}
#three_pods .content {
height: 250px;
}
#three_pods ul li {
position: relative;
top: 50px;
}
#pod1 {
display: block;
font-size: 1.2em;
color: #000033;
font-weight: normal;
background: transparent url(images/pod1.jpg) no-repeat 0px 0px;
height: 260px;
width: 300px;
padding: 0 0 0 0;
margin: 0 0 0 14px;
}
#pod1 .content {
padding: 6px;
}
#pod1 ul li {
font-family: Times, "Times New Roman", serif;
padding: 0 0 0 4px;
margin: .3em 2em .5em 4px;
color: #000033;
border-bottom: 1px dotted #999999;
}
#pod1 a:link, a:visited {
color: #000033;
text-decoration: none;
margin: 0;
}
#pod1 a:hover {
text-decoration: underline;
}
#pod2 {
display: block;
font-size: 1.4em;
font-weight: normal;
background: transparent url(images/pod2.jpg) no-repeat 0px 0px;
height: 260px;
width: 300px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#pod2 a:link, a:visited {
font-family: Times, "Times New Roman", serif;
color: #000033;
}
#pod3 {
display: block;
font-size: .1em;
font-weight: normal;
background: transparent url(images/pod3.jpg) no-repeat 0px 0px;
height: 260px;
width: 300px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#pod2 ul li,
#pod3 ul li {
list-style-type: none;
float: left;
border: 1px solid #ffffff;
}
#pod2 li {
margin: 20px 0 0 32px;
}
#pod3 li {
margin: 8px 6px 0 14px;
}
/* We've already reset all of the fonts using the YUI font reset stuff within style.css - and now that we have a clean slate we set the font face/size using ems. Because of the font reset magic 1em = 1px, except that ems are much friendlier to various browsers/devices than pixels. */
#container {
font-family: arial, helvetica, clean, sans-serif;
font-size: 1.2em;
background-color: #000033;
}
.node {
margin: 0 0 4px 4px;
padding: 10px 16px 10px 16px;
line-height: 1.2em;
background-color: #ffffff;
font-size: 1.2em;
}
#content .title {
margin: 0 0 0 4px;
padding: 4px 4px 4px 10px;
background-color: #cccccc;
color: #7b1d1c;
}
/*#node-6 {
clear: both;
margin: 0;
}
#node-6 .title {
margin: 0 0 .5em 0;
}
*/
#content .tabs {
margin: 0 0 0 2px;
}
/* Basic elements */
a:link, a:visited {
color:#ffffff;
text-decoration: none;
margin:0;
}
.node a:link, a:visited, a:active, a:hover {
color:#006699;
text-decoration: none;
margin:0;
}
a:hover, a:active, a.active {
color:#000033;
text-decoration: underline;
margin:0;
}
h1 a, h1 a:link, h1 a:visited,
h2 a, h2 a:link, h2 a:visited,
h3 a, h3 a:link, h3 a:visited,
h4 a, h4 a:link, h4 a:visited {
color:#000;
text-decoration: none;
}
h1 a:hover, h1 a:active,
h2 a:hover, h2 a:active,
h3 a:hover, h3 a:active,
h4 a:hover, h4 a:active {
color:#000;
text-decoration: underline;
}
h1,
h2,
h3,
h4 {
/* color: #ffffff;*/
padding-top: .4em;
line-height: 1.3em;
}
h1 {
font-size: 2em;
font-weight: bold;
}
h2 {
font-size: 1.4em;
font-weight: normal;
}
h3 {
font-size: 1em;
}
h4 {
font-size: .9em;
}
p,
ul,
ol,
dl {
padding: .4em 0;
}
ul,
ol,
dd {
margin-left: 2.5em;
}
li ul,
li ol {
margin-left: 1.5em;
}
li ol li {
list-style-type: lower-alpha;
}
li,
dt,
dd {
padding: .2em 0;
}
dt {
font-weight: bold;
}
table {
margin: 0;
width: 100%;
}
th,
td {
padding: .2em;
}
th {
color: #000;
font-weight: bold;
font-style: italic;
text-align: center;
background-color: #FAF4AA;
}
tr.odd td {
background-color: #ffffff;
}
tr.even td {
background-color: #d0d0d0;
}
img {
border-width: 0;
}
/*
Define the helper classes.
*/
.clear-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clear-block {
height: 1%;
}
.clear-block {
display: block;
}
.form-item,
fieldset {
margin: 1em 0;
padding: 0 .5em;
}
fieldset.collapsed {
overflow: hidden;
height: 1px;
border-width: 1px 0 0 0;
}
.description {
padding: .5em;
font-size: .8em;
font-style: italic;
}
.messages,
.help {
margin: 1em;
padding: 1em;
border-width: 2px;
border-style: solid;
}
.error {
border-color: #ff0000;
background-color: #ffdddd;
}
.status {
font-style: italic;
border-color: #9FE4FF;
background-color: #D9F4FF;
}
.help {
font-style: italic;
border-color: #FEFF7F;
background-color: #ffffcc;
}
.help .more-help-link {
font-weight: bold;
}
/*
Area specific layout
*/
/* Tabs */
div.tabs ul.primary {
clear: both;
margin: 2em 0 0 0;
padding-left: 10px;
padding-right: 10px;
height: 1.5em;
border-bottom: #C4D7E6 1px solid;
}
div.tabs ul.primary li {
display: block;
float: left;
margin: 0;
padding: 0 2px;
list-style-type: none;
text-align: center;
}
div.tabs ul.primary a {
padding: 6px 10px;
color: #999999;
text-decoration: none;
line-height: 1.3em;
border-color: #c4d7e6;
border-width: 1px 1px 0px 1px;
border-style: solid;
background-color: #eee;
}
div.tabs ul.primary a.active {
padding: 6px 10px;
color: #000000;
font-weight: bold;
border-color: #C4D7E6 #C4D7E6 #eeeeee #C4D7E6;
border-width: 1px 1px 0 1px;
border-style: solid;
background-color: #fff;
}
div.tabs ul.primary a:hover {
text-decoration: underline;
}
div.tabs ul.secondary {
clear: both;
margin: 0;
padding: 0;
line-height: 2em;
}
div.tabs ul.secondary li {
display: inline;
padding: 0 7px 0 5px;
list-style-type: none;
border-right: #C4D7E6 1px solid;
}
div.tabs ul.secondary a {
color: #999999;
text-decoration: none;
}
div.tabs ul.secondary a.active {
color: #000000;
font-weight: bold;
}
div.tabs ul.secondary a:hover {
text-decoration: underline;
}
/* Main content area */
#breadcrumb {
padding: 0 0 0 0em;
margin: 4px 0 0 2px;
}
#breadcrumb a:link, a:visited, a:active, a:hover {
color: #000033;
}
#mission {
padding: 0;
}
/* Header styles */
#header {
padding: 0 0 0 0;
height: 181px;
width: 942px;
background: transparent url(images/header.gif) no-repeat 0px 0px;
margin: 0 0 0 0;
}
/* Main menu styles */
#main_menu {
clear: both;
margin: 8px 0 0 0;
display: block;
font-size: 1.4em;
font-weight: bold;
background: transparent url(images/menu_bar.gif) no-repeat 0px 0px;
height: 42px;
width: 942px;
padding: .5em 0 0 .5em;
}
#main_menu a:link, a:visited {
/*color: #ffffff;*/
}
#main_menu a:hover, a:active, a.active {
color:#ffffff;
text-decoration: underline;
margin:0;
}
#main_menu ul {
display: inline;
}
#main_menu li {
margin:0;
display: inline;
list-style-type: none;
border-right: #ffffff 1px solid;
}
/* Secondary menu styles */
#secondary_menu {
clear: both;
margin: 0 0 0 2em;
display: inline;
font-size: .9em;
}
#secondary_menu ul {
margin: 0 0 0 0;
display:inline;
}
#secondary_menu li {
margin:0;
display: inline;
padding: 0 .55em;
list-style-type: none;
}
/* Sidebar styles */
#sidebar_left {
font-size: 1em;
padding: 1px 1px 0 0;
margin: 1px 0 0 14px;
background-color: #50676b;
display: block;
}
#sidebar_left .title {
background: transparent url(images/left_block_1px.jpg) repeat-x;
color: #ffffff;
margin: 4px 0 0 4px;
padding: .2em 0 .2em 1em;
border-top: #cccccc 1px solid;
border-left: #cccccc 1px solid;
border-right: #cccccc 1px solid;
}
#sidebar_left .content {
margin: 0 0 4px 4px;
font-size: 1.2em;
color: #dddddd;
background: transparent url(images/block_bg.jpg) repeat-y;
padding: 1em 1em 1em 1em;
border-top: #cccccc 1px solid;
border-left: #cccccc 1px solid;
border-right: #cccccc 1px solid;
border-bottom: #cccccc 1px solid;
}
#sidebar_left a:link, a:visited {
/*color: #eeeeee;*/
}
#sidebar_right {
font-size: 1em;
margin: 0 0 0 0;
}
#sidebar_left .block {
margin: 0 0 8px 0;
padding: 0 0 0 0;
}
#sidebar_right .block {
margin: 3px 0 0 0;
padding: 0 0 0 0;
}
#sidebar_left .content,
#sidebar_right .content {
}
/* this is the 'contribute' block in the sidebar*/
#block-block-6 .content {
margin: 0 0 0 4px;
padding: 0 0 0 0;
border: none;
background: none;
}
/* Footer styles */
#new_footer .content {
clear: both;
padding: 0 0 0 0;
margin: 0;
}
#new_footer ul li {
color: #000033;
}
#new_footer a:active, a:visited {
color: #ff0000;
text-decoration: underline;
}
/*
#new_footer .title {
color: #ffffff;
}
*/
#block-block-5 {
background: url(images/blue-shade_1px.gif) repeat-x 0px 0px;
padding: 0 0 0 0;
border-top: #333333 1px solid;
border-bottom: #333333 1px solid;
}
#block-block-5 .content {
margin: 0 2em 4px 2em;
}
| Attachment | Size |
|---|---|
| page-front.tpl_.php_.txt | 5.12 KB |
| page.tpl_.php_.txt | 5.21 KB |
#1
Solved - (at least partially):
It looks like in certain cases with links, Safari doesn't like multiple declarations. So, whereas this works fine in Firefox and IE:
#sidebar_left a:link, a:visited {
color: #eeeeee;
text-decoration: none;
}
It "breaks" Safari. In Safari, you need to do this:
#sidebar_left a:link {
color: #eeeeee;
text-decoration: none;
}
#sidebar_left a:visited {
color: #eeeeee;
text-decoration: none;
}
This was absolutely maddening. I don't know if there's something in the theme that causes this behavior or what - very nasty. Being new at all this, I don't have much else to add - hopefully this will save somebody else some time, just like you all do for me every day.
#2
Yikes!
Links need to go in the order of:
1. links
2. visited
3. hover
4. active
You professional coders already know this, and now I do, too. I am a noob - maybe this will save someone else some time... Ouch!
#3
Fixed
#4
thanks... subscribing