Wraparound Corner PNG improperly offsets in Explorer 8

HTML & CSS
1

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. :rolleyes:

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

s

<!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(http://blog.thornyeternity.com/wp-content/uploads/2012/05/tile-arabesques-light.jpg);
      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

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

It looks ok to me also.

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

4

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. :smiley:

s

5

Two more things . . .

[LIST=1]
[]The guttering also shows up in Dreamweaver 8! :eek:
[]I cleared my cache and loaded/viewed the identical coding under a new file name (made no difference).[/LIST]
s

6

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.)


<div style="background-image:url([color=red][noparse][/noparse][/color]http://blog.thornyeternity.com/wp-content/uploads/2012/05/tile-arabesques-light.jpg); [color=red][noparse][/noparse][/color] background-repeat:repeat;">
7

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.


<div [B]style="margin: 33px 25px 0; background:black;position:relative;zoom:1.0"[/B]><img [B]style="position: absolute; top: -33px; right: -33px; width:[/B]
        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

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 :blush:). Ronpat, that 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:

EBay Code Tester

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 –

<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

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! :lol:

s

10

Hi,

I’m not quite clear what the problem is :slight_smile:

The message you get says:

These styles [B]may[/B] 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.