Forum Moderators: not2easy
To accomplish that, i said the form should have a relative positioning (since it's the direct parent of the input elements) and i gave an absolute positioning to the input element
with the following code
div form{position:relative; margin-left:200px;}
div form input{position:absolute;}
div form input#supp{left:0px}
In firefox the input start exactly at 0px from the div while they are at 200px in Internet Explorer.
It's like Firefox calculates from the body element while internet explorer calculates from the parent element that is here the form element.
How can I do such that the form input elements start at the beginning of the div as in firefox? How to reconcile this behavior in the two browsers?
Kind regards
I would look at all of the built in margin-left: first.
I have a div element that has left margin = 200px
(actually the body has 200px margin on the right and on the left)
In this div i have a form inside... - with another margin-left: 200px on the <form>
That is 600px of margin-left: just to start. Why?
A quick mock-up doesn't even have it working in FF for me, so I may be misinterpreting part of the description.
I classed the first <input> because, it was at first hack stacking over the the second <input>, and then was interfering with an added global declaration for <input> as well.
IF you want the boxes to run one after the other, THEN you cannot have a space or line break between inputs. About -2px of margin-left: on the second will 'zero out' the space in the three browser I took a quick look at.
IF you do want space between boxes, THEN strip out my forced positioning.
Still guessing at what you are after, so could be going down the wrong track. However, this sample does achieve: I would like the 2 input elements of this form to start exactly on the very left edge of this div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
margin-right: 200px; margin-left: 200px;
}div {
margin-left: 200px; background-color: #faebd7;
}div form {
}
div form input {
display: inline-block; margin: 0;
}div form input.first {
background-color: red;
}div form input#supp {
background-color: teal; margin-left: -2px;
}
</style>
</head>
<body>
<div>
<form>
<input class="first" type="text" name="one" /><input id="supp" type="text" name="two" />
</form>
<!--Hack for visual cue.-->
<br />
</div>
<!--##########
I have a div element that has left margin = 200px.(actually the body has 200px margin on the right and on the left) In this div i have a form inside. I would like the 2 input elements of this form to start exactly on the very left edge of this div.To accomplish that, i said the form should have a relative positioning (since it's the direct parent of the input elements) and i gave an absolute positioning to the input element with the following code
div form{position:relative; margin-left:200px;}
div form input{position:absolute;}
div form input#supp{left:0px}In firefox the input start exactly at 0px from the div while they are at 200px in Internet Explorer.
It's like Firefox calculates from the body element while internet explorer calculates from the parent element that is here the form element.
How can I do such that the form input elements start at the beginning of the div as in firefox? How to reconcile this behavior in the two browsers?
-->
</body>
</html>
