hi there,
I am using sticky footer layout but it breaks on blog page of my site http://prygara.com
Also, I can’t figure out why favicon showing correctly on blog page in Firefox and IE but it doesn’t in Chrome and Opera
Any advice is appreciated
[edit]This thread was started in the CSS forum, but the discussion has evolved to WordPress code so it has been moved here.
Mittineague[/edit]
I clicked the link to your blog page and got a 404 file not found error. The footer on the page you linked doesn’t appear to be broken.
I don’t see 404 error. Please, take a look at image file attached (error_1.jpg) - page seems to load correctly but the header gets shifted downwards.
It takes a long time for the image attachments to get approved. I prefer linking to photobucket or some other image hosting account that you may have. You should upload that image somewhere and provide a link to see it.
Can you post some CSS here?
The favicon seems to work in all browsers for me at this time.
The sticky footer has a simple error:
#footer {
background-color: #336633;
border: 1px solid #336633;
clear: both;
color: #000000;
height: 52px; /* FYI: height:52px plus 2px for the border = total height of 54px */
margin: auto;
text-align: center;
width: 958px;
}
Therefore:
style.css (line 15)
#container {
margin: [color=blue]-54px[/color] auto 0; /* change from -52px */
style.css (line 80)
html > body #minheight {
margin-bottom: [color=blue]-54px[/color]; /* change from -52px */
}
Your HTML could use a good run through the validator, too. 
I corrected those. thanks ronpat. blog page not working though. as you asked etidd, please, see image here https://docs.google.com/file/d/0B6nFRgc8AjO2MGlqRElDZHo4eXc/edit?usp=sharing
here’s css for blog page
/* layout starts*/
html, body {height:100%}
html,body {
padding:0;
margin:0;
}
body{
min-width:960px;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align:center;
background: #DAE3DA;
}
#container{
position:relative;
min-height:100%;
width:958px;
margin: -54px auto 0;/* negative top margin equals footer height - this drags the container 52px up through the top of the monitor*/
border-left:1px solid #336633;
border-right:1px solid #336633;
background: #EBF3EB url(http://prygara.com/blog/wp-content/themes/default/images/leftnav_bg.png) repeat-y left top;
color: #000000;
text-align:left;
}
* html #container{
height:100%; /*IE treats height as min-height anyway*/
width:960px;
w\\idth:958px;
}
#header{
position:absolute;
top:52px;/*place it at top of screen because we dragged container upwards by 52px*/
left:-1px;
width:958px;
height:100px;
background:#336633;
border:1px solid #336633;
overflow:hidden;/*if content overflows an element's box,overflow is clipped,and the rest of the content will be invisible*/
color: #fff;
z-index: 85;
}
#leftcol {
position:relative;
width:215px;
float:left;
padding-top:122px;/*make room for absolute header*/
}
#rightcol {
position:relative;
width:741px;
float:right;
padding-top:122px;/*make room for absolute header*/
}
#footer {
width:958px;
clear:both;
height:52px;
border:1px solid #336633;
background-color: #336633;
color: #000000;
text-align:center;
margin:auto;
}
* html #footer {/*only ie gets this style*/
\\height:52px;/* for ie5 */
he\\ight:50px;/* for ie6 */
}
html>body #minheight {
float:right;
width:0;
height:100%;
margin-bottom:-54px;} /*safari wrapper */
.clearer{height:10px;overflow:hidden;clear:both}
/* end of layout*/
/*layout formatting*/
h1 {
font-size: 1.70em;
margin: 0;
padding-top: 1.8em;
padding-left: .9em;
}
h2 {
width: 681px;
margin-top: 40px;
margin-left: 25px;
font-size: 1.10em;
color: #336633;
font-weight: bold;
border-bottom: 1px solid #336633;
}
#search {
position: relative;
left: 430px;
bottom: 25px;
width: 514px;
}
#tagline {
position: relative;
top: 130px;
width:958px;
z-index: 85;
}
#tagline p {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #336633;
background-color: #BBCCBB;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 0.6em 0 0.6em 1.5em;
margin: 0;
}
#social {
position: absolute;
left: 490px;
bottom: 4px;
margin: 0;
padding: 0;
}
#social li {
list-style:none;
float:left;
display:block;
padding:0;
margin:0 7.5px;
}
#navigation {
position: relative;
top: 9px;
width: 13.41em;
font-family: Verdana, Lucida, helvetica, Arial;
font-size: 1em;
font-weight: bold;
color: #669966;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
border-bottom: 10px solid transparent;
margin: 0;
}
#navigation li a {
display: block;
padding: 10px 10px 10px 0.8em;
border-left: 12px solid #336633;
border-right: 15px solid #7D9E7D;
background-color: #469050;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navigation li a {
width:auto;
}
#navigation li a:hover {
border-left: 12px solid #669966;
border-right: 15px solid #8BB98B;
background-color: #85AD85;
color: #fff;
}
body#about a#aboutnav,
body#blog a#blognav,
body#work a#worknav,
body#contact a#contactnav {
color: #fff;
background: #85AD85;
}
#rightcol p{
padding-left: 26px;
padding-right: 35px;
font-size: 0.95em;
line-height: 23px;
color: #2E2E2E;
}
#footer {
font-size: 0.75em;
text-align: left;
color: #fff;
}
#bottom_nav a {
color: #fff
}
#bottom_nav {
padding-top: 15px;
padding-left: 10px;
}
/* end layout */
/* start blog */
a.page:link, a.page:visited, a.page:active {
color:#336633;
text-decoration:none;
}
a.page:hover {
color:#336633;
background-color:#CEDACE;
}
a.more:link, a.more:visited, a.more:active {
color:#336633;font-weight:
bold;text-decoration:none;
margin-left:10px;
}
a.more:hover {
color:#336633;
font-weight: bold;
background-color:#CEDACE;
}
#leftcol h3 {
width: 150px;
font-size: 1.02em;
margin-top: 30px;
margin-left: 20px;
padding-left: 2px;
color: #336633;
border-bottom: 1px solid #336633;
}
ul.left {
width: 150px;
list-style-type:none;
margin-left:20px;
padding-left:2px;
}
.left li {
padding-bottom: 6px;
color:#336633;
}
.left li a {
color:#336633;
}
#rightcol p.date {
color: #336633;
font-weight: bold;
margin-top: -5px;
}
.postmeta {
color: #336633;
font-weight: 600;
}
#name_label {
color:#336633;
margin-right:2.6em;
}
#email_label {
color:#336633;
margin-right:2.3em;
}
#submit {
background: #336633;
color: #fff;
font-weight: bold;
padding: 5px;
}
#submit:hover {
background: #85AD85;
cursor:pointer;
color: #fff
}
textarea { /*makes comment form resize only vertical*/
resize: vertical;
}
Sure I will. Thanks ronpat.
The html element in the head is broken causing ot to display a space in the html.
<html xmlns="http://www.w3.org/1999/xhtml">
lang="en-US">
" lang=“en-US”>" is just hanging in mid air.
If you fix it the space should go away.
Done. Thanks for catching this Paul O’B - it was a
<?php language_attributes(); ?>
in header.php
Here’s some other stuff I am trying to fix:
Going thru nav top-bottom, blog,work,contact tabs when clicked, the whole site gets shifted to the left a bit
Nav is not working correctly, I guess I did some wrong linking, going frm blog tab to contact tab gives “page not found”.
Here’s the snapshot https://docs.google.com/file/d/0B6nFRgc8AjO2TnJ2Z2dpRkZuREU/edit?usp=sharing
Problem #1 is a browser “feature”, not a problem. The content in the index page is too short to trigger a scroll bar. The other pages trigger the scroll bar and thus the “jump to the left” (doin’ the ‘Time Warp’ )
You can work around that by forcing the scroll bar to be rendered always.
html {
overflow-y:scroll;
}
Problem #2 is an href path error in your HTML.
Can you take a look, ronpat. Here’s the HTML. I used forward slash “/” in href so it looks for a page starting from the root - public_html.
Should I have contact page with “/” as well - “/contact.html” ?
<ul>
<li><a href="/index.html" id="aboutnav">About</a></li>
<li><a href="../blog/" id="blognav">Blog</a></li>
<li><a href="/work.html" id="worknav">Work</a></li>
<li><a href="contact.html" id="contactnav">Contact</a></li>
</ul>
If the contact.html page is in the root folder, then yes.
For working code, I looked back at the site in your first post.
The path to the Contact page from the menu button on the Blog page looks like this:
http://prygara.com/blog/contact.html
The path to the Contact page from the menu button on all other pages looks like this:
http://prygara.com/contact.html
Conclusion: the path to the Contact page from the menu button on the Blog page contains an erroneous directory, “blog”.
It should look like the others.
Remove the preceeding dots from “…/blog” and add the trailing slash so it looks for a child index or home page.
http://prygara.com/index.html
http://prygara.com/blog/
http://prygara.com/work.html
http://prygara.com/contact.html
/index.html
/blog/
/work.html
/contact.html
EDIT:
All of the menu items at the bottom of the page also contain the errant directory in their path. They all fail.
fixed. thanks ronpat.
I just did. Fixing errors now…thanks. Will post later.
Please,take a look, ronpat. I think it validates now.
Hi, 810311,
Your XHTML page validates like a work of art! Very nicely done.
I hope you will permit a few observations about the overall construction of the pages and the way they are rendered in the user’s browser. I only looked at the Contact page, but the other pages would also benefit from a revisit.
Parts of the layout of your page depend on a user using the same font-size as you, the designer, which is not a safe bet.
For example, on the Contact page, the width of the textarea is set in columns. The downside of using the col attribute is that the width is becomes dependent on the user’s font-size. In the case of cols=“78”, the textarea extends beyond the right border of the page on my PC. If I set the width in CSS, {width:650px}, it remains within the boundary of the fixed width column. You can see what I mean in FF if you zoom text-only larger.
Another example is the width of the #navigation box is {width:13.41em}. It’s a guarantee that you cannot predict that a user’s PC or Mac or Linux box will render the width of the #navigation container as you intend. Again, notice what happens when you zoom text-only larger or smaller in FF. This is another place where pixel width, or better still - no width at all, would be better. If no width is applied, then the tabs will extend to fit into the left column nicely.
A variable unit of measure like ems or percent for padding or margin is not always a good choice (sometimes, but not always). Using ems for the padding around your name in the header destabilizes the header. Again, do the zoom text-only thing in FF to see for yourself. An entirely different technique would offer more predictability there.
Hope this is helpful.
Thanks ronpat.
I did not know this trick:) - works like a charm now. I removed col attribute and set width in CSS as per your notes. I tested in FF with text zoom only. It holds better. Thanks.
Yes, since the width already set for left column - no need for navigation width I guess.
Yes, you are correct - header text gets shifted downwards when I zoom text-only in FF. Can you expand on that different technique you metioned previously?
Sergiy,
I notice in your code that you have hacks for old browsers, IE5 and 6. I can help you make further improvements in your page, if you support IE8+, but I do not have the knowledge to properly support IE7 and earlier.
The site has one major flaw. Position:absolute and position:relative have been used inappropriately which means modifications to the layout are difficult to make. It would be very helpful to change the structure so the contents “go with the flow” instead of being absolutely or relatively positioned. In the process, we could also improve the header, too.
FYI: The attached screen shot shows how the header text in the current design could behave as it is zoomed, or if a user simply chose a larger font. The top shot shows normal size, the second is zoomed a bit larger, the third and fourth are zoomed to the point that something has to flow over/under the other text. In these examples, the height of the header does not change, although it would if more zooming occurred. Other designs are certainly possible.
Sure. I can try do fixes for IE7 and IE8+. I am not sure if majority of people nowdays still use IE5/6 but if I can keep those rules just to be on the safe side…I guess…in case a user uses on of those…
That would be great too. Yes, I had a feeling absolute/relative were inappropriate in some cases there but I did use them because I did not find/did not know any other solutions at that time.
Yes, I saw it.
Overall, if we can keep the same layout that I have now but do your improvements, that’d be awesome. I am sorry I don’t know your name? Also, I would be interested to take a look at some samples of your work. Do you have an online portfolio?