I’ve inherited a site that uses Google’s GSNewsBar. The wizard creates code that includes a linked stylesheet.
On every browser BUT IE8 things display correctly (even IE7!) –
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.
Here’s the entire piece of code, including the override styles:
<!-- Begin News Bar Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search Wizard
//http://www.google.com/uds/solutions/wizards/newsbar.html
-->
<!--
// The Following div element will end up holding the actual newsbar.
// You can place this anywhere on your page.
-->
<div id="newsBar-bar" style="padding-left:10px">
<span style="color:#a5a599">Loading Google News Results</span>
</div>
<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-nbw"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>
<!-- News Bar Code and Stylesheet -->
<script type="text/javascript">
window._uds_nbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/newsbar/gsnewsbar.css");
</style>
<style type="text/css">
.gs-result .gs-title * { color: #243c60; }
.titleBox_gsnb { line-height: 1.1; padding-bottom: .25em; }
.statusBoxRoot_gsnb {
width: 300px;
/*word-wrap: normal;*/
}
</style>
<script type="text/javascript">
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 : [<?php print $google_news_string; ?>]
}
}
newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
</script>
<!-- ++End News Bar Wizard Generated Code++ -->
UPDATE – 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):
-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;
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!
:
Problem seems to be that IE-8 (and only that ..) treats spans with just a space inside as empty (self-closing tags).
Google adds that space between the keywords just for this reason, so that they break when needed.
Fortunately they have a added a class to that span so we can trick it with CSS by doing
this puts a space right after them and makes IE behave.
Working example at http://jsfiddle.net/gaby/V8uHF/