同一个div的不同设计的浏览器

Question

I have a couple of different issues.

I have a div with a couple of other divs and some controls in it. My biggest issue is that it does not look the same in Chrome as it does in other browsers. As it is right now, it looks as following:

And the biggest issue is with Chrome, where the textbox to the right of the "width:" text goes down onto the next line. The code for the box can be seen in this JSFiddle or as as following:

<div id="div_properties" class="redBorder left" style="clear: left; display: 
    <div class="right">
        <a href="#" id="closePropertiesWindow">
        <img src="close.png" title="Close window"></a>
    </div>
    <div class="centered noMargin whiteBackground">
        <h3 class="noMargin">Properties</h3>
    </div>
    <hr class="noMargin noPadding">

    <div id="div_properties_content" style="display: block;">
        <div class="noMargin propertiesControl" prop="text" style="width:100%;">
            text: 
            <input type="text" id="propertytextTextBox" class="right"></input> 
        </div>
        <div class="noMargin propertiesControl" prop="width" style="width:100%;">
            width: 
            <input type="number" id="propertywidthNumber" class="right"></input> 
        </div>
        <div class="noMargin propertiesControl" prop="italic" style="width:100%;">
            italic: 
            <input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked"> 
        </div>
        <div class="noMargin propertiesControl" prop="bold" style="width:100%;">
            bold: 
            <input type="checkbox" id="propertyboldCheckBox" class="right"> 
        </div>
        <br>
        <input type="button" id="savePropertiesButton" value="Save" class="right">
    </div>
</div>

And the CSS is as following:

#div_properties {
    margin-top: 5px;
    background-color: #F0F0F0;
    width: 300px;
    float: left;
    min-height: 75px;
}

.redBorder {
    border: 1px solid red;
}

.noMargin {
     margin: 0 0 0 0;
}

.left {
    float: left;
 }

 .right {
      float: right;
 }

(Those are all the related classes in this scope, the other classes defined on the items have no styles, but are being used in the JavaScript.)

Also, another issue I'm having is the "box border" around the close-image in IE. This is not a big issue, but if anyone knows what is causing it, it would be fantastic.

Answer 1

Its the floating that's causing the issue. You need to clear them.

.propertiesControl {
    clear:both;
}

http://jsfiddle.net/JWDkM/2/