In chrome, inline element doesn't go inline

This is my code:

HTML:

  <div id="ip">
                <address>
                    <strong> Mblahblah: </strong>
                    <pre> xx.xxxx.xxx.xxxx. </pre>
                </address>
                 <address>
                    <strong> blah: </strong>
                    <pre> xxx.xxxx.xxxxx </pre>
                </address>  
            </div><!-- #ip -->

In firefox, after I set pre display to inline, it does what I want. Both sets to beside each other. But in Chrome, it doesn't. The title(What's in strong)... is on a new line above the address. What am I doing wrong?

CSS:

#ip { 
    border-left: 1px solid #b9b9b9;
    float: right; 
    margin: -6px 0 15px 0;
    padding: 0 0 0 93px;

 }

pre, code { 
    background: #444;
    color: #fff;
    font-family: Consolas, Courier New, Monospace;
}

#ip address {
    margin: 22px 0;
}

#ip address strong, #ip address pre {
    display: inline;
    padding: 2px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#ip address pre { float: right;}
#ip address strong { font-weight: bold; font-size: 20px; }

The first answers didn't work. In firefox, but not in Chrome.... Is there another solution I can use instead? Heres all of the css thhats part of the header.

header, .content-wrap, #main-content, nav {
    width: 960px;
    margin: 0px auto;
}

#logo { float: left; }

#ip {
    border-left: 1px solid #b9b9b9;
    float: right;
    margin: -6px 0 15px 0;
    padding: 0 0 0 93px;

 }

pre, code {
    background: #444;
    color: #fff;
    font-family: Consolas, Courier New, Monospace;
}

#ip address {
    margin: 开发者_Go百科22px 0;
    clear: both;
}

#ip address strong, #ip address pre {    
    padding: 2px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#ip address pre { float: right;}
#ip address strong { float: left; font-weight: bold; font-size: 20px; }
nav {
    background: #49434a url(../images/nav-bg.jpg) repeat;
    height: 40px;
    margin: 30px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
    -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
    border: 1px solid #000;
}

nav ul {
    padding: 8px 20px;
}

nav ul li {
    display: inline;
    padding: 12px 25px;
}

nav ul li a {
    color: #fff;
    font-size: 19px;
    text-shadow: -1px 1px 0 #000;
}

Chrome never gave me problems before.

---

I hope this is what you're looking for. Check out what I did with your code on JsFiddle: http://jsfiddle.net/Lpb8E/.

Basically, all you need to do is set address and the pre elements tofloat: left;.

---

This solution is similar to GGCO's but it keeps the same layout that properly displayed in Firefox rather than butting the pre tag up against the strong tag. It also honors the margin settings on the address tag.

http://jsfiddle.net/aQNFQ/