Where do these broken image links come from?

I dont see broken images I see the gravatar image

https://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=68

Hmm, strange. I see them between the gravatar image and the text box. The moment I read your post I ran to check two computers in an office next door. They both showed the broken links.

Also not seeing any broken images, just the default ‘Mystery Man’ gravatars

I chatted with him and found em.

Each comment is a LI and they got a broken arrow image for each comment box.

.commentlist > li:before {
    content: url("images/comment-arrow.png");
    left: -21px;
    position: absolute;
}

Ah, probably comes from the bizarre child theme setup!

2011 stylesheet is loaded using @import,

but then all of 2011 styles are copied to the actual child stylesheet

And I’m guessing the images were not brought over to the child theme, so the child stylesheet is looking for images that don’t exist in the child theme?

Normally, the @import rule is used, and only the styles being changed are copied to the child tehme style.css

Anyway, followed WP Bum back to his site and he found the problem, which seems to affect only Chrome and IE.

So, if anyone has a similar problem…

In style.css, found:

.commentlist > li:before {

and below it deleted:

content: url(“images/comment-arrow.png”);

and that fixed visitors comments. To fix my own comments (dark gray in twenty eleven), I found:

.commentlist > li.bypostauthor:before {

and below it deleted:

content: url(images/comment-arrow-bypostauthor.png);

All fixed. Thanks WP Bum

Yup, most likely related to my comment above.

Is there a reason for having your child theme set up tthe way you do? Specifically with regards to the style.css? Normally using the @import line, we then only paste in rules we would change. Otherwise we would not use @import if copying over all the css.

Not sure I am reading you right, but I do have this in my child theme’s style.css:

@import url(“../twentyeleven/style.css”)

Line 07, though don’t know if it is coded correctly.

that code is correct

It just looks like you have all the styling from 2011 copied into your stylesheet, is that correct?

Yup, it is. Though not sure how it ended up that way. Maybe no point in having @import, right? … I’m new at this, and at first was making changes to the main style.css, and lost track of what had been changed, so I think I just copied it all so nothing would be missed. That’s my recollection. I’ll know better next time. Famous last words.

You got it… that is actually what caused your initial problem

You had 2 conflicting stylesheets. Different browsers treated it differently – if the parent themes was respected, the images worked – as they are in the parent theme. If the child stylesheet was being respected, the images broke, as you don’t have those images in your child theme.

You really have 2 options

The better option:
Keep the @import line, and delete any css rules which you haven’t customized. child theme style.css normally calls to the parent using @import, and then the only css rules needed are any with your custom code in it

The option for drastic changes:
Delete the @import rule, and keep all the css – this is only the better way to go if you are rewriting the entire stylesheet really.

The main thing here is to not have 2 full stylesheet fighting with each other, with your current situation, you’ll never be able to customize things predictably, cross-browsers

Tell me if I’m wrong. The best way would be to copy the child theme style.css I have now to a safe place. Then cut out most of what I think is not changed. If all continues to work ok, save it again to safe place, and go back to cutting.

Or is there an easier way?

Your method is about as good as any (it’s the way I would do it at work, where I can’t use any helpful software)!

I know there are tools for doing comparisons of code (2011 original vs. your child theme) which would show you what is changed…. however, I haven’t used any of them! (Googling Code Compare Tool seems to bring up various options if you are interested)

All the same to me, I suppose, so I tried the one here .

Stripped it down as much as I dared. Will have to spend some time now seeing what I have.

There’s something I am not sure I understand. Can I make changes to code in the main twenty eleven style.css and paste the edited versions anywhere in the child style.css, in any order? If so, is there anything in the file that must be in a particular order?