CODEWITHSUNDEEP
jquerycsscss-float
Preston
Preston

Reputation: 1346

Why does this work in jsfiddle but nowhere else?

http://jsfiddle.net/Jg3FP/1/

This doesn't line up correctly in various browsers but works fine in js fiddle, I'm not doing anything exotic. Why does it behave like this and how do I fix it?

enter image description here

enter image description here

<div id="diceDiv">
    <div id="dice1Div">#</div>
    <input type="checkbox"/>
    <div id="dice2Div">#</div>
    <input type="checkbox"/>
    <div id="dice3Div">#</div>
    <input type="checkbox" />
    <div id="dice4Div">#</div>
    <input type="checkbox"/>
    <div id="dice5Div">#</div>
    <input type="checkbox"/>
    <div id="dice6Div">#</div>
    <input type="checkbox"/>
    <br/>
    <input type="button" value="Roll" />
</div>
<div id="log"></div>
<div id="score"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $("div div").css("float", "left");
    $("div input").css("clear", "right");
</script>

Upvotes: 1

Views: 243

Answers (2)

Niloct
Niloct

Reputation: 10015

There are some issues in your HTML.

Regarding the float concept: you are clearing right floats when instead you're setting left floats for the divs.

Also you should move every jQuery call you expect to run at display time into $(document).ready().

DIV is normally a block element, and I took the liberty to modify your HTML so that every option has one div around it. In this way you let the block formatting do the "clearing" for you.

Also, I applied zero padding and margin to the checkboxes. You can change that if needed.

See the HTML (you can save and run it locally):

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
    $('#diceDiv INPUT').css({padding: '0px', margin: '0px'})
    });
</script>
</head>
<body>
<div id="diceDiv">
    <div>
    <span id="dice1Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice2Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice3Div">#</span><input type="checkbox" />
    </div>
    <div>
    <span id="dice4Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice5Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice6Div">#</span><input type="checkbox"/>
    </div>
    <br/>
    <input type="button" value="Roll" />
</div>
<div id="log"></div>
<div id="score"></div>
</body>
</html>

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

That's because jsFiddle sets for you the correct headers, especially the doctype without which IE switches to a mode emulating the behavior of older versions.

Try to start your HTML file like this :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 2

Related Questions