Hi,
My form which uses absolute positioning works perfect in all browsers except in Opera. I can't figure out why the input areas are not neatly aligned like in other browsers.
The page is: <!-- w --><a class="postlink" href="http://www.marcgerritsen.com/gb">www.marcgerritsen.com/gb</a><!-- w -->
The input fields for name location and email do not align with the comment field to the right.
Any help wouild be greatly appreciated..
The code for the form is:
<form name="post" method="post" action="{U_POST_FORM}" onSubmit="return fieldCheck(this)">
<div style="position:absolute;left:110px;top:150px;">
<patTemplate:tmpl name="form_dislpay_star_warning">
</patTemplate:tmpl>
</div>
<div style="position:absolute;left:110px;top:157px;">
<patTemplate:tmpl name="name_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<p class="posterror">* name</p>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<p class="fieldtext">name
</p></patTemplate:sub>
</patTemplate:tmpl></div>
<div style="position:absolute;left:170px;top:165px;">
<input name="name" type="text" class="mainfield" value="{F_NAME}" maxlength="{F_NAME_LENGTH}" /></div>
<div style="position:absolute;left:110px;top:187px;">
<patTemplate:tmpl name="location_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<p class="posterror">* location:</p>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<p class="fieldtext">location
</p></patTemplate:sub>
</patTemplate:tmpl></div>
<div style="position:absolute;left:170px;top:195px;">
<input name="location" type="text" class="mainfield" value="{F_LOCATION}" maxlength="{F_LOCATION_LENGTH}" /></div>
<div style="position:absolute;left:110px;top:216px;">
<patTemplate:tmpl name="email_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<p class="posterror">* email</p>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<p class="fieldtext">email
</p></patTemplate:sub>
</patTemplate:tmpl></div>
<div style="position:absolute;left:170px;top:225px;">
<input name="email" type="text" class="mainfield" value="{F_EMAIL}" maxlength="{F_EMAIL_LENGTH}" /></div>
<div >
<p class="fieldtext" style="position:absolute;left:400px;top:155px;"><textarea name="comment" class="area">{F_COMMENT}</textarea></p></div>
<div style="position:absolute;left:110px;top:250px;">
<p class="fieldtext">To avoid spam in this guestbook, please enter the code here</p></div>
<patTemplate:tmpl name="image_code_enabled" type="condition" conditionvar="enabled">
<patTemplate:sub condition="1">
<span class="fieldcode" style="position: absolute; left:540px; top:253px;"><img src=http://www.webdeveloper.com/forum/archive/index.php/"{U_SECURITY_IMG}" /></span>
<patTemplate:tmpl name="image_code_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<input name="code" style="position: absolute; left:440px; top:257px;" type="text" class="codefielderror" value="enter code" onFocus="javascript: if (this.value == 'enter code') this.value=''; this.style.color = 'black'" />
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<input name="code" valign="top" style="position: absolute; left:440px; top:257px;" type="text" class="codefield" value="enter code" onFocus="javascript: if (this.value == 'enter code') this.value=''; this.style.color = 'black'" />
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
</patTemplate:sub>
</patTemplate:tmpl>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.marcgerritsen.com"><img src="../images/dots/homedot.gif" style="position: absolute; left:908px; top:254px;" border="0" /></a>
<input name="submit" style="position: absolute; left:940px; top:254px;" type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"../images/dots/postdot.gif" value="Post" />
<input type="hidden" name="form_submit" value="1" />
<input type="hidden" name="hash" value="{HASH}" /></span><p></p><br /><br />
</form>You are missing the <span> tag.Attempted validation (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.marcgerritsen.com%2Fgb%2F">http://validator.w3.org/check?verbose=1 ... om%2Fgb%2F</a><!-- m -->) shows that you have no DOCTYPE - so variation between browsers is a strong possibility. Drop in the appropriate DOCTYPE, re-validate and clean up your code. Then drop by here again if you still have a problem.i don't get why you are using absolute positioning. also as kiwibrit said add a HTML 4.01 strict or XHTML 1.0 strict doctype and validate your code
i would also suggest you google the CSS box model and look into CSS layouts as currently you have VERY messy hard to read code and 80% of the code on the page isn't needed.
My form which uses absolute positioning works perfect in all browsers except in Opera. I can't figure out why the input areas are not neatly aligned like in other browsers.
The page is: <!-- w --><a class="postlink" href="http://www.marcgerritsen.com/gb">www.marcgerritsen.com/gb</a><!-- w -->
The input fields for name location and email do not align with the comment field to the right.
Any help wouild be greatly appreciated..
The code for the form is:
<form name="post" method="post" action="{U_POST_FORM}" onSubmit="return fieldCheck(this)">
<div style="position:absolute;left:110px;top:150px;">
<patTemplate:tmpl name="form_dislpay_star_warning">
</patTemplate:tmpl>
</div>
<div style="position:absolute;left:110px;top:157px;">
<patTemplate:tmpl name="name_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<p class="posterror">* name</p>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<p class="fieldtext">name
</p></patTemplate:sub>
</patTemplate:tmpl></div>
<div style="position:absolute;left:170px;top:165px;">
<input name="name" type="text" class="mainfield" value="{F_NAME}" maxlength="{F_NAME_LENGTH}" /></div>
<div style="position:absolute;left:110px;top:187px;">
<patTemplate:tmpl name="location_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<p class="posterror">* location:</p>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<p class="fieldtext">location
</p></patTemplate:sub>
</patTemplate:tmpl></div>
<div style="position:absolute;left:170px;top:195px;">
<input name="location" type="text" class="mainfield" value="{F_LOCATION}" maxlength="{F_LOCATION_LENGTH}" /></div>
<div style="position:absolute;left:110px;top:216px;">
<patTemplate:tmpl name="email_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<p class="posterror">* email</p>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<p class="fieldtext">email
</p></patTemplate:sub>
</patTemplate:tmpl></div>
<div style="position:absolute;left:170px;top:225px;">
<input name="email" type="text" class="mainfield" value="{F_EMAIL}" maxlength="{F_EMAIL_LENGTH}" /></div>
<div >
<p class="fieldtext" style="position:absolute;left:400px;top:155px;"><textarea name="comment" class="area">{F_COMMENT}</textarea></p></div>
<div style="position:absolute;left:110px;top:250px;">
<p class="fieldtext">To avoid spam in this guestbook, please enter the code here</p></div>
<patTemplate:tmpl name="image_code_enabled" type="condition" conditionvar="enabled">
<patTemplate:sub condition="1">
<span class="fieldcode" style="position: absolute; left:540px; top:253px;"><img src=http://www.webdeveloper.com/forum/archive/index.php/"{U_SECURITY_IMG}" /></span>
<patTemplate:tmpl name="image_code_field_cond" type="condition" conditionvar="empty">
<patTemplate:sub condition="yes">
<input name="code" style="position: absolute; left:440px; top:257px;" type="text" class="codefielderror" value="enter code" onFocus="javascript: if (this.value == 'enter code') this.value=''; this.style.color = 'black'" />
</patTemplate:sub>
<patTemplate:sub condition="__empty">
<input name="code" valign="top" style="position: absolute; left:440px; top:257px;" type="text" class="codefield" value="enter code" onFocus="javascript: if (this.value == 'enter code') this.value=''; this.style.color = 'black'" />
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
<patTemplate:sub condition="__empty">
</patTemplate:sub>
</patTemplate:tmpl>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.marcgerritsen.com"><img src="../images/dots/homedot.gif" style="position: absolute; left:908px; top:254px;" border="0" /></a>
<input name="submit" style="position: absolute; left:940px; top:254px;" type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"../images/dots/postdot.gif" value="Post" />
<input type="hidden" name="form_submit" value="1" />
<input type="hidden" name="hash" value="{HASH}" /></span><p></p><br /><br />
</form>You are missing the <span> tag.Attempted validation (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.marcgerritsen.com%2Fgb%2F">http://validator.w3.org/check?verbose=1 ... om%2Fgb%2F</a><!-- m -->) shows that you have no DOCTYPE - so variation between browsers is a strong possibility. Drop in the appropriate DOCTYPE, re-validate and clean up your code. Then drop by here again if you still have a problem.i don't get why you are using absolute positioning. also as kiwibrit said add a HTML 4.01 strict or XHTML 1.0 strict doctype and validate your code
i would also suggest you google the CSS box model and look into CSS layouts as currently you have VERY messy hard to read code and 80% of the code on the page isn't needed.