SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Wraparound Corner PNG improperly offsets in Explorer 8

    Hey guys, I'm trying to figure out why my banner ribbon has an irritating (what looks like) 1px gutter showing up in Explorer 8. It positions correctly in Firefox and Sea Monkey. Please tell me I'm not in Quirks mode.

    [EDIT]
    I just realized that the top is completely off in IEx8, as well. What the . . .

    s

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta content="text/html; charset=ISO-8859-1"
          http-equiv="Content-Type">
        <title>TESTING BANNER</title>
      </head>
      <body>
     
        <div style="margin-top: 33px; margin-left: 25px; margin-right: 25px;
          background: BLACK">
          <img style="position: absolute; top: 0px; right: 0px; width:
            512px; height: 512px;"
    src="http://dc431.4shared.com/img/cNv6GAez/s7/vector_-_corner_ribbons_2-06_b.png"
            alt="">
     
          <div style="padding: 30px 30px 30px 30px;" align="center">
            <img style="padding: 15px 15px 15px 15px; background: WHITE;
              width: 600px; height: 391px; display: block;"
    src="http://images.fineartamerica.com/images-medium/forest-floor-liz-mcqueen.jpg"
              alt=""></div>
        </div>
     
        <div style="background-image:
          url([url]http://blog.thornyeternity.com/wp-content/uploads/2012/05/tile-arabesques-light.jpg);[/url]
          background-repeat: repeat;">
     
          <div style="padding-top: 35px; padding-bottom: 35px; text-align:
            center; display: block;" align="center">
            <img style="border: 10px dotted BLACK; padding: 25px 25px 25px
              25px; width: 800px; height: 385px; background-color: white;"
              src="http://img.aasd.com.au/37538374.jpg" alt="">
          </div>
        </div>
      </body>
    </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Copying and pasting your code into a new file looks good to me in FF and IE8 (which indicates Standards mode).

    (Forcing quirks mode looks really ragged.)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,804
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    It looks ok to me also.

    Do you have a link to the actual page as that may tell us something more

  4. #4
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul, Ronpat, thanks for helping me with this. I don't have a place to upload the html (it's going to be an auction listing on EBay, hence the INLINE coding). I'm attaching a screenshot if that's any help? The guttering is fixed and persists even when narrowing the monitor viewport. I also included a shot of the version number. Apologies for the size; I'm on a 1200 X 1900 widescreen monitor that lives in porTraiT mode.

    s
    Attached Images Attached Images

  5. #5
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Two more things . . .
    1. The guttering also shows up in Dreamweaver 8!
    2. I cleared my cache and loaded/viewed the identical coding under a new file name (made no difference).

    s

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The position of the ribbon looks like your browser is in compatibility mode, which is like IE7 mode. Change that to IE8 standards mode and it should render correctly.

    The arabesques background does not show up in IE8 or FF for me because of the following code items. If these are in you original code, delete them. (Since the background image appears in your screen shot, maybe they were inserted in the HTML code by vBulletin.)
    Code:
    <div style="background-image:url([url]http://blog.thornyeternity.com/wp-content/uploads/2012/05/tile-arabesques-light.jpg); [/url] background-repeat:repeat;">

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,804
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    IE8 doesn't look like that for me but IE7 looks the same as your screenshot so check you haven't enabled compatability mode by mistake.

    You can probably fix it for IE7 anyway by using more robust code like this.

    Code:
    <div style="margin: 33px 25px 0; background:black;position:relative;zoom:1.0"><img style="position: absolute; top: -33px; right: -33px; width:
            512px; height: 512px;" src="http://dc431.4shared.com/img/cNv6GAez/s7/vector_-_corner_ribbons_2-06_b.png"
            alt="">

    The zoom:1.0 gives the element in ie7 haslayout which it needs when it contains absolute elements and the position:relative creates a solid stacking context for the absolute element rather than the viewpoint which you were using (as you don't know what padding/margins the viewport may have in various browsers if you haven't reset them).

  8. #8
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ronpat, Paul . . .

    It was definitely Explorer 8's Compatibility Mode. You guys are brilliant (I didn't even know there was such a feature in Explorer ). Ronpat, that [URL] tag was indeed inserted by vBulletin.

    I have a new problem however, and I suspect it relates to the code-hostile IFRAME that EBay's auctions are shoved into. So first, a useful link that I have used to test how auction scripts will display in EBay. Don't ask me how I found it, but here (for the benefit of the Human Race) it is:

    When you use this guy's testing box, be sure to only include the interior code of your listing (ie. strip out all BODY, HEAD etc. tags since they interfere with the IFRAME your auction code is being placed into) -and- make sure you've turned off Explorer 8's Compatibility Mode. Now, when I add Paul's excellent IEx Durability code, and open the file in Explorer 8 it looks flawless.

    But drop Paul's revised code --

    Code:
    <div style="margin: 33px 25px 0; background: BLACK; position: relative; zoom: 1.0">
    <img style="position: absolute; top: -33px; right: -33px; width: 512px; height: 512px;" 
    src="http://dc431.4shared.com/img/cNv6GAez/s7/vector_-_corner_ribbons_2-06_b.png" alt="">
    
    <div align="center" style="padding: 30px 30px 30px 30px;">
    <img style="background-color: WHITE; padding: 15px 15px 15px 15px; width: 600px; height: 391px; display: block;" 
    src="http://images.fineartamerica.com/images-medium/forest-floor-liz-mcqueen.jpg" alt=""></div>
    </div>
    
    <div style="background-repeat: repeat; background-image: url(http://blog.thornyeternity.com/wp-content/uploads/2012/05/tile-arabesques-light.jpg);">
    
    <div align="center" style="padding-top: 35px; padding-bottom: 35px; text-align: center; display: block;">
    <img style="background-color: WHITE; padding: 25px 25px 25px 25px; border: 10px dotted BLACK; width: 800px; height: 385px;" 
    src="http://img.aasd.com.au/37538374.jpg" alt="">
    </div>
    
    </div>
    -- into the EBay Code Tester box, and you'll get a warning about "position: absolute" . . . and the white padding around the two centered images disappears.

    This is a somewhat long-winded way of asking if there is any IFRAME hack for achieving an IMG equivalency to position: absolute . . . without using position: absolute? Thanks again guys.

    s

  9. #9
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh and, it goes without saying: I could of course just photoshop the white borders around these images . . . but it seems so inelegant! And it's also a tacit surrender to EBay that I'd have to perform this graphics hack every time I ever wanted to list any auction pics with a border. Not!

    s

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,804
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm not quite clear what the problem is

    The message you get says:
    These styles may result in site interference if not properly used:
    position:absolute
    The position:absolute I gave you is properly used and is contained by the position:relative parent and therefore will not interfere with the site (unless ebay is stripping all positioning rules from your code).

    I don't see a difference between the output on that testing page and when the code is run standalone so I'm not sure what white space is supposed to be missing?

    Avoiding using position:absolute is not impossible but very very awkward as you would have to rely on negative margins and floats and would be prone to misplacement if all things were not equal.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •