Save my css sanity!

  • I think I’m going mad. I know I’m going mad. But I’m hoping someone out there may take pity and shine a little light on my confusion.

    I’m making changes to the css. But for some reason they’re not having any effect on the rendered pages.

    I check the css and html are ok by viewing the code in a browser. The changed css is there. The links to the changed css are all fine. But for some reason the pages won’t render the changed css.

    The pages will render previously changed css. But not any of the changes I’ve made today.

    I’ve made really simple changes – like changing a border color – to see if I can track down the problem. But after three hours of head-scratching I’ve given up.

    I must be missing something really obvious and totally stupid. But it’s got the better of me.

    Sorry for posting such a dumb question – but I’m getting desperate.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Can you provide a link to your blog, so we can see your style sheets?

    Thread Starter drstir

    (@drstir)

    https://saveourspire.org.uk

    I tried to figure out the problem by changing a simple hr class. The horizontal rule under each header was specified like this:

    hr {
    border-top: 1px dotted #CCCCCC;
    height: 1px;
    text-align: left;
    border-right: 0 none;
    border-bottom: 0 none;
    border-left: 0 none;
    }

    I changed this from a grey dotted rule to a blue solid rule:

    hr {
    border-top: 1px solid #0033FF;
    height: 1px;
    text-align: left;
    border-right: 0 none;
    border-bottom: 0 none;
    border-left: 0 none;
    }

    But the page still renders the grey dotted rule.

    If you look at the css: https://saveourspire.org.uk/wp-content/themes/simple-la-bob-10/style.css it shows the old hr commented out, and the live one – specifying the solid blue rule – right below it.

    I know I’m missing something really stupid, but I can’t see it. I’ve had enough for the day. So if you can spot where I’m going wrong you’d earn my undying gratitude. G’night!

    Clear out your browser’s cache, that’s what you need to do because I am seeing a solid blue hr here. (Or perhaps you have been looking at something else the whole time)

    https://img508.imageshack.us/img508/9051/asderis3.png

    Some older versions of IE do not render the HR style correctly, preferring to simply use the (very old) standard grey line.

    I notice that you have set the height to 1px (good) but not specified a background color or font color -just a border color. So an old version of IE would not know what color to make it. You may need one or the other (font color or background color or both) to get an old browser to display it the way you want it to look.

    For the record, it looks right in Safari as well – I see a blue line.

    It might be helpful “force refresh” when you are viewing the page with the new css. This will update the cache for the page you are looking at — loading in the updated CSS file. In Windows, this is CTRL-F5 (works in IE and Firefox).

    Thread Starter drstir

    (@drstir)

    Bizarre!!! I look at it in the fresh light of a new day and the revised css is now taking effect. I’ve just changed the rule back to how it should look. And it’s immediately changed on the page. So why didn’t it do this yesterday?

    I did wonder whether it had something to do with the cache. I work on a Mac. The odd thing is that the problem was the same on both Safari and Firefox. Which made me think it was something to do with the site – rather than the browser.

    I’m not sure how to ‘force-refresh’ these browsers on a Mac. I’ll have to delve a little deeper into that one.

    Many thanks to everyone who responded.

    Safari is notorious for holding onto the cache — including the stylesheets. Google it, and you’ll find some solutions.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Save my css sanity!’ is closed to new replies.

Tags