Cross-browser alignment issues

  • Ashley Michèlle

    (@ashleymichelle)


    11 years, 6 months ago

    I have run into a few issues with my client’s website: 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.

    Any help would be greatly appreciated! Thank you in advance!!

Viewing 9 replies - 1 through 9 (of 9 total)
  • WPyogi

    (@wpyogi)

    11 years, 6 months ago

    Start by fixing some mark-up errors:

    http://validator.w3.org/check?uri=http%3A%2F%2Fnwimt.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Thread Starter Ashley Michèlle

    (@ashleymichelle)

    11 years, 6 months ago

    WPyogi,

    Thanks! I have gone and looked through the W3 Validator several times, actually… but many of the errors it detects are from plugins, or else the way I am linking to pages… for example, it doesn’t like “/./employment”, even though I prefer to link to pages within the directory as such.

    And I don’t quite understand why it doesn’t like the “>” that appears at the end of several elements.

    If you could offer any insight in to what I need to fix (in a way that my designer-not-so-much-of-a-coder brain can process) I would be very grateful!

    Thread Starter Ashley Michèlle

    (@ashleymichelle)

    11 years, 5 months ago

    Bumping, still not resolved. Any help is of course, very appreciated!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    Bumping is not permitted, but the problem cannot be resolved until the page holds valid markup.

    JungleSpace.net

    (@junglespace)

    11 years, 5 months ago

    It would be helpful if provide your site address for us to look into the code.

    *This topic is best suited to be discussed in the Themes and Template forum since it is not a WordPress issue.

    Thread Starter Ashley Michèlle

    (@ashleymichelle)

    11 years, 5 months ago

    JungleSpace, thank you! I will remember that, next time I have a Theme-related issue. I wasn’t 100% sure on where to post this.

    The site address is http://nwimt.com, and I did include that in my first post.

    I appreciate any insight you can offer!

    Thread Starter Ashley Michèlle

    (@ashleymichelle)

    11 years, 5 months ago

    Andrew,
    Apologies.

    I have run it through the validator, and what I am seeing is that the “>” on several elements seem to be the culprit of the invalid markup. I am not exactly sure why this is, or what seems to be the problem…

    Probably something really obvious, or dumb on my part, but I would appreciate correction and insight on the matter!

    Thank you!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    Focus on the title of the error, rather than the red highlighted character.
    E.g

    Element h2 not allowed as child of element span in this context.

    Means you cannot have this structure;

    <span>
 <h2>
 </h2>
</span>

    It must be this structure;

    <h2>
 <span>
 </span>
</h2>

    This document defines and explains all errors that can be generated by the validator.

    JungleSpace.net

    (@junglespace)

    11 years, 5 months ago

    Apologize for missing the site address.

    For the banner, you can adjust the CSS of #topfeaturecontainer and set the float property to left;

    `
    #topfeaturecontainer{
    float: left;
    }`

    For the Search, though it is align on my Firefox, you can adjust the padding-left width for .searchtoph2 to move it more to the left.

    The above not checked for IE.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Cross-browser alignment issues’ is closed to new replies.