Coffee Stained theme has a 1 pixel problem...

[eJM]

... and it's got me stumped.

I got the Coffee Stained theme for my new blog. I liked it so much I used it on another blog. 1 Foot in the Grave - the other foot ain't ready yet (http://1FootInTheGrave.com) and Jim McClain, a Floor Pro network blog (http://Jim-McClain.aFloorPro.net) I know, I know - no coffee stain. It's the same theme, I just redesigned the graphics. But this problem was there before my graphics modifications and I am quite sure it's not a graphics problem anyway. It's a CSS problem.

There is a 1 pixel jog in the background.jpg - there's really only 3 main images that make up the theme. You can't see the problem in Firefox, Netscape or Opera, only in IE7 (and maybe other versions of IE - I don't know). Take a look at the source code and the CSS below and see if maybe you can clue me in.

I have emailed the designer, posted a comment on the theme page and asked for help on the WordPress.org forums. No response form anyone. Well, me - I enjoy talking to myself. ;)

I was about to post the problem over at SitePoint. I've gotten a lot of help from the coding gurus there in the past. I was perusing the Blogging forum, which I've never done because I never had a blog until just a couple weeks ago. That's where I saw a post by Sara and a link to here in the signature area. So, I kinda liked the idea of a smaller, blogging specific forum - I have a flooring forum that I have run for a year and a half - so I joined and got my fingers crossed.

Here's the CSS:
[edit: the character allowance won't let me post my CSS with this. See my next post]

Maybe one of you can help me solve the mystery.

R'gards,

Jim

[eJM]

Here's the CSS (see my other message for an explanation):

/* color scheme
#B9121B
#4C1B1B
#F6E497
#FCFAE1
#BD8D46
*/

/* Begin Typography & Colors */
body {
font-size: 75%; /* Resets 1em to 10px */
font-family: "Trebuchet MS", Verdana, sans-serif;
color: #333;
text-align: center;
background: transparent url(images/background.jpg) repeat-y scroll center top;
}

#page {
text-align: left;
background:transparent;
}

#header {
background: transparent url('images/header.jpg') no-repeat top center;
text-align: center;
margin: 0 auto;
}

#headerimg {
margin: 7px 9px 0;
}

#content {
font-size: 1.2em
}

.widecolumn .entry p {
font-size: 1.05em;
}

.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}

.widecolumn {
line-height: 1.6em;
}

.narrowcolumn .postmetadata {

}

.alt {
background-color: #f8f8f8;
border: 1px solid #ddd;
}

#footer {
background: #fff url('images/footer.jpg') no-repeat bottom;
border: none;
color:#74572b;
}

#footer a {
color:#B9121B;
}

#footer a:hover {
text-decoration:underline;
}

small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.8em;
line-height: 1.5em;
}

h1, h2, h3 {
font-family: Georgia,Times,serif;
color:#4C1B1B;
letter-spacing:-1px;
font-weight: bold;
}

h1 {
font-size: 4em;
text-align: left;
}

#headerimg h1 {
padding:50px 0 0 30px;
font-weight:normal;
}

#headerimg .description {
font-size: 1.5em;
font-style: italic;
text-align: left;
margin-left: 50px;
}

h2 {
font-size: 1.6em;
}

h2.pagetitle {
font-size: 1.6em;
}

#sidebar h2 {
font-family: Georgia, Verdana, sans-serif;
font-size: 1.2em;
}

h3 {
font-size: 1.3em;
}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color:#4C1B1B;
}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color:#4C1B1B;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}

.entry p a:visited {
}

.commentlist li, #commentform input, #commentform textarea {
font: 0.8em "Trebuchet MS", Verdana, sans-serif;
}

.commentlist li {
font-weight: bold;
}

.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}

#commentform p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

.commentmetadata {
font-weight: normal;
}

#sidebar {
font: 1em "Trebuchet MS", Verdana, sans-serif;
}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}

code {
font: 1.1em 'Courier New', Courier, Fixed;
}

acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}

a, h2 a:hover, h3 a:hover {
color:#B9121B;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#wp-calendar #prev a, #wp-calendar #next a {
font-size: 9pt;
}

