SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Los Angeles, California
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Compatibility Issues

    I am no professional, and recently sliced and coded my website on the fly with tutorials. Everything looks great in Safari and FF, but I recently viewed it in IE and it is completely messed up.

    I am not one bit sure as to what I did wrong although I do know that my coding is a bit messy and I figure that many times I didn't do things the right way, but it happened to work when I previewed in FF and Safari.

    The website is:
    http://www.NYEinHollywood.com

    If you can easily tell what the problem is by viewing the source, please let me know...

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    There are 172 validation errors on the page.
    http://validator.w3.org/check?uri=ht...Inline&group=0

    Perhaps it would be easier to figure out what's causing IE the trouble once the page properly validates.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Los Angeles, California
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it down to 11 errors. After going through these 11 remaining errors, it doesn't seem to me like that's what is completely misaligning things. It is not so apparent that the page is misaligned on this particular page of the website, but it is on the remaining content pages.

    For instance, http://www.nyeinhollywood.com/contact.html. That as well had many errors (over 300) and I took it down 18 errors. These 18 don't seem to be the reason why the page looks the way it does...

    Everything works perfectly in Safari and FF.

    Can anybody pinpoint why the page is completely misaligned in IE7+?

    Thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    I should tell you now that having multiple elements with the same ID are not going to help. If they're not supposed to be unique, then use a class name instead.

    The other errors are because you are badly nesting the H2 element.
    Your code should be changed to the following construction instead:

    Code html4strict:
    <h2><span class="h2">General Info:</span></h2>

    Fixing up those h2 errors will stop the text in IE from becoming huge.

    Add the following css declaration to prevent all of the obseleted <center> tags from screwing up IE

    Code css:
    #content {
        text-align: left;
        ...
    }

    Edit:

    Shouldn't have been text-align: center above, but instead text-align: left as is now
    Last edited by paul_wilkins; Dec 18, 2008 at 07:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Los Angeles, California
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Down to 1 error. Still the misalignment remains .

    No more <center> tags. The main content area is pushed more to the left now, but that's because it's supposed to be all the way on the left. Everything is pushed to the right still.

    Any ideas?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    It seems that you still haven't updated the stylesheet to the following:

    Code css:
    #content {
        text-align: left;
        ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •