Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

asked on

facebook custom fan page: doctype or iframe

We have a facebook fan page here using FBML:

http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702

except it shows up different all over the place depending on the browser and browser version.

Can you show me how to use a doctype or iframe to solve this problem?

Thanks.
SOLUTION
Avatar of John Doeherty
John Doeherty
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of weikelbob

ASKER

I had a problem with one of the pages. Let's take this page for now:

http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702?sk=app_7146470109#!/pages/NLP-Institute-of-California/169772046384702?sk=app_6009294086

It looks good in all of my browsers, FF mac, safari, opera, FF PC, IE6, IE7 but it's messed up on other people's computers

The attached file AllMyBrowsersw.jpg has a line in it from pasting 2 screenshots together. It actually looks perfect in real life.

I think I need to go with an iframe. I don't think something this complex will work in FBML.
AllMyBrowsersw.jpg
FriendsPC.jpg
Without knowing the Code i can only guess... Might be a Cache issue; try adding '?x=123' or something to your Images... Or, post the Code, explain what you expect, describe what You're getting instead...
You don't think that page is too complex for fbml?

You don't think an iframe is the only way to go?

I don't think I can post the code, but I can tell you what I'm doing.
<link rel="stylesheet" type="text/css" href="http://nlpdvds.com/wp-content/uploads/2011/01/style.css?v=17.45">

<fb:visible-to-connection>
   <div id="shop-wrapper">

      <div id="shop-top3-header">
<a href="http://www.nlpca.com"><img src="image here"></a>
      </div>

         <div id="shop-top3-wmdvd-journey">

      <div id="shop-top3-wmdvd">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p39&navicat=5&navisubcat=9&naviprod=39"><img src="image here"></a>
      </div>

      <div id="shop-top3-journey">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p69&navicat=5&navisubcat=9&naviprod=69"><img src="image here"></a>
      </div>

         </div>
         <div id="shop-top3-early-DSR">

      <div id="shop-top3-early">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p67&navicat=5&navisubcat=9&naviprod=67"><img src="image here"></a>
      </div>

      <div id="shop-top3-DSR">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p59&navicat=5&navisubcat=9&naviprod=59"><img src="image here"></a>
      </div>

         </div>


      <div id="shop-shopsite">
<a href="http://www.shop.nlpca.com"><img src="image here"></a>
      </div>
         
      <div id="shop-menu">

         <div id="shop-menu-about">
<a href="http://www.nlpca.com/DCweb/NLPca_mission.html"><img src="image here"></a>
        </div>

         <div id="shop-menu-training">
<a href="http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702?v=app_7146470109&ref=sgm"><img src="image here"></a>
          </div>

         <div id="shop-menu-shop">
<a href="http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702?v=app_6009294086&ref=sgm"><img src="image here"></a>
          </div>

         <div id="shop-menu-contact">
<a href="http://www.nlpca.com/DCweb/Contact_Us.html"><img src="image here"></a>
          </div>

      </div>

</div>
</fb:visible-to-connection>
</fb:fbml>

Open in new window

#shop-wrapper
{
float:left;
width:520px;
height:1461px;
}

#shop-wrapper2
{
float:left;
width:520px;
height:1174px;
}

#shop-top3-header
{
float:left;
width:520px;
height:178px;
margin-top:-3px;

}

#shop-top3-wmdvd-journey
{
float:left;
width:520px;
height:716px;
margin-top:-3px;
}

#shop-top3-wmdvd
{
float:left;
width:257px;
height:716px;

}

#shop-top3-journey
{
float:left;
width:263px;
height:716px;

}

#shop-top3-early-DSR
{
float:left;
width:520px;
height:278px;
margin-top:-3px;
}

#shop-top3-early
{
float:left;
width:259px;
height:278px;

}
#shop-top3-DSR
{
float:left;
width:261px;
height:278px;

}

#shop-shopsite
{
float:left;
width:520px;
height:137px;
margin-top:-3px;
}

#shop-menu
{
float:left;
width:520px;
margin-top:-3px;
}

#shop-menu-about
{
float:left;
width:143px;
height:54px;
}

#shop-menu-training
{
float:left;
width:119px;
height:54px;
}

#shop-menu-shop
{
float:left;
width:118px;
height:54px;
}

#shop-menu-contact
{
float:left;
width:140px;
height:54px;
}

#shop-spacer1
{
height:1256px;
width:1px;
float:left;
}

Open in new window

I went ahead and posted the code.

I don't have something like ?x=123 on any of the pictures
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Woops, I accidentally accepted one of my own comments.

I'll send a note to Community Support
Even though FBML is depreciated, we are using a very basic FBML setup and it is working. As you know, facebook is backwards compatible with FBML and I couldn't find a completely free iframe option