Browsers with different design for same 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: Properties box in different browsers

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.

the IE close button issue can be fixed by adding `border:0;` to your `#img1` css style — musefan, Sep 20 '13 at 10:20
@LarsJensen ohh that was floats, you can read [this](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) :) — Mr. Alien, Sep 20 '13 at 11:24

score 2 · Accepted Answer · answered Sep 20 '13 at 10:22

2

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

.propertiesControl {
    clear:both;
}

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

answered Sep 20 '13 at 10:22

Moob

14,420
1
34
47

Works perfectly. Can you explain why this fixes it? I'd love to know for future reference. – Loyalar Sep 20 '13 at 10:24
1

`floats` do not affect their container like a non-floated element would, so the parent is not held open by its floated children. – Moob Sep 20 '13 at 10:28

Browsers with different design for same div

1 Answers1