Menu
I am trying to insert a color div before a checkbox, using .before() method of jQuery 1.5.1, which runs alright on FF, Chrome, IE8+; but for IE7, the inserted color div is not at the same line as checkbox. I wish somebody could give me any advice. thanks. codes attached:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="checkbox" id="check1" />PINK
<script type="text/javascript">
var colorHtml = '<div style="border: 1px solid rgb(204, 204, 204); display: inline-block; margin-left: 20px; width: 12px;"><div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"></div></div>';
$("#check1").before(colorHtml);
</script>
</body>
</html>
screen shot:
IE7:
IE8: 
UPDATED:
adding float:left:
not using float, adding "zoom:1; *display:inline;": 
568
You can get them on the same line by adding float:left; to the style of your colorHtml outer div:
<div style="float: left; border: 1px solid rgb(204, 204, 204); display: inline-block; margin-left: 20px; width: 12px;"><div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"></div></div>
Here's a jsfiddle: http://jsfiddle.net/G4sY4/2/
111
The problem is with the inline-block style setting. IE7 doesn't really do it right. Try floating it left within the container and not setting inline-block.
Update: You can find a description of the problem and an alternative work around at: http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
Summary: Add "zoom:1; *display: inline;"
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