#wp-calendar a {
text-decoration: none;
}

#wp-calendar caption {
font: bold 1.3em "Trebuchet MS", Verdana, sans-serif;
text-align: center;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */



/* Begin Structure */
body {
margin:0;
padding:0;
min-height:972px;
min-width:760px;
}

#page {
margin:0 auto;
padding: 0;
width: 760px;
}

#header {
background-color: #73a0c5;
margin:0 auto;
padding: 0;
height:550px;
width: 760px;
}

#headerimg {
margin: 0;
height: 192px;
width: 100%;
}

#headerimg .description {
}

#content {
margin-top:-425px;
}

#sidebar {
margin-top:-425px;
}

#footer {
position:relative;
height:422px;
bottom:0;
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}

#footer p {
position:absolute;
bottom:5px;
left:40px;
padding: 20px 0;
text-align: left;
}

.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 463px;
}

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}

.post {
clear: both;
margin: 0 0 40px;
text-align: left;
}

.post hr {
display: block;
}

.widecolumn .post {
margin: 0;
}

.narrowcolumn .postmetadata {
padding-top: 5px;
}

.widecolumn .postmetadata {
margin: 30px 0;
}

.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}

.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}

.postmetadata {
clear: left;
}

.smallfont {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.8em;
text-align:left;
}
/* End Structure */



/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}

h2 {
margin: 30px 0 0;
}

h2.pagetitle {
margin-top: 30px;
text-align: left;
}

#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}

h3 {
padding: 0;
margin: 30px 0 0;
}

h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */



/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 6px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 6px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */



/* Begin Lists

Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body .entry li {
margin: 7px 0 8px 10px;
}

.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020";
}

.entry ol {
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}

#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}

#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}

#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}

ol li, #sidebar ul ol li {
list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}
/* End Entry Lists */



/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: left;
}

#searchform input, #searchform textarea {
font: 0.8em "Trebuchet MS", Verdana, sans-serif;
}

#searchform #s {
width: 108px;
padding: 2px;
}

#searchsubmit {
padding: 1px;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select {
width: 130px;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea {
width: 100%;
padding: 2px;
}

#commentform #submit {
margin: 0;
float: right;
}
/* End Form Elements */



/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p {
margin: 10px 5px 10px 0;
}

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */



/* Begin Sidebar */
#sidebar
{
padding: 20px 10px 10px 5px;
margin-left: 545px;
width: 170px;
}

#sidebar form {
margin: 0;
}
/* End Sidebar */



/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */



/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

blockquote cite {
margin: 5px 0 0;
display: block;
}

.center {
text-align: center;
}

hr {
display: none;
}

a img {
border: none;
}

.navigation {
display: block;
text-align: center;
margin-top: 25px;
margin-bottom: 50px;
}
/* End Various Tags & Classes*/

[SarahG]

The issue is IE's rounding errors. By saying to position the background center for the #page background you're forcing ie. to decide where the centre pixel is as we don't have an odd number of pixels (thereby giving a centre pixel) we have an even number so it's either or.

So what you need to do is adjust the header image background to meet with the page background instead.

First off you need to get rid of the embeded styles in the header put in by the theme you're using. I'd suggest editing the header.php theme file and dump the embeded styles being put in there.

Then create an IE7 only stylesheet (or IE only if it affects older versions) and add to it

#header {
background-position: 1px 0;
}

Which will then shift the header background image one pixel from the left and line it all up.

[eJM]

Thank you so much for replying to this, Sarah. This helped me tremendously.

You know, I didn't know what that embedded style crap was, so I didn't question it. I'm very new to WP and their themes and sometimes that can block a person's view of the whole picture.

<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if ( !$withcomments && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>

</style>

It appears this is a left-over from the Kubrick theme that the Coffee Stained theme may have used as a base. Removing it didn't seem to do anything bad. I mean, the block I live on is still here, thank God. :D

Your excellent advice actually jogged my memory. I have never designed sites with fixed widths before, so this is unexplored territory for me - and I've never used a blog before this either. I feel like I need a cane or somethin'.

The header wasn't the only element that had that 1px jog. Well, I actually thought it was the background image:

body {
font-size: 75%; /* Resets 1em to 10px */
font-family: "Trebuchet MS", Verdana, sans-serif;
color: #333;
text-align: center;
background: transparent url(images/background.jpg) repeat-y scroll center top;
}

But, as you pointed out, it was the header that had the problem. But wait, the footer was also bumped over a pixel too, so what I had to do, had to effect both, not just the header. So, your fix became this CSS:

#header {
background-position: 1px 0;
}
#footer {
background-position: 1px 0;
}

