1

This sounds like an abstract question, but I'm trying to troubleshoot this project I'm working on and I am at a loss.

I had to take over a project because the first developer was fired, so I made the rookie mistake of not starting it over from day 1. I've been fixing hundreds of mistakes and pretty much redoing everything. Everything from non-semantic code, in-line layout elements, unnecessarily sliced text images, and having to convert everything from CSS2 to CSS3.

I'm saying all this because there is way too much code to include on here, and I'm hoping that maybe me describing my situation will dredge up someone else's bad experience to advise me.

PROBLEM: I have one page that nothing works on. I deleted the appropriate CSS from the external stylesheet, and have been rewriting it in an internal stylesheet. The two biggest problems I'm having are that pseudo elements and pseudo classes aren't working. I struggled for awhile trying to figure out if it was something that I was using, but then I experimented with different pseudo classes like p:first-child {color:red} and nothing.

I'm also having problems with image replacement on the page. My usual text-indent isn't working, the text just stays on the page.

I'm not sure what other information would be relevant so if you need to see anything or ask any questions, please ask away. I thank you in advance for saving a noob like me from pulling out her hair :)

EDIT

Here's a link with the page code: http://jsfiddle.net/syren/Zsj2T/ Everything else on the site works so I have to assume that it something to do with the code on the page.

Syren
  • 1,961
  • 2
  • 15
  • 19
  • 2
    A link to the problem page would be excellent in tracking the problems. – Niet the Dark Absol Nov 08 '11 at 05:46
  • It's probably obvious... But have you determined *exactly* what's different on this page? Which resources are called on this page vs any other? There must be some outlying file that's interfering here. – Steve Adams Nov 08 '11 at 05:48
  • I can't post the link, but I'll try to post something. For the most part though there are no resources that I've used here that I haven't used elsewhere, and nothing that would make this page any different from the others. – Syren Nov 08 '11 at 07:19
  • 2
    "having to convert everything from CSS2 to CSS3" Wait, what?! – BoltClock Nov 08 '11 at 09:21
  • 1
    Start with a [HTML Validator](http://validator.nu/). It's possible you're overlooking a minor problem in the source. – Wex Nov 08 '11 at 09:33
  • converting gradients from sliding doors, removing image elements that can be replicated in css3, etc. the entire site needs to have text instead of images because it will have english and spanish versions. – Syren Nov 08 '11 at 17:23
  • Validating was the first thing I tried and it consistently comes up clean. – Syren Nov 08 '11 at 17:24

2 Answers2

1

I see that you're using #history p:first-child.

You're probably expecting this selector to select the first <p> element of #history, but that's wrong. The :first-child selector only select elements which are a first child.

To select the first <p> element, you have to use #history p:first-of-type.

Your code structure, in a tree view:

div#history    
    h2        :first-child 
    a.share   :nth-child(2)
    p         :nth-child(3)  p:first-of-type

Fiddle: http://jsfiddle.net/Zsj2T/1/
PS. Quick reference MDN: Pseudo-classes

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Rob W
  • 341,306
  • 83
  • 791
  • 678
-1

read this article check the compatibility with browsers of each pseudo element.

TIP: don't use color name(RED), instead use color hex value (#F00) as color name has been deprecated according to w3c

xkeshav
  • 53,360
  • 44
  • 177
  • 245
  • 1) `:first-child` is a pseudo-class, not a pseudo-element. There is no mention of pseudo-elements here. 2) "color name has been deprecated according to w3c" Since when? – BoltClock Nov 08 '11 at 09:48
  • 2
    That's HTML, not CSS. You shouldn't even be specifying color in HTML at all, but in CSS it's perfectly fine to use either the names or the hex codes. – BoltClock Nov 08 '11 at 09:56
  • the problem isn't with browser compatibility because the same pseudo classes work on other pages. – Syren Nov 08 '11 at 17:21