The Evil Eyebrow

CSS Help

Written by

Bill Ruhsam

in

I’m punting on a CSS problem.

You may have noticed that if you see an image on this blog, on the front page, it has a black border, but no padding. However, if you click through to the post itself, suddenly the image has padding. A nice neat, 4 pixel whitespace with a black border. This is the intended setup.

I cannot figure out why the images on the front page of the blog are not operating this way. Obviously, it’s got something to do with inheritance and cascading style assignments, but I’ll be buggered if I know what it is.

Anyone want to take a look and see if it’s something bloody obvious? The images are (generally) class “alignleft” and the front page matter is under div “narrowcolumn” while the post page is under div “widecolumn”.

Let me know if you figure it out.

Comments

6 responses to “CSS Help”

  1. Jeff Avatar
    Jeff

    Well, there’s a couple of things going on:

    1. works fine in Firefox
    2. Your image is too wide as far as Internet Explorer is concerned I set the following in the >p< element and it started to fix it:

    padding: 4px; width:97%; border: 1px solid black;

    and I set the width of the img element to smaller…

    Gotta love companies ignoring standards. I think you’re right about the inheritance causing the problem

  2. Annie Avatar
    Annie

    Ditto what Jeff & Jim said about it looking fine in Firefox.

  3. Chris Avatar
    Chris

    That’s messed up. I edited the code to actually put style=”padding: 4px;” right in the img tag, and it still ignored it. The style directive within the tag is supposed to take highest precedence.

  4. Chris Avatar
    Chris

    Ok I fixed it, but it’s not clear why what I did fixed it, other than it fixes one of the MANY (and you really ought to fix them) XHTML validation errors your page causes. You have, as the very first thing on your main page, a Google analytics script. If you move this script down next to the rest of your scripts (in the head of your document) the issue goes away.

    My guess is IE gets confused on the cascade when your highest tag is type script rather than type HTML.

  5. James Cronen Avatar
    James Cronen

    I have the Web Developer plugin for Firefox (highly recommended, btw)… just for fun I clicked on the error console after refreshing your page, and I got:

    Error in parsing value for property ‘margin’. Declaration dropped. Line: 399
    Error in parsing value for property ‘padding’. Declaration dropped. Line: 415

    (Line numbers refer to $SITE_ROOT/wp-content/themes/default/style.css)

    Have a look at those two lines and see if there’s anything funky there.

  6. Bill Avatar
    Bill

    Cool!

    Thanks guys. For one thing, I need to get more practice checking both Firefox and IE for these issues. Generally, I only work in IE.

    Chris, you also reminded me that my google analytics script is in the wrong place. When I dropped in the script, I mistook “before the final HTML tag” for “first”. Probably should fix that.

    I should throw out this theme and start over. It’s a nice default theme for WordPress, but it does have issues.

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts