pullman

Hi again
This is the code that ultimately worked. I had to move the image to another folder, too.
<p style="width: 950px; height: 633px; background: url('http://philipus.com/images/aberdarebuffaloswtxt.jpg') left top no-repeat"></p>
/p

Hi Daniel

Thanks very much for the quick reply and also for the tips re usage of get_bloginfo().

When I try to implement it as you suggest, which I understand is like this:

<p style="background: url('<?php bloginfo('template_url'); ?>/images/marasunsetbgr.jpg');left top no-repeat">

…then the image still doesn’t show up. What could be the problem?

cheers
/p

Great, the first page I managed to fix – hurrah. Thanks for both your help!

/p

Thanks esmi.

Don’t know who suggested that but they were dead wrong.

I believe it was suggested by the validator, actually.

Unfortunately your suggestion didn’t help. I think it’s very odd. Is there another way to put in the logo and making it a link? I mean, that’s all I want to have there.

/p

Thanks esmi. I am unable to correct these in the Markup validator:

Line 107, Column 7: end tag for “div” omitted, but OMITTAG NO was specified
</body>
You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>”.

Line 48: start tag was here
><div class=”container”>

Line 107, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 48 and body
</body>

Line 108, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 47 and html
</html>

Line 108, Column 7: XML Parsing Error: Premature end of data in tag html line 2
</html>

Re the first error (line 107, column 7 and the related Info message re line 48) I’ve verified that all div tags are closed. There is literally nothing else to close that I can see.

>> Can I look somewhere? I’ve only looked in (all) php files of the theme.

Re the three “parsing errors”, I don’t even understand what they mean and the Validator site’s error list (http://validator.w3.org/docs/errors.html) offers no assistance.

>>> Any ideas where I can look for more info or what they mean?

I’ve also tried to correct CSS errors after the CSS validation. Here are my questions:

1. In style.css, “transparent” is set as a value for Color. I understand that this is accepted by CSS 3 but not by CSS 2.

>>> Need i do anything about this?

2. In the contact form I use, the author has set the following for the Display property in various parts of the style sheet:

-moz-inline-box; /*for mozilla*/

I cannot find any reference to this online. And the CSS validator doesn’t accept it. It appears this is to cover for certain “mozilla” browsers. I thought that was Firefox?

>>> Need i replace this with something else?

3. There are lots of warnings focusing on the legibility of the text due to color settings.

>>> I guess I can ignore them if the site displays well?

Thanks for all your help
/p

Ok, point taken esmi. I removed the height specification.

Let me describe what I want to do.

– I’d like a background image on the contact page.
– The contact page’s border should be identical in width and height as the frontpage’s.
– The footer should be at the bottom of the page, below the background image.

I’ve inserted a few conditional tags in header.php:

<?php
if(is_page('contact')) :
echo '<style type="text/css" media="screen">
.container-inner {
background:#FFF url('.get_bloginfo('template_url').'/images/marasunsetbgr.jpg) left top no-repeat; }
.post {
width:950px;margin:214px 0 0 230px; }
#footer {clear: both;margin:0em 0 0;background:transparent;padding:0em;}
</style>';
endif;
?>

The idea is to constrain these settings to the contact page only (to preserve flexibility in other pages).

The background image has a white border above which is hidden by (and of the same height as) the masthead. This means that the image itself will fill the part below the masthead. Perhaps not the “right” way to do it but it seems to work.

Within the container.inner there is a WP post that contains the contact form.

The problem is that the footer and contact form are in slightly different locations depending on the browser (I’ve checked Firefox, Safari and Chrome on Mac; I haven’t checked on PC yet).

In FF, the contact form is a bit too far from the bottom edge of the image. The bottom border of the container is also further down than on the frontpage. And the footer is quite narrow, even compared to the frontpage’s footer.

In Safari, the footer looks ok except that the bottom border of the container isn’t where the frontpage container border is.

In Chrome, the contact page’s footer is higher than the frontpage footer, which looks odd. And the container border doesn’t match on the frontpage and the contact page.

Note that the contact form link text (the “delicious:days” bit) is moved up with a margin:-40px to make it move closer to the form (it’s ugly when it hangs so far below. But this moves the footer with it. If I add a bottom margin to that text, the footer is pushed down, but the results vary in different browsers.

Bottom line (pun intended), I’m a bit lost here in terms of what to do to ensure that the footer is at the end of the page and that it looks the same (or as “same” as possible) in different browsers.

Should I add some browser-specific properties somewhere?

Thanks for any insight on this.
p

You’re a wizard – thank you!

Just so I understand: that condition sort of “separated out” the contact page for the purposes of the background within the container-inner?

Thanks once again
/p

Thanks for quick reply – and apologies, I accidentally pressed “post” before i was done.

My second question is how I make the contact form – which is a cForm – transparent (except the text fields).

Thanks again
/p