homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / WordPress
Forum Library, Charter, Moderators: lorax & rogerd

WordPress Forum

CSS in child displaying diff in home/page vs Post/category
have css in widget that is displaying right in Home&Pages not in Posts/Cate

10+ Year Member

Msg#: 4400711 posted 12:32 am on Dec 23, 2011 (gmt 0)

Need help on CSS for same element displaying different on Home and pages than on Post pages.
The home and pages are displaying the formating in my widgets correctly but in post pages (full post and category) they are not displaying the formating correctly.- it is not finding the image when page served using category or post pages.

using a child theme of twentyeleven theme.
using current versions of WP and theme.

Really could use some ideas -

The background image png in the widget is not displaying in the post pages

Example Home and Page top Side bar and right footer widgets display as expected with a gold png background
[ph1landrews.com...] - full page (no sidebar - footer only) [ph1landrews.com...]

Category post page does not have the gold background in the top Side bar and right footer widgets

and the full post page (without a sidebar ) does not show the gold background

code in the widget - (note the div with image is recognized - the blue text is displaying)
<div style="background-image: url( 'wp-content/themes/occupation/images/Box-gld-sbar-lowres.png' ); height:240px; width:238px; color: blue;">

<div style="padding: 40px 20px 20px 15px; font-size:14px;">
<h1 style="text-align: center;">Site Announcement!</h1>
<p>You can replace the Text by editing the Widget</p>

[ph1landrews.com...] (right)
[ph1landrews.com...] (wrong )

link to css file



WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4400711 posted 4:54 pm on Dec 23, 2011 (gmt 0)

It's because you're using relative links. You need to make them relative to root (or at least, relative to your working directory.)

Look at your working page URL:

And the CSS:


We can presume the Wordpress index.php is here


OK? So it's finding the image at


Then you go into the category.


So the browser expects you're in a directory from wp, category/news/regional (even though that's not a real directory). so it's looking for the image relative to where you are, here


Which, of course, doesn't exist.

When it's "live" you'd find it easiest to do this,


Note the leading slash. That would mean "start at the domain root and follow this path." It would work for any "virtual" subdirectory.

But since you're in a dev environment, you'll have to do something else, like


... which may be difficult if you have lots of such references. It looks like you're assigning this in the admin widget, so that might be the best solution. For your CSS, do a search and replace for all images in the same way, like so

background:url(/occupy/dev/wp/wp-content/themes/occupation/images/some-bg-image.jpg) top left no-repeat;

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / WordPress
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved