tags:

views:

236

answers:

8
+1  Q: 

I have a basic problem understanding CSS positioning

Edit: Ok, this is what works. It may not be "right", but 1) it displays correctly & 2) it validates at W3C. It seems that I should make all positioning absoolute and add positioning to all divs except for those with a fieldset, where I have to add the position to the fieldset. Feel free to correct this if you think that I am wrong, but "it works for me" ! Yay! Yipee! At last! Lots of +1 all round and thanks to all who helped.

Edit: the bounty goes to whomever can post the editted HTML which displays like the Delphi screenshot.

I am using Borland Delphi to produce an HTML form generator. The user can drag & drop components to produce a file and when he is happy he can generate HTML (I pop a Submit button on to the end of his form).

Since I have the absolute position of each control when I am generating, I want so specify absolute positions in CSS. I thought this meant that I have to use position: fixed, but that doesn't look right, and nor does absolute.

What am I doing wrong? (the HTML validates at W3C)

Here is a very basic basic example as seen when designing the form in the Delphi program
alt text

And here it is in MSIE 8 (with fix position) alt text

And again with absolute position alt text

And, finally, here is the HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>Input data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
<div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:40px; left:40px; width: 857px; height: 441px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:64px; left:56px; width: 753px; height: 369px;">
<legend></legend>
<div class="TLabel" id="Label1" style="position: absolute; top:88px; left: 80px; width: 32px; height: 13px;">Label1</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:80px; left: 72px; width: 121px; height: 21px;"><input type="text" name="Edit1" value="an edit bx"></div>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:88px; left: 80px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:145px; left: 137px; width: 145px; height: 21px;">
  <select size ="1" name="ComboBox1">
    <option value="one" selected="selected">one    </option>
    <option value="two">two    </option>
    <option value="three">three    </option>
</select>
</div>
<div class="TRadioGroup" id="RadioGroup1">
<fieldset style="position: absolute; top:144px; left: 136px; width: 185px; height: 105px;"><legend>RadioGroup1</legend>
      red: <input type="radio" name="RadioGroup1" value=""><br>
      white: <input type="radio" name="RadioGroup1" value="" checked><br>
      blue: <input type="radio" name="RadioGroup1" value=""><br>
</fieldset>
</div>
</fieldset>
</div>
</fieldset>
</div>
<div><input type="submit" name="submitButton" value="Submit" style="position:relative; top:25px; left: 50%;"></div>
</form>
</body>
</html>

Edit: the bounty goes to whomever can post the editted HTML which displays like the Delphi screenshot.

Edit: Ok, this is what works. It may not be "right", but 1) it displays correctly & 2) it validates at W3C. It seems that I should make all positioning absoolute and add positioning to all divs except for those with a fieldset, where I have to add the position to the fieldset. Feel free to correct this if you think that I am wrong, but "it works for me" ! Yay! Yipee! At last! Lots of +1 all round and thanks to all who helped.

+1  A: 

To help your understanding about CSS positioning: http://www.w3schools.com/css/css_positioning.asp

Jeaffrey Gilbert  2010-07-06 03:49:56
That's what I think I am doing with fixed-position. Any idea why it is not working?
Mawg  2010-07-06 06:23:56
Try to change `left` to `margin-left` and `top` to `margin-top` for `absolute` position, and see the difference.
Jeaffrey Gilbert  2010-07-06 07:47:51
Sorry, jeaffrey, that did not help
Mawg  2010-07-10 02:00:37
`margin` refers to the space around an element. It's part of the "box model," along with `border` and `padding`. It's not related to positioning.
Patrick McElhaney  2010-07-10 03:09:08
+1 thanks (I an stil confused though)
Mawg  2010-07-11 14:11:32
+3  A: 

Your problem is that absolute positioning is relative to the parent with absolute positioning. If the parent isn't absolutly position it will look up the tree utill it find absolutly positioned element or the body. Simply: make sure everything is absolutly positioned including The form and the divs.

Dani  2010-07-10 02:09:17
+1, so I position bothe the divs and the componets which they enclose? But does that include a fraemset?
Mawg  2010-07-11 14:07:12
+1  A: 

I actually just ran into this problem. If a div is absolutely positioned and nested inside another div that is not absolutely positioned, it will be positioned relative to the parent div.

In your code, for example, Label1 is absolutely positioned, but it is inside Panel1, which is not absolutely positioned.

You can either make all levels of your div tree absolutely positioned, or you can use negative values to position things where you want them. Both can get messy if you aren't careful.

sirconnorstack  2010-07-10 02:13:02
+1 Thanks. I thought I was making it easy by absolutely positioning everything, but I thought I just had to positoin the components - didn't realize I needed to position the divs too. On Groupbox1 to I need to position teh fieldset as well as the div?
Mawg  2010-07-11 14:10:19
+8  A: 

position: fixed means top:, right:, bottom:, and left: are relative to the browser window and the element doesn't scroll with the page.

position: relative means top:, right:, bottom:, and left: are relative to where the top, right, bottom, and left sides of the element would have been if there was no positioning. It also means any absolutely positioned child elements are placed relative to this element.

position: absolute means top:, right:, bottom:, and left: are relative to the sides of the nearest relatively positioned element that contains it. If it's not inside a relatively positioned element, position: absolute works the way most people expect at first: top:, right:, bottom:, and left: are relative to the edges of the page.

For what it looks like you're trying to do, I think you should position each element like this

<div style="position: absolute; left: {X}px; top: {Y}px">

where {X} and {Y} are replaced with the coordinates of the top left corner of the element as it appears in the form designer.

Patrick McElhaney  2010-07-10 02:30:46
+1 Ah, so the position should be on the div and not on the component which it encloses? Or, if fact, maybe it should be on both? (and I'd like to give height/width as well as top/left, if that's ok.
Mawg  2010-07-11 14:06:02
Hmmm, "An absolute position element is positioned relative to the first parent element that has a position other than static" ... so in my delphi code, maybe I should make everything CSS absolute, but since Delphi components are really absolute, with respect to the screen, then instead of writing the positions as copment.top, component. left, I should write them as copment.top - compnent.parent.top, component.parent.left etc?
Mawg  2010-07-11 14:27:50
A: 

your problem is simply that IE is a ridiculous and unstable browser. It rarely displays pages correctly and usually has problems with pages that work in every other browser. Try using chrome, safari, opera, or firefox instead.

agentfll  2010-07-10 02:54:45
That's not his problem.
melhosseiny  2010-07-10 02:56:16
+1 because I tend to agree with you, but I have no choice - I have to use MS IE
Mawg  2010-07-11 14:07:51
"and usually has problems with pages that work in every other browser" = hyperbole
Scott Evernden  2010-07-11 19:08:50
+1  A: 

I'd say the problem is in the values for top and left you're giving to the nested absolutely positioned elements.

For an absolutely positioned parent and child, the child's coordinates are relative to the parent. You can check this fact here. Play with the values and see for yourself.

Another problem with your code, is that for form elements you shouldn't be setting the width/height on the containing elements. You should set it on the form element itself.

Edit: I tried to calculate the proper values, It's not perfect as i don't have the values from the delphi program and the values you're using are not the values given by the delphi program as evident from your code and screenshots. See the result here.

melhosseiny  2010-07-10 02:55:45
+1 but I was hoping that some CSS guru would give me the acutal answer as I am lost here
Mawg  2010-07-11 14:11:06
Added sample code.
melhosseiny  2010-07-11 19:33:21
+1  A: 

You can start with the following code. Make sure you read what others have posted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>Input data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
    <div class="TGroupBox" id="GroupBox1">
        <fieldset style="">
            <legend>GroupBox1</legend>
            <div class="TPanel" id="Panel1">
                <fieldset style="width: 600px; height: 250px; margin: 20px 50px 50px 20px; padding: 20px; padding-left: 50px">
                    <div class="TLabel" id="Label1" style="position: absolute; left: 100px; top: 100px;">Label1</div>
                    <div class="TEdit" id="Edit1" style="position: absolute; left: 200px; top: 100px;"><input type="text" name="Edit1" value="an edit bx"></div>
                    <div class="TCheckBox" id="CheckBox1" style="position: absolute; left: 400px; top: 100px;">CheckBox1 <input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
                    <div class="TComboBox" id="ComboBox1" style="position: absolute; left: 100px; top: 150px;">
                        <select size ="1" name="ComboBox1" style="width: 200px;">
                            <option value="one" selected="selected">one</option>
                            <option value="two">two</option>
                            <option value="three">three</option>
                        </select>
                    </div>
                    <div class="TRadioGroup" id="RadioGroup1" style="position: absolute; left: 380px; top: 150px;">
                        <fieldset style="">
                            <legend>RadioGroup1</legend>
                                <input type="radio" name="RadioGroup1" value=""> red<br>
                                <input type="radio" name="RadioGroup1" value="" checked> white<br>
                                <input type="radio" name="RadioGroup1" value=""> blue<br>
                        </fieldset>
                    </div>
                </fieldset>
            </div>
        </fieldset>
    </div>
    <div><input type="submit" name="submitButton" value="Submit" style=""></div>
</form>
</body>
</html>
Anax  2010-07-11 15:12:26
Mawg  2010-07-12 00:00:54
You need to start with plain HTML and add CSS properties once you have the main layout on screen. Of course it helps to have an understanding of how CSS works, especially positioning. What you shouldn't do is to start putting values here and there. Work with one element at a time and progress slowly. Finally, studying other peoples' work help tremendously.
Anax  2010-07-12 00:49:09
+1 Thanks! I tried that - one at a time, slowly, one at a time, and it goes well until I nest components. Btw, I tried asking a related question at http://stackoverflow.com/questions/3226799/html-forms-css-should-position-be-on-the-enclosing-div-or-the-enclosed-cont and they say that the position goes on the DIV and not on the <fieldset>. Any comment?
Mawg  2010-07-12 10:46:09
Mawg  2010-07-12 10:48:20
Mawg  2010-07-12 10:52:08
You need to view `DIV` as placeholder, whereas a `FIELDSET` is an element which allows you to group related controls and labels. If you want to duplicate the exact look of a form you will most probably have to alter the `style` property of all elements. Regarding the outermost GroupBox1, you need to fill in the style of the `FIELDSET` element to which it belongs. For example you could add some padding or some margin. Finally, why do you insist on specifying top/left/width/height instead of margin/padding? Use whichever will take you to your goal more easily.
Anax  2010-07-12 11:12:01
Thanks, @Anax (+1) Ok, so positioning on DIV, only on the controls (like fieldset, input type, etc)? I use left/top for positioning and width/height rather than margin/padding because that what delphi has, so it woudl seem to make it easier to use those...
Mawg  2010-07-14 03:01:01
+1  A: 

Just setting the position to absolute is not enough, basically to fix the position you just have to play with left and top styles of the elements.

Here is the fixed HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <title>Input data</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
<div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:40px; left:40px; width: 857px; height: 441px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:10px; left:10px; width: 753px; height: 369px;">
<div class="TLabel" id="Label1" style="position: absolute; top:35px; left: 80px; width: 32px; height: 13px;">Label1</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:35px; left: 200px; width: 121px; height: 21px;"><input type="text" name="Edit1" value="an edit bx"></div>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:35px; left: 420px; width: 97px; height: 17px;"><input type="checkbox" name="CheckBox1" value="CheckBox1Checked"> CheckBox1</div>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:145px; left: 80px; width: 145px; height: 21px;">
<select size ="1" name="ComboBox1">
<option value="one" selected="selected">one    </option>
<option value="two">two    </option>
<option value="three">three    </option>
</select>
</div>
<div class="TRadioGroup" id="RadioGroup1">
<fieldset style="position: absolute; top:145px; left: 250px; width: 185px; height: 105px;"><legend>RadioGroup1</legend>
red: <input type="radio" name="RadioGroup1" value=""><br>
white: <input type="radio" name="RadioGroup1" value="" checked><br>
blue: <input type="radio" name="RadioGroup1" value=""><br>
</fieldset>
</div>
</fieldset>
</div>
</fieldset>
</div>
<div><input type="submit" name="submitButton" value="Submit" style="position:relative; top:28px; left: 50%;"></div>
</form>
</body>
</html>
BrunoLM  2010-07-12 01:16:32

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?