The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

browsers corrupting my pages

  • # August 24, 2009 at 3:04 pm

    I am having problems with pages displaying differently in different browsers. I have validated both my HTML XHTML 1.0 Transitional and CSS. The CSS finds four errors that are included in CSS 3 but not CSS 2.1; however I don’t know how to specify CSS 3. None of these errors have anything to do with the display problems I’m having.

    The pages display perfectly in Firefox 3 and Opera. Safari 4 and IE 5.2 (Mac) and 6 are having severe problems. In Safari the best I can figure is the floats are not clearing so the footer rides up to right under the header ignoring the main div. I have attached screen shots. Safari-1 and Safari-2 illustrate the problem. The second page floats the footer and thumbnails under the text box so the links cannot be accessed. IE 5 for Mac displays almost correctly with the footer only slightly overlapping the main text area. I don’t even know where to start with IE 6. Only a small part of the page shows, cropping off most of the index list. See IE-1 and IE-2.

    So I’m starting to go crazy here and have run out of troubleshooting ideas. I have a CSS reset statement at the top of my CSS file. I have recoded the page/CSS many times. The thing that is sending me over the edge is that a third page loads fine with the floats stopping at the bottom of the text box on both browsers and essentially it is the same code in all cases.

    Links to the offending pages. , , … lves.shtml , and (this one loads correctly) … rras.shtml

    Any help you can provide is greatly appreciated.


    # August 24, 2009 at 3:36 pm

    This reply has been reported for inappropriate content.

    Try getting rid of that extra div around the footer.

    According to firebug you have 3 javascript errors on the page, which probably isn’t helping matters:

    illegal character
    index.shtml()index.shtml (line 23)
    {rtf1ansiansicpg1252cocoartf949cocoasubrtf540ncrumb.js (line 1)

    breadcrumbs is not defined
    breadcrumbs();nindex.shtml (line 23)

    syntax error
    </script>nJG-Googl…lytics.js (line 4)

    And forget about IE for Mac, nobody, and I mean nobody, uses it anymore.

    # August 24, 2009 at 8:14 pm

    I don’t write javascript so I will need someone to look at it for me. I don’t think I should mess with the Google Analytics one so that she will still have her tracking.

    Is there anyone out there who can help me to figure out why Safari and IE 6 are not loading the page correctly. I have found a lot of IE hacks but nothing for Safari. About 10% of her visitors use Safari. I really need to figure this out but have hit a brick wall.

    Thanks for your help.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed