treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Coding for IE in a headerless IFrame with no DOCTYPE (EBay)

  • Auction listings on EBay appear within an IFrame, and forbid the inclusion of any flavor of the following tags:

    You cannot include a <!DOCTYPE. You cannot include stylesheets. And any auction pages viewed in Internet Explorer are thrown ruthlessly into QUIRKS MODE.

    You basically have INLINE coding w/QUIRKS MODE.

    The purpose of this thread is to see just how severe the limitations are to my coding accurately-aligned, modestly-styled EBay auction templates that will render accurately in Internet Explorer QUIRKS MODE -- specifically >>IE 8 (the XP-associated browser) -- and not any version of IE that is newer (9 on up). The first thing to aquaint yourselves with if you're up to the challenge of helping me with this is a site that any self-respecting EBay Seller should immediately bookmark:

    http://www.isdntek.com/demo/auctiontester.htm

    A kind, merciful EBay member designed this site specifically to qualify EBay auction-listing HTML code for The Browser Everyone Loves To Hate: MS Internet Explorer. Open his site up in Explorer 8; drop your code into the practice area; and press TEST. EDIT to make changes. You can skip entirely the need to test this in Firefox since Firefox displays my validated auction code beautifully, including the (public) image we can use for testing purposes: http://catalog.carlislefsp.com/images/450/10635.jpg

    The challenge is this: Create 25px of padding around this 450 X 450 image and surround the resulting dimensions with a black 4px dashed border. The INLINE <img style= code I've been using thus far includes padding: 25PX; border: 4PX dashed black; background-color: white;

    Please tell me if you can get just this one picture to display its frame in IE 8 using AUCTIONTESTER, and then I'll move on to the sizing/positioning challenges.

    semicolon

  • Erm . . . the following tags:

      <DOCTYPE>
      <html>
      <head>
      <title>
      <meta>
      <link>
      <body>
    
  • For example, you can begin by dropping in something this simple and pressing TEST:

      <img style="padding: 25PX; border: 4PX dashed black; background-color: white;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
    
  • Wow I really, really don't know how to post code to this forum!! Sorry!

  • Paste code > select code > click the 'Code' button.

    Alternatively, just make sure to indent your code in by four spaces.

  • Indented by ≥ 4 spaces. Got it.

  • I think that ebay tester might be out of date, you can add stylesheets and even some useful JS.

    I didn't know about IE browsers using quirk mode inside the eBay iframe but I have just updated my stylesheet and it looks fine, I have also made it responsive for mobile devices!

    I would suggest using conditional classes -

      <!--[if IE 7]> <div id="wrapper" class="lt-ie9 lt-ie8"> <![endif]-->
      <!--[if IE 8]> <div id="wrapper" class="lt-ie9"> <![endif]-->
      <!--[if gt IE 8]><!--> <div id="wrapper"> <!--<![endif]-->