HTML & CSS
When viewing this page in IE:
...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
Nm - found it, I had an IE7 emulator in the header area causing the problem
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.
<!-- 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&size=standard&count=true&annotation=inline&hl=en-US&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&parent=http%3A%2F%2Fwww.trueblissgiftbaskets.com&rpctoken=651443562&_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.
This topic is now closed. New replies are no longer allowed.