title: CSS issue in IE8 only
body: <p>I've inherited a site that uses Google's <a href="http://www.google.com/uds/solutions/wizards/newsbar.html" rel="nofollow noreferrer">GSNewsBar</a>. The wizard creates code that includes a linked stylesheet. </p>
  
  <p>On every browser BUT IE8 things display correctly (even IE7!) - 
  <img src="https://i.stack.imgur.com/qMOs3.png" alt="enter image description here"></p>
  
  <p>But in IE8, the list of search terms doesn't wrap. I've added a local style to the code that overrides the div width, and in IE8 using developer tools, I can see that it's getting the width set correctly (the blue outline in the screenshot below). But the text is not wrapping. Can anyone help me out here? I've tried adding word-wrap:break-word to the override style, which does force it to wrap, but it breaks in the middle of words instead of between words. 
  <img src="https://i.stack.imgur.com/iWXly.png" alt="enter image description here"></p>
  
  <p>Here's the entire piece of code, including the override styles:</p>
  
  <pre><code>&lt;!-- Begin News Bar Wizard Generated Code++ --&gt;
              &lt;!--
              // Created with a Google AJAX Search Wizard
              //http://www.google.com/uds/solutions/wizards/newsbar.html
              --&gt;
  
              &lt;!--
              // The Following div element will end up holding the actual newsbar.
              // You can place this anywhere on your page.
              --&gt;
              &lt;div id="newsBar-bar" style="padding-left:10px"&gt;
                &lt;span style="color:#a5a599"&gt;Loading Google News Results&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;!-- Ajax Search Api and Stylesheet
              // Note: If you are already using the AJAX Search API, then do not include it
              //       or its stylesheet again
              --&gt;
              &lt;script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;source=uds-nbw"
                type="text/javascript"&gt;&lt;/script&gt;
              &lt;style type="text/css"&gt;
                @import url("http://www.google.com/uds/css/gsearch.css");
              &lt;/style&gt;
  
              &lt;!-- News Bar Code and Stylesheet --&gt;
              &lt;script type="text/javascript"&gt;
                window._uds_nbw_donotrepair = true;
              &lt;/script&gt;
              &lt;script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js?mode=new"
                type="text/javascript"&gt;&lt;/script&gt;
              &lt;style type="text/css"&gt;
                @import url("http://www.google.com/uds/solutions/newsbar/gsnewsbar.css");
              &lt;/style&gt;
  
              &lt;style type="text/css"&gt;
                    .gs-result .gs-title * { color: #243c60; }
                    .titleBox_gsnb { line-height: 1.1; padding-bottom: .25em; }
                    .statusBoxRoot_gsnb {
                      width: 300px;
                      /*word-wrap: normal;*/
                  }
              &lt;/style&gt;
  
              &lt;script type="text/javascript"&gt;
                function LoadNewsBar() {
                  var newsBar;
                  var options = {
                    largeResultSet : true,
                    title : "Google News Results",
                    horizontal : false,
                    linkTarget : GSearch.LINK_TARGET_BLANK, 
                    resultStyle : GSnewsBar.RESULT_STYLE_COMPRESSED, 
                    autoExecuteList : {
                  executeList : [&lt;?php print $google_news_string; ?&gt;]
  
                    }
                  }
  
                  newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
                }
                // arrange for this function to be called during body.onload
                // event processing
                GSearch.setOnLoadCallback(LoadNewsBar);
              &lt;/script&gt;
                &lt;!-- ++End News Bar Wizard Generated Code++ --&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong> - as per the comment below, the search terms wrap correctly when used in a completely blank, otherwise-unstyled page, so there has to be something in the existing styling on the page that's causing this. Here is the Computed Styles content for the selected element (statusBoxRoot_gsnb) from Chrome's element inspector (hugely long, sorry):</p>
  
  <pre><code>-webkit-animation-delay: 0s;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0s;
  -webkit-animation-fill-mode: none;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: none;
  -webkit-animation-play-state: running;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-appearance: none;
  -webkit-backface-visibility: visible;
  -webkit-background-clip: border-box;
  -webkit-background-composite: source-over;
  -webkit-background-origin: padding-box;
  -webkit-background-size: auto auto;
  -webkit-border-fit: border;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-image: none;
  -webkit-border-vertical-spacing: 0px;
  -webkit-box-align: stretch;
  -webkit-box-direction: normal;
  -webkit-box-flex: 0;
  -webkit-box-flex-group: 1;
  -webkit-box-lines: single;
  -webkit-box-ordinal-group: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: start;
  -webkit-box-reflect: none;
  -webkit-box-shadow: none;
  -webkit-color-correction: default;
  -webkit-column-break-after: auto;
  -webkit-column-break-before: auto;
  -webkit-column-break-inside: auto;
  -webkit-column-count: auto;
  -webkit-column-gap: normal;
  -webkit-column-rule-color: #383833;
  -webkit-column-rule-style: none;
  -webkit-column-rule-width: 0px;
  -webkit-column-span: 1;
  -webkit-column-width: auto;
  -webkit-font-smoothing: auto;
  -webkit-highlight: none;
  -webkit-hyphenate-character: auto;
  -webkit-hyphenate-limit-after: auto;
  -webkit-hyphenate-limit-before: auto;
  -webkit-hyphens: manual;
  -webkit-line-break: normal;
  -webkit-line-clamp: none;
  -webkit-locale: auto;
  -webkit-margin-after-collapse: collapse;
  -webkit-margin-before-collapse: collapse;
  -webkit-marquee-direction: auto;
  -webkit-marquee-increment: 6px;
  -webkit-marquee-repetition: infinite;
  -webkit-marquee-style: scroll;
  -webkit-mask-attachment: scroll;
  -webkit-mask-box-image: none;
  -webkit-mask-clip: border-box;
  -webkit-mask-composite: source-over;
  -webkit-mask-image: none;
  -webkit-mask-origin: border-box;
  -webkit-mask-position: 0% 0%;
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: auto auto;
  -webkit-nbsp-mode: normal;
  -webkit-perspective: none;
  -webkit-perspective-origin: 150px 31px;
  -webkit-rtl-ordering: logical;
  -webkit-svg-shadow: none;
  -webkit-text-combine: none;
  -webkit-text-decorations-in-effect: none;
  -webkit-text-emphasis-color: #383833;
  -webkit-text-emphasis-position: over;
  -webkit-text-emphasis-style: none;
  -webkit-text-fill-color: #383833;
  -webkit-text-security: none;
  -webkit-text-stroke-color: #383833;
  -webkit-text-stroke-width: 0px;
  -webkit-transform: none;
  -webkit-transform-origin: 150px 31px;
  -webkit-transform-style: flat;
  -webkit-transition-delay: 0s;
  -webkit-transition-duration: 0s;
  -webkit-transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-user-drag: auto;
  -webkit-user-modify: read-only;
  -webkit-user-select: text;
  -webkit-writing-mode: horizontal-tb;
  alignment-baseline: auto;
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background-image: none;
  background-origin: padding-box;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: auto auto;
  baseline-shift: baseline;
  border-bottom-color: #383833;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-collapse: separate;
  border-left-color: #383833;
  border-left-style: none;
  border-left-width: 0px;
  border-right-color: #383833;
  border-right-style: none;
  border-right-width: 0px;
  border-top-color: #383833;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-style: none;
  border-top-width: 0px;
  bottom: auto;
  box-shadow: none;
  box-sizing: content-box;
  caption-side: top;
  clear: none;
  clip: auto;
  clip-path: none;
  clip-rule: nonzero;
  color: #383833;
  color-interpolation: srgb;
  color-interpolation-filters: linearrgb;
  color-rendering: auto;
  cursor: auto;
  direction: ltr;
  display: block;
  dominant-baseline: auto;
  empty-cells: show;
  fill: black;
  fill-opacity: 1;
  fill-rule: nonzero;
  filter: none;
  float: none;
  flood-color: black;
  flood-opacity: 1;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  glyph-orientation-horizontal: 0deg;
  glyph-orientation-vertical: auto;
  height: 62px;
  image-rendering: auto;
  kerning: 0;
  left: auto;
  letter-spacing: normal;
  lighting-color: white;
  line-height: 18px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: disc;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  marker-end: none;
  marker-mid: none;
  marker-start: none;
  mask: none;
  max-height: none;
  max-width: none;
  min-height: 0px;
  min-width: 0px;
  opacity: 1;
  orphans: 2;
  outline-color: #383833;
  outline-style: none;
  outline-width: 0px;
  overflow-x: visible;
  overflow-y: visible;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  pointer-events: auto;
  position: static;
  resize: none;
  right: auto;
  shape-rendering: auto;
  speak: normal;
  stop-color: black;
  stop-opacity: 1;
  stroke: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-opacity: 1;
  stroke-width: 1;
  table-layout: auto;
  text-align: left;
  text-anchor: start;
  text-decoration: none;
  text-indent: 0px;
  text-overflow: clip;
  text-rendering: auto;
  text-shadow: none;
  text-transform: none;
  top: auto;
  unicode-bidi: normal;
  vector-effect: none;
  vertical-align: baseline;
  visibility: visible;
  white-space: normal;
  widows: 2;
  width: 300px;
  word-break: normal;
  word-spacing: 0px;
  word-wrap: normal;
  writing-mode: lr-tb;
  z-index: auto;
  zoom: 1;
  </code></pre>
  
  <p>There's no easy way I can find to copy/paste like that from IE8's developer tools, so here's a screenshot of the styles as applied to the selected element (statusBoxRoot_gsnb). I'm hoping someone will see something glaringly obvious in the first few lines so you don't have to read through all of it!</p>
  
  <p>:<img src="https://i.stack.imgur.com/szBw9.png" alt="enter image description here"></p>