Why is my content not displaying properly?

Posted on 2012-08-23
Last Modified: 2012-08-24
Head out to http:/

I built it as a facebook app and intially it worked fine. But recently, while everything displays correctly after you've logged in using a Safari browser, IE will not display the contestants.

If you pop open the hood and look at the source code, you can see the information but it doesn't display. Instead everything is slammed up against the right side of the browser and I don't know what the problem is.

I had a tech from godaddy tell me that there was a problem caused by the presence of unsecure URLs in the context of an https dynamic. But after going through my content and changing all of the "http" to "https", there wasn't any change and I decided to run this up the flagpole and allow some minds greater than my own to take a look at it.

The reason I'm hesitating at thinking that this is a SSL problem is that you're usually asked if you want to look at only those things that were delivered securely and that's not the case here.

So, what am I missing?
Question by:brucegust
    LVL 42

    Accepted Solution

    Your site looked the same in Firefox and IE (7,8,9) - the contestants where showing.

    Having said that, here are a few pointers. When designing websites, the best change you have of making sure it views the same across all modern browsers is to ensure your code conforms to certain standards, particularly HTML and CSS. Your site has a lot of HTML errors (including the wrong DOCTYPE - yours is set to FrameSet, but it doesn't look like it should be). I would run your site through the HTML and CSS validators and fix any errors identified. You would also do well to reset your CSS before your start.

    One final point - you are using tables to design your site which is not really a good idea, and prone to cross browser display differences. Try switching to an HTML/CSS solution.

    CSS Validator:
    HTML Validator:
    CSS Reset:

    Author Comment

    I figured it out!

    While there may be ample room for my formatting, the problem that was freaking everything out was the way in which I was referencing the facebook profile pictures in my "facepile."

    Rather than coding it like this: <fb:profile-pic uid="<?php echo $row['friend_id']; ?>" width="26" height="26"></fb:profile-pic>, I left out a delimter and wrote it like this:
    <fb:profile-pic uid="<?php echo $row['friend_id']; ?>" width="26" height="26"</fb:profile-pic>..notice the absent ">" after "26"

    However incremental that might appear, that was enough to monkey everything up.

    Thanks for the feedback and if anyone else ever has to contend with this, perhaps my little journey will save someone some time.

    Author Closing Comment

    Excellent feedback from the standpoint of those things that need improvement in terms of formatting, but it was the way in which I called my facebook pictures that proved to be the problem, more so than my HTML or CSS.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    Suggested Solutions

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now