WordPress.org

Ready to get started?Download WordPress

Forums

Design Complete - Question (17 posts)

  1. Big Moose
    Member
    Posted 3 years ago #

    Hello everyone ...

    The overall design of my website (found here) is complete and now I'm working on adding content and addressing several validation errors. In non-Firefox browsers the navigation links at the top of my website breaks onto the next line. I'm having trouble figuring out how to remedy this problem.

    Also, every time I use html to insert a space into my design, it results in a validation error with a comment about the ampersand. This confounds me as I thought that this bit of code was still valid code. (It's this minus the space I inserted ... & nbsp;)

    Any suggestions? I'd be really grateful for your help with this.

    Thank you!!

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    You need to fix the validation errors first, then sort out the CSS errors.

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    your major problem is line 1.... you have the post-wrap div

    That's coming before the doctype and throwing everything off

    No divs, or any display code comes in or before the head section

    That needs to be gone, or at least moved to the body

    Once that is done, other things may fix

    Also, you use tags like p1 class

    Headers get levels, like h1, h2, etc

    I don't believe that paragraphs get numbers/levels, like p1 or p2, it's just p

  4. Big Moose
    Member
    Posted 3 years ago #

    Wow, you're awesome. Some actual feedback I can work with. I'm super grateful and will go tackle that right now. Thank you so much!! My goal is to really understand each error on my validation and do my best to correct everything so that my website 100% validates. I've got a big learning curve, though, and definitely need help with this.

    Very much appreciated, Rev. Voodoo, for giving me something to work with. I never knew that about the head section!!

  5. esmi
    Forum Moderator
    Posted 3 years ago #

    Or - in other words - validate first and don't expect a site with serious validation & CSS errors to work cross-browser.

  6. Big Moose
    Member
    Posted 3 years ago #

    Oh, just read the rest of your comment. Good point about paragraphs. I thought I could add an additional p like this: p1. This fixed a problem I was having. But apparently p and h1, etc. are actual html terms and can't be modified. I'm so glad to know that. Thank you!!

  7. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    yeah... you can apply class to each

    then you would be able to modify paragraphs independently. If you need multiple classes, they can be separated with a space.... so eg:

    p class="post special"
    p class="post"

    both of those would get the css applied to .post
    only the first woud get css applied to .special

    you can't modify selectors: span, h1, p, and so on
    but you can apply various ids or classes to affect certain ones

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    My goal is to really understand each error on my validation

    Some of the stuff you may not be able to fix, if it's plugin related, etc.

    But the major ones you can fix. The main thing is, as you work down the list of errors, they cascade

    So you start at the top.... the big one there was the code before the doctype.... fixing that may well clear up other errors which cascaded from the fact that the validator couldn't parse your doctype

    After any major errors, you fix the glaring mistakes you understand. Those can also clear up other seemingly nonrelated errors

    Then I usually google the error for what is left to see if I can fix anything else

  9. Big Moose
    Member
    Posted 3 years ago #

    You are very kind and helpful. It's refreshing getting actual help in a support forum.

    Thank you.

  10. Big Moose
    Member
    Posted 3 years ago #

    My post-wrap div appears to be inside the body and not within the head section. I'm using Firebug to help me locate this.

    I did find <div class="post-wrap"> in the first line position in my home.php file, but that file sits below the head, and so I'm not really understanding this validation error.

  11. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    http://validator.w3.org/check?uri=http%3A%2F%2Fsnazzyedits.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&verbose=1&user-agent=W3C_Validator%2F1.2#line-1

    Checking here, there is a post-wrap right at the top, line 1

    Is that not in your header.php file?

    You may not be able to find this iteration of post-wrap using firebug, due to the location of the code, it most likely wouldn't output anything for you to find in your site.

  12. Big Moose
    Member
    Posted 3 years ago #

    Nuts, I didn't notice my source code at the bottom of the validation screen. Thanks for pointing that out.

    That shot is showing everything -- all my php files rolled together into what outputs as my website. But when I look at my header.php file, where the doctype code is located, I don't see the post-wrap at the top. It does show up as the first line in my home.php file, like this:

    <div class="post-wrap">
    <?php get_header(); ?>
    <?php if ( ( is_home() || is_front_page() ) && get_option('minimal_featured') == 'on') include(TEMPLATEPATH . '/includes/featured.php');?>
    <?php if (get_option('minimal_services') == 'on') { ?>
    	<?php if (get_option('minimal_featured') == 'false') { ?>
    		<div id="services_bg">
    	<?php }; ?>
    			<div id="services" class="clearfix">

    Okay, hold the horses. Does "get the header" call my header.php file? Hmmm, if that's the case, then that's how the bugger is showing up on line one. Awesome!!

    I'm going to place that snippet of code below the header call and see what happens. I love this detective work, as frustrating as it can be.

  13. Big Moose
    Member
    Posted 3 years ago #

    Holy tomatoes!!!

    I removed that post-wrap and the closing tag and then revalidated my website. Instead of 29 errors and 33 warnings, I now have 17 errors and only 3 warnings.

    That's so true how it all cascades. That was a great way of describing how this works.

    Now the first error that shows up has to do with p versus p1. I'll tackle that and see what happens. The line break in my navigation links (shows up in Safari and non-Firefox browsers) still hasn't been fixed, but I'll address that once I comb through everything else.

    Thanks!!

  14. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    You are correct, the get header calls your header, you will also notive various other templates called in similarly... such as your footer, sidebar, etc.

    So yes, that post wrap would need to be called underneath the header somewhere.... probably above your loop somewhere
    http://codex.wordpress.org/The_Loop

    When looking at the source code in the validator, you can see how everything fits together.... headre footer template files navigation sidebars, etc

  15. Big Moose
    Member
    Posted 3 years ago #

    After addressing the p and p1 problem I now have just 3 errors and 3 warnings, and they are all associated with my Wicket Twitter Plugin and probably can't be fixed.

    About the break in my navigation bar at the top of my website, I'm thinking it has to do with the fact that I've wrapped each link inside a div instead of using ul and li. I'm not exactly sure how to do this, but I've been reading some tutorials and will experiment.

    Thanks!!

  16. Big Moose
    Member
    Posted 3 years ago #

    Just in case it helps someone else, I wanted to post back here and let anyone reading this know that I fixed the browser incompatibility problem. The navigation links at the top of my website (they run horizontally on one line) broke into a second line in non-Firefox browsers. The problem was that I had wrapped each link in a div. By converting everything to a list using "ul" and "li" and then assigning a class to the first link so that it sits flush left, the problem was fixed.

    Happy day!!!

  17. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    I've been pretty tied up, and unable to spend much time here. But I'm glad you were able to track down the issue you were having!

    You definitely want to stick with the ul/li combo for menus. You can have a main div wrapping the menu if necessary, but you get the proper behaviour using the ul/li.

    Then you can go further by nesting another ul/li combo inside of that list to add dropdowns, etc if you have the need. You can google for css dropdown menus to see how that is done.

Topic Closed

This topic has been closed to new replies.

About this Topic