I've only been coding a few years (wow, has it been 7 years already?), but I have developed an aversion to separate stylesheets for IE and ever'thing else. Just doesn't seem right, since I'm in love with IE an' all. Really. And I don't like hacks. There's prob'ly only a few CSS hacks that are almost future proof and I have used one or two in most of the CSS files of the websites I've designed - by the recommendation of folks a whole lot better at this than me. So, havin' a whole 'nother stylesheet just to fix a stupid pixel kinda gagged me. Know what I mean?

You jogged my foggy memory though, like I said. I heard about some conditionals once that you could comment into an HTML document (or a PHP). And saving 9 kilobytes of CSS file size really appeals to me. So I went on a search and found this CSS - Conditional comments (http://www.quirksmode.org/css/condcom.html) page that was tucked away in my Favorites - I know, 'cause when I tried to save it after googling the dang thing, IE said I already had the page in my HTML/Tools folder. Stoopid me.

So the fix was to just add this to the <head></head> portion of my header.php file (I stuck it in real close to the bottom, near the </head>:

<!--[if IE]>
<style type="text/css" media="screen">
#header {
background-position: 1px 0;
}
#footer {
background-position: 1px 0;
}
</style>
<![endif]-->

'Course, that adds the fix to all versions of IE. I don't have but IE7, so I don't know if it effects 6 or 5.5 or any of those other older versions (if anyone here has an old version installed, it'd be a favor to me if you'd check it out at 1footinthegrave.com). But it would be easy enough to fix if it didn't... er, did... uh, you know.

Sooooo, Jim's a happy guy. Thank you so much for helpin' me out. I think I'll post a link to this topic in the thread I started and was ignored at over at the WP forum.

And oh yeah... Seems another one of those remnants from the Kubrick theme was some ugly-ass blue background on the header. When I applied that fix, there was a 1px blue line that ran vertically to the left side of the header. Had to change the color to my background color, which is #fff (but could be different in someone else's theme). Damn copycats! ;)

Later,

Jim

[SarahG]

A conditional comment would be used to load an IE only stylesheet. It would still be better to put the CSS you have into this instead of embedding it as that is now having to be loaded into every page a user visits. Let's say for arguments sake that content amounted to 5kb (I know it won't but it's just a figure). Each visit a user makes they have to load an additional 5kb in the header for your IE styles. Whereas, if it's in its own stylesheet it's loaded the first time but then it's usually pulled from the cache so that's one lot of 5kb, not X * 5kb where X is the number of pages viewed.

Still, it's working which is the main thing. As for the template, yes it's based on kubrick with isn't a great template to base anything on. It's bloated code and badly laid out. If you ever venture into your own templates use the Classic template to work and learn from. Much cleaner.

[eJM]

Thanks, Sarah, I appreciate your comments. Has anyone addressed paring down the code in those styles based on the Kubrick theme?

Jim

[Lamer980]

Hi,
I've got the same problem too
means, thanks of your comments :tongue::blush:

[Josephine]

if you can define your points in list it will be easy for user to understand what you are saying.

[lyle donkersloot]

apply all css in Style and in style define a tag BODY in this you define the bgcolor which will effect all the site background

[sgtpeppers]

quick thinking Sarah, great job. I went over the code over 10 times and didnt find the problem until about the 13th time lol. maybe I'm just unlucky =)

[MartinAndrews]

apply all css in Style and in style define a tag BODY in this you define the bgcolor which will effect all the site background

So where i have to insert bg color tag in its code cuz i am working on a website and i need to keep its background of my choice.

[RossBagley]

hey can anybody knows about CSS hacks tell me the method pelease

[MarcBrett]

I appreciate you sarah about your nice job.
Thanks