Grow your CSS skills. Land your dream job.

Cross Browser Alignment Issues & Unable to validate.

  • # November 1, 2012 at 6:02 am

    Hello!
    I am having some issues with my client’s site (http://nwimt.com).

    In Safari and Google Chrome, I find that everything appears correctly.
    However, in Firefox and Internet Explorer, there seem to be some alignment issues…

    The first issue can be seen here: http://i.pgu.me/hSALlP3x_original.png
    Basically, the text is covering the search box, and pushing the input form of the search box below, and causing alignment issues. This only seems to be the case in Firefox, and in Internet Explorer.

    And the second (and most troublesome issue) is this: http://i.pgu.me/MctUOOc5_original.png
    Where somehow the image is being shifted way over to the right.

    Again, these issues are only present in Firefox, and Internet Explorer.

    I understand that to fix these, it could depend on validation. However, I am also not having any luck with W3C validating!

    [The W3C Validator results can be seen here.](http://validator.w3.org/check?uri=http%3A%2F%2Fnwimt.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 “The W3C Validator results can be seen here.”)

    It appears that it doesn’t like the “>” tags, on several of the elements, which I am rather stumped on.
    Any help would be immensely appreciated!

    Thank you!
    Ashley

    # November 1, 2012 at 6:27 am

    My Comments is..

    Use custom background image to the wpsc_live_search class instead of live_search_form. because currently, i’m unable to enter text in searchbox image.

    Add Float Left in this #topfeaturecontainer

    # November 1, 2012 at 7:01 am

    Wow…there’s a lot of things wrong here.

    My first guess us that you haven’t understood what the validator is telling you. A random ‘>’ probably won’t invalidate anything

    I would concentrate on fixing the errors first and see what happens.

    However, let’s look at your first point.

    You can’t put an h2 in a span…on looking at the HTML there is no reason for the span at all. Try removing the span wrapper and just apply the class ‘searchtoph2′ to the h2 element.

    Next, as far as I am aware, you have an ‘li’ but you can’t use a list item unless you have first specified that there is a list (ul). In any case, it’s not a list item.

    Also, why is “NORTHWEST INDUSTRIES OF MONTANA LIVE CATALOG SEARCH” all in one h tag?

    “NORTHWEST INDUSTRIES OF MONTANA” should be in a single h tag (ideally an h1) and the “LIVE CATALOG SEARCH” would ideally be the label to the input form and not an h tag at all.

    I could go on but it would take too long.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".