Page Validation Error Help

Greetings. I have a site that I’ve been developing for a while now using the wordpress format. At some point, the css no longer worked in the footer. Some of the earlier styles are now carrying down all the way to the footer. For instance, the four red <h3> colored headers in the footer shouldn’t be like that. They should be reversed out on a dark background.

This appears to be an issue in every browser but Safari … for some reason Safari is showing it correctly.

I gather from trying to validate the page that there are some errors, but I have no idea what to do about these errors.

For example the validator says:

Line 124, Column 69: Duplicate ID s.
<input type=“text” name=“s” id=“s” class=“search-text-box” />

That form input is part of the theme … I didn’t add that. Elsewhere it says:

Line 566, Column 55: End tag li seen, but there were open elements.
<li><a href=“index/case-studies/”>Case Studies</li>

When I check that code, the list elements appear to be fine.

I’m wondering if anybody can set me on the path towards debugging this thing. I have no idea where to start.

Here’s my dev url: http://sterling-testing.com/

Thanks

HI,

Try removing the sand-serif from here:


<link rel='stylesheet' id='rev-google-font' href='http://fonts.googleapis.com/css?family=Raleway\\', sans-serif;' type='text/css' media='all' />

e.g.


<link rel='stylesheet' id='rev-google-font' href='http://fonts.googleapis.com/css?family=Raleway\\'  type='text/css' media='all' />

(Not that it should be in the body anyway)

Then close the a tag here:


<li><a href="index/case-studies/">Case Studies</li>

e.g.


<li><a href="index/case-studies/">Case Studies</a></li>

Try that first and re-test. It may not be the culprit but is a start.

I already cleared up most of that stuff and it’s still not displaying the correct CSS for the footer. When I validate it now, it only shows 3 errors and 2 warnings. The first two were like that in the theme. The last two are weird becuase when I view source, the code looks fine. It’s saying that link to the google font on line 145 is missing and attribute, but It doesn’t look like it to me.

I’m reading this now: http://stackoverflow.com/questions/18549726/element-link-is-missing-required-attribute-property
How would I add an “itemprop” attribute to my link element? Wordpress slider plugin is spitting out that <link> element down there.

Here’s the error I’m trying to clear up now …
Line 138, Column 143: Element link is missing required attribute property.
…s-serif’ type=‘text/css’ media=‘all’ />

Line 309
<div id=“footer” class=“dark”>
I cannot find a class “dark” with the tools in Firefox. Perhaps Safari’s tools will show you in which stylesheet it is located. It would be great if you can tell us where it is.

Lines 83 and 123 have duplicate IDs.
According to the rules of HTML, an ID can only be used once on a page, so one of them should be changed.

Thanks. Could you search for this in the styles.css? The footer styles are right below that in the stylesheet

/* Dark Style

====================================*/

#footer.dark {

background: #4c4c4c;

color: #c8c8c8;

}

I see the double ID thing. That would cause big trouble … I didn’t add any of that though. That was the theme. Any idea how to disable that? There is some sort of search form that is trying to go on the page dynamically in two different spots.

Update: So, I turned off the search in menu option of the theme and it cleared up the double ID issue. Weird … I needed that up there.

| scott

There is a div with three classes on the homepage now. The classes are: class=“mainCopy-home gray-div-shade extra-margin-top”.

In firebug, for some reason, it will not show the first class (mainCopy-home). You can clearly see the other two defined in the CSS window, but not that first one. Why is it blowing off that style? I think if I fix this, maybe the footer issue will fix as well …

Back on post #5

(note: this is spelled style, not styles)
<link rel='stylesheet' id='style-css' href='http://sterling-testing.com/wp-content/themes/Astrum/style.css?ver=3.7.1' type='text/css' media='all' />
Line 7949 (or pretty close thereto)


.image-library-headers { font-size:18px; font-weight:300; color:#ffffff !important; background-color: #ff3830; margin-bottom:10px; padding:3px 6px 3px 12px;[color=red]"[/color] }

Delete the stray quotation mark just before the end of the line (marked here in red).

Just for the record, I ran this stylesheet through the CSS validator:
http://jigsaw.w3.org/css-validator/validator
It shows 23 errors. Interestingly, the last error is the one identified above… just a bit more cryptically described.
Parse Error ;" } .main-content-pane { width:882px; float:left; }

The quote mark terminated the stylesheet.

Anyway… there are still 22 errors that could use some TLC. :slight_smile:

Cheers

You did it man … that was the main glitch! It was so stupid too. I thank you from the bottom of my heart.

Now on to those other 22 errors … lol.

You know, a lot of those so called errors are just css hacks that were used in the theme … not really sure what to do about those.