Menu
I can’t get my divs to work correctly in Internet Explorer 7. I defined two divs to be right next to each other within a larger div, and set the left margin of the first div to 0, BUT the first div is still indented 3 pixels to the left. I experimented with padding, margins, float properties, and positioning, but nothing seems to work. My goal is to align the first embedded div with the left edge, so that the 3px spacing does not occur, and place the second div right next to the first div. If you have any ideas how to solve this, I would appreciate your help. Thanks very much!
Here are the HTML and CSS:
<html>
<head>
<link href=”
</head>
<body>
<!–<div>–>
<div class=”drag-handle”; style=”opacity: 1; width: 391px; margin-left: 10px; margin-top: 10px; padding: 0 0 0 0;”>
<!–
<div class=”drag-controls”><img src=”X-mark.gif” title=”Close” />
</div>
–>
<!–<div style=”border: 0px margin-left: 27px; width: 388px; height: 39px”>–>
<div style=”width: 391px; height: 9px; font-size: 1pt; font-weight: 100; margin-left: 0px; margin-top: 0px; padding: 0 0 0 0;”>
<div style=”width: 379px; height: 9px; font-size: 1pt; font-weight: 100; text-indent: 0px; margin-left: 0px; padding: 0 0 0 0; display: block; position: absolute; background-image: url(‘tls.png’); background-repeat: no-repeat;”>
</div>
<div style=”width: 9px; height: 9px; margin-left: 379px; margin-top: 0px; font-size: 1pt; text-indent: 0px; font-weight: 100; padding: 0 0 0 0; display: block; position: absolute; background-image: url(‘trs.png’); background-repeat: no-repeat;”>
</div>
</div>
<!–<div style=”clear:both”></div>–>
<div style=”width: 388px; height: 30px; margin: 0px; background-image: url(‘csh.png’)”>
<div style=”background: #F7FAFB; margin-left: 9px; margin-right: 0px; margin-top: 0px; width: 369px; height: 30px”>
<div style=”float: left; margin-left: 1px; margin-top: 0px;”>
<a href=”http://www.funnlove.com”><img src=”FunCard1PNG.png” alt=”FunCard” class=”logo” border=”none”></a>
</div>
<div style=”float:left; font-weight:bold; margin-left:72px; padding-top:0.15cm; text-align:left; width:130px;”>
<a href=”http://www.funnlove.com”>blabla</a>
</div>
</div>
</div>
<!–</div>–>
</div>
<!–</div>–>
</body>
</html>
and CSS NOW:
.dhtmlwindow{
position: absolute;
/*border: 2px solid black;
visibility: hidden;
background-color: white;
opacity: 1.0;
}
.drag-handle{ /*CSS for Drag Handle
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;
background-color: white;
color: white;
cursor: move;
overflow: hidden;
width: auto;
filter:progid?XImageTransform.Microsoft.alpha(opacity=);
-moz-opacity: 1;
opacity: 0;
}
.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle
position: absolute;
right: 12px;
top: 11px;
cursor: hand;
cursor: pointer;
}
* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render
width: 100%;
}
.drag-contentarea{ /*CSS for Content Display Area div
/*border-top: 1px solid brown;
background-color: white;
opacity: 1.0;
color: black;
height: 150px;
/*padding: 2px;
overflow: auto;
}
.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)
border-top: 1px solid gray;
background-color: #F8F8F8;
height: 13px; /*height of resize image
}
.drag-resizearea{ /*CSS for Resize Area itself
float: right;
width: 13px; /*width of resize image
height: 13px; /*height of resize image
cursor: nw-resize;
font-size: 0;
}
Thanks for your help!!