WordPress.org

Ready to get started?Download WordPress

Forums

Help with CSS and validating xhtml... (15 posts)

  1. Guamgirl101
    Member
    Posted 10 years ago #

    Hello,
    I've had my WordPress blog at http://www.nostalgia101.com/ installed for a while now, though I've never had it completely validated in xhtml since I added that different doctype, which is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> and I read about this in another older post. Anyway, changing the doctype to this did make things easier for me when I designed the layout of my blog. However, I've decided that I'd like to try getting it to validate in xhtml again, and I've spent the past week going through not only my blog, but all my other pages of my site to fix my coding. I've gotten help from this tutorial: http://www.w3schools.com/xhtml/xhtml_intro.asp and I thought I had everything correct, including my blog, so when I tried to change the doctype from HTML 4.01 Transitional back to the way it was before, XHTML 1.0 Transitional, the layout for my blog and for my other pages gets messed up. The only wordpress pages I've changed since I installed it have been the index.php and wp-comments.php files.
    I'm assuming that it has something to do with my stylesheet at http://www.nostalgia101.com/stylesheet.css, but I'm not sure what my mistake(s) could be. I've tried looking through the w3schools.com website for some tutorial on CSS to see if I have been doing it right or if I made some huge mistakes, but so far the stuff I've found doesn't seem to make sense to me.

  2. Beel
    Member
    Posted 10 years ago #

    I was going to take a look at it but you have mixed doctype and no character encoding. Before we can take a look at it and see why it is not validating you will have to have
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    and set the character encoding. I suggest you take a look at the original index page and start copying back in the relevant header information.

  3. Ozh
    Member
    Posted 10 years ago #

    Your header misses information such as doctype and character encoding. Besides this, I see a few mistakes easy to fix :
    - some img are missing the alt="image description" (mandatory)
    - some attributes are enclosed with 'this' instead of "this" (like title='View posts under blabla')
    - the link to the comment page is incorrect :
    none
    Simply none should be enough for the same result
    - your webring html won't validate : if I'm correct, you can't have a "target" attribute for a link in XHTML
    Fixing these should help getting less errors :)

  4. Guamgirl101
    Member
    Posted 10 years ago #

    Hi Beel,
    Thank you so much for replying. If you'd like to see how my blog would look like with the correct doctype, you can view the wp.php page that I made to be just like the main index.php page, except I added the correct doctype and the extra bit of coding to the html tag:
    http://www.nostalgia101.com/wp.php
    Obviously, as you can see from that page, the layout is completely messed up. lol. If this still doesn't help, though, I can try adding the correct doctype to the index.php page and mess with that one. Also, I'll definitely take your advice and look over the original index page to help me fix my blog up. I've been doing that already, but obviously I need to keep looking at it to get it right.
    Thanks again for your reply, I appreciate it.

  5. Guamgirl101
    Member
    Posted 10 years ago #

    ozh,
    I just saw your reply now. Thank you for replying with all that info. I'm disappointed that the xhtml tutorial site I used to help me didn't mention anything of xhtml not allowing the target attribute for links. So many of my links have target attributes! lol. I guess I'll try going through my pages and getting rid of them. I also had no idea that the alt attribute was mandatory.
    There's definitely a lot more mistakes than I thought. This is going to take a while. Thank you for your help, everyone. I appreciate it.

  6. Beel
    Member
    Posted 10 years ago #

    Well, the layout problem would not and is not the fault of xhtml. You have positioned everything absolutely in your css. Use the css from your normal page and the layout will be fine.
    There is a lot of cleaning up to do, but you should be able to get there. Don't capitalize - <BODY> should be <body>, etc.
    And make your doctype correct. It should be, as I said before:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/1">

  7. Guamgirl101
    Member
    Posted 10 years ago #

    So do you think messing around with my wp.php would be fine, for now, until I get everything for my blog cleaned up, and then I can copy and paste everything that's correct to my index.php file? I figured I could work on my wp.php page and correct everything as best as I can so that visitors to my site won't see the constant errors if I were to do it with the index.php page. So far I've copied and pasted the doctype according to what you typed into the wp.php page, and now I just have to go through and fix my html, css, etc. One thing I'm confused about, though, is your comment on positioning everything absolutely in my css. Am I supposed to use another way of positioning everything? I've done tons of searches on the net for tutorials on doing div positioning, and even trying to use divs within divs and how to correctly do it, but I haven't found a site yet that has some information on that.
    And about using the css from my normal page - are you referring to the index.php page? I actually am using the exact same stylesheet for that one as I am for the wp.php version, but of course it's my own coding errors/css errors that's messing things up and I know that. I still have a lot to learn with this stuff but I'm going to give it my best shot this weekend.

  8. Beel
    Member
    Posted 10 years ago #

    You could use your wp.php page or just "save" the current index page and work with it. I definitely would "toss" the css you are using for wp.php and work with the one you use for your site.
    Too much to go into here, but all you have is
    #header {POSITION: absolute}
    #content {POSITION: absolute}
    #menu {POSITION: absolute}
    If the boss tells you to go somewhere and stand, the first thing you are going to ask is, "Where?" The css for your index page gives the top and left positioning for each so use it.
    Note: You are using "stylesheet2.css" for wp.php and "stylesheet.css" for you index page and they are NOT the same.

  9. Beel
    Member
    Posted 10 years ago #

    That is interesting to note. I saved the wp.php page and the accompanying downloaded css did not contain the misconfigured top, left and width attributes - just position:absolute. Guess it wasn't "there" for the browser to read.

  10. Guamgirl101
    Member
    Posted 10 years ago #

    Hmm. That's what I figured, too, that somehow my position attributes didn't show up in wp.php. Why it didn't I'm not sure, but I guess it did have something to do with adding that px at the end for pixels.
    Beel, do you know of a link to an xhtml tutorial that lists every requirement needed to validate your site? Like I mentioned earlier to ozh, I was annoyed that the xhtml help site I was using didn't mention anywhere of the target attribute not validating, or that each image required the alt attribute. I'm sure I must be missing tons of other requirements. The only other one I knew from reading an older post was that colored scrollbars are not an option so I got rid of that from my stylesheet.

  11. Beel
    Member
    Posted 10 years ago #

    You can start here:
    http://www.w3schools.com/xhtml/xhtml_reference.asp
    I learned by running the validator and tweaking each error reported but then I have been writing html for quite awhile so it didn't take long.

  12. Beel
    Member
    Posted 10 years ago #

    Single quotes are fine. Maybe too much to go into here but WP subsitutes the actual link to the smilie wherever it finds, say :wink:, using PHP and double quotes will not work. Since this isn't related really to WP and the thread is pretty much limited to just you and me, let's move it backchannel. You can e-mail me at BoulderBill at comcast.net

  13. Guamgirl101
    Member
    Posted 10 years ago #

    Thank you very much, Beel, for taking the time to help me out. I can imagine how frustrating it is to help a newbie with things that may be very basic/easy for you. So I'm very grateful for your time. I'll try emailing you now, too.

  14. Anonymous
    Unregistered
    Posted 10 years ago #

    This seems to have been a bit of a struggle for you Guamgirl but that is one very beautifully styled, original and cool looking blog. Welcome to WP. You deserve a lot of success.

  15. Guamgirl101
    Member
    Posted 10 years ago #

    Hey Anonymous,
    Thank you very much for your reply. :-) I'm glad you like the layout I gave it. It's actually not nearly as original as you may think since tons of other people have used a similar layout, but thank you. I've been working on my coding for most of today so far. lol! I'm hoping to do a new layout by this weekend because I haven't changed it in a while.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.