IE8 CSS floated div issue(s) - html

Question

I have inherited a site that has significant issues when displayed in IE8. Looks like a lot of them are div related, but I could use some help in fixing the problem.
The issue I am working on right now is that the divs for the phone numbers and flags are being displayed on two lines, instead of one. This ends up pushing down the content of the nav bar.
URL: fertileweb.com/demosite (slightly dated copy, latest is hosted locally)
IE8 view: !http://i.imgur.com/HaENEvu.jpg
IE10/firefox/chrome view: !http://i.imgur.com/q3mK5Bh.jpg
HTML
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/USA.png">
[phone]
</li>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/canada.png">
[phone]
</li>
</ul>
</div>
CSS
.addressBox {
float: right;
padding-top: 35px;}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;}
.addressBox ul {
float: left;
list-style: none outside none;
margin-bottom: 10px;
width: 100%;}
.addressBox li {
color: #231F20;
display: inline;
float: left;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding-left: 17px;}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;}
Thanks!

Answer 1

Try to add this in your CSS styles
.addresBox ul, .addresBox ul li {
white-space:nowrap;
}
The problem seems to be about browsers size instead of browsers version.

Answer 2

If a wordwrap doesn't make it, I would suggest using the display: table; option, as such:
.addressBox { display: table; width: 500px; }
.addressBox li { display: table-cell; }
That usually solves floating errors.

Answer 3

working full code with demo here
jsFiddle
html code:
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li><img src="http://images.apple.com/global/elements/flags/22x22/usa.png"> [phone]</li>
<li><img src="http://images.apple.com/ca/global/elements/flags/22x22/canada.png"> [phone]</li>
</ul>
</div>
css code:
.addressBox {
float: right;
padding-top: 35px;
}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;
}
.addressBox ul {
float: left;
list-style: none outside none;
margin: 0 0 10px 0;
padding:0;
width: 100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
.addressBox li {
color: #231F20;
display: block;
float: left;
list-style: none outside none;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding: 0 0 0 17px;
margin:0;
}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;
display:block;
}

Answer 4

Not 100% sure why, but adding the code below fixed the problem by making sure the element didn't get too small for the content - which would cause the text to wrap.I made sure to add it to a conditional style so it wouldn't have any other adverse effects.
.addressbox li {
width:133px;
}