StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS Rendered Differently for FF and IE8
text
Body
copied!<p>Below I have included some HTML/CSS. The CSS looks fine in FF, but it is wrong in IE8. In IE8, the Home button appears on the line below the Balance and Turn values. It should appear on the same line. For comparison, you can view the page in both browsers <a href="http://apps.facebook.com/rails_across_europe" rel="nofollow noreferrer">(warning; potentially accesses FB profile)</a> (This link leads to a Facebook app which will request your profile. You have to start a new game, choose a difficulty level, and then you will be taken to the game board. The code in question is at the bottom of the page). I hope someone can tell me how to fix the CSS for IE8. Thanks.</p> <p>HTML CODE:</p> <pre><code>$html .= '<div id="info-panel">'."\n"; $html .= ' <div id="total-funds">Balance: &euro;<span id="total-amount">'.$gamePlayerData['funds'].'</span>M</div>'."\n"; $html .= ' <div id="turn">Turn: '.$newTurn.'</div>'."\n"; $html .= ' <div id="home"><a href="' . $config->url->absolute->fb->canvas . '/"><img src="' . $config->url->absolute->public . '/images/home_24x24.png" id="img-home" alt="Home" /></a></div>'."\n"; $html .= '</div>'."\n"; </code></pre> <p>CSS CODE:</p> <pre><code> #info-panel { width: 742px; border: 3px solid gray; background-color: #ddd; color: red; padding: 6px; } #total-funds { display: inline; font-size: 16px; padding-right: 10px; } #turn { display: inline; font-size: 16px; padding-right: 10px; } div#home { display: inline; float: right; } #img-home { margin-top: -3px; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload