Grow your CSS skills. Land your dream job.

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

  • # January 18, 2013 at 7:38 pm

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



    <br /> <meta /></p> <link /> <body></p> <p>You cannot include a < !DOCTYPE.<br /> You cannot include stylesheets.<br /> And any auction pages viewed in Internet Explorer are thrown ruthlessly into QUIRKS MODE.</p> <p>You basically have INLINE coding w/QUIRKS MODE.</p> <p>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:</p> <p><a href="http://www.isdntek.com/demo/auctiontester.htm" rel="nofollow">http://www.isdntek.com/demo/auctiontester.htm</a></p> <p>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:<br /> <a href="http://catalog.carlislefsp.com/images/450/10635.jpg" rel="nofollow">http://catalog.carlislefsp.com/images/450/10635.jpg</a></p> <p>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<br /> padding: 25PX; border: 4PX dashed black; background-color: white;</p> <p>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.</p> <p>semicolon</body>

    # January 18, 2013 at 7:41 pm

    Erm . . . the following tags:




    <br /> <meta /></p> <link /> <body></body>

    # January 18, 2013 at 7:58 pm

    For example, you can begin by dropping in something this simple and pressing TEST:

    # January 18, 2013 at 8:01 pm

    Wow I really, really don’t know how to post code to this forum!! Sorry!

    # January 18, 2013 at 8:21 pm

    Paste code > select code > click the ‘Code’ button.

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

    # January 19, 2013 at 11:11 am

    **Indented** by ≥ 4 spaces. Got it.

    # May 11, 2013 at 5:27 am

    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 -



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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".