Wraparound Corner PNG improperly offsets in Explorer 8

**semicolon** · May 10, 2013 19:38

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>

**ronpat** · May 10, 2013 21:11

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

**Paul O'B** · May 11, 2013 01:31

It looks ok to me also.

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

**semicolon** · May 11, 2013 12:11

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

**semicolon** · May 11, 2013 12:36

Two more things . . .

The guttering also shows up in Dreamweaver 8!
I cleared my cache and loaded/viewed the identical coding under a new file name (made no difference).

s

**ronpat** · May 11, 2013 14:39

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;">

**Paul O'B** · May 11, 2013 14:40

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

User Tag List

Thread: Wraparound Corner PNG improperly offsets in Explorer 8

Thread Tools

Display

Wraparound Corner PNG improperly offsets in Explorer 8

Bookmarks

Bookmarks

Posting Permissions