I don’t know when it became a habit for me, but I like to make sure my xhtml and css are valid at all times. You can often find Valid XHTML and Valid CSS links across my newer designs (ex: Pieces of Love), and of course, here at this site. As I was validating my site today (instead of studying), I noticed two things that were giving my site errors, and I’ve found ways to correct both of them, so I thought I’d share with you here.
Entrecard is the image link you see on the side bar (conveniently under the heading “entrecard”). The code I used to generate the image was provided by another site, but after checking my site for valid XHTML, I realized that there was a problem with the code. This is the original code: <script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=12580&type=standard_127" type="text/javascript" id="ecard_widget"></script>
The problem likes with the & symbol. Instead, replace that with &, so you get the following code instead:
<script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=12580&type=standard_127" type="text/javascript" id="ecard_widget"></script>
The second thing that was causing trouble was the Sociable (a WordPress plugin) CSS. The opacity elements were generating errors when I tried to validate my css because they were either browser specific (-moz-opacity) or haven’t been approved as standard css yet. There is a way to use javascript to get around it, but it doesn’t solve the issue of changing opacity on hover. So my solution? Remove the opacity elements altogether, hence why the sociable icons are not semi-transparent.
But is it really necessary to always have valid XHTML and CSS? Some argue yes, some argue no. Read more here:
Valid HTML/XHTML Trend
Validation Alone Isn’t EnoughError processing request
Comment?