SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE formatting off

    When viewing this page in IE:
    http://snipurl.com/20znqyr

    ...the content is pushing out of the DIV - I have dug through code and can't seem to find it. If someone could be my second pair of eyes it would be great, I would appreciate it.

    * had to use a SNIPURL because clients check back links and don't like when I post their sites in a help forum, I've found

  2. #2
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nm - found it, I had an IE7 emulator in the header area causing the problem

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The root of the problem is that the width is being forced by the Google + code. Specifically, the 450px width declared in the inline style of the nested div and the iframe. They should be no more than 220px for the space available.

    Code HTML:
    <!-- Place this tag where you want the +1 button to render -->
    <DIV style="MARGIN: auto; WIDTH: 150px" align=center>
    <DIV style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: normal; TEXT-INDENT: 0px; MARGIN: 0px; BORDER-LEFT-STYLE: none; PADDING-LEFT: 0px; WIDTH: 450px; PADDING-RIGHT: 0px; DISPLAY: inline-block; BORDER-TOP-STYLE: none; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; HEIGHT: 24px; BORDER-RIGHT-STYLE: none; FONT-SIZE: 1px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; cssFloat: none" id=___plusone_0><IFRAME style="POSITION: static; BORDER-BOTTOM-STYLE: none; MARGIN: 0px; BORDER-LEFT-STYLE: none; WIDTH: 450px; BORDER-TOP-STYLE: none; HEIGHT: 24px; VISIBILITY: visible; BORDER-RIGHT-STYLE: none; TOP: 0px; LEFT: 0px" id=I1_1322722044519 title=+1 tabIndex=-1 marginHeight=0 src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fwww.trueblissgiftbaskets.com%2Fitem_619%2FHoliday-Finer-Things-Holiday-Gourmet-Gift-Basket.htm&amp;size=standard&amp;count=true&amp;annotation=inline&amp;hl=en-US&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3DvcMyHjgxfFU.en_GB.%2Fsv%3D1%2Fam%3D!TxaHJQ_ELSaIORy5WA%2Fd%3D1%2F#id=I1_1322722044519&amp;parent=http%3A%2F%2Fwww.trueblissgiftbaskets.com&amp;rpctoken=651443562&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" frameBorder=0 width="100%" allowTransparency name=I1_1322722044519 marginWidth=0 scrolling=no></IFRAME></DIV></DIV>
    As you've found, IE8/9 will render the element at this width when the IE7 X-UA-Compatible meta is present. Presumably the meta was added for a reason so hopefully removing it won't break your site elsewhere.

    The page also has validation errors that would be worth addressing.


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
  •