- From: <ve3ll@rac.ca>
- Date: Wed, 01 Jun 2005 12:07:13 -0400
- To: www-amaya@w3.org
- Message-ID: <429DA4F1.1431.2E9B75@localhost>
the enclosed demo shows how width:auto miscalculates the width of the go button and then forces a wrap of the control... an absolute value for width is calculated aok!! -- -- John Russell, VE3LL@RAC.CA http://home.cogeco.ca/~ve3ll http://home.cogeco.ca/~trains http://home.cogeco.ca/~cipher
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title>cssForm.htm:VE3LL@RAC.CA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* stylesheet for Education Pages -- March 28, 2005 */
body {background:#a0522d;color:black;font-size:12pt;text-align:center;
width:780px;margin:auto;border:0px;padding:0px;padding-bottom:6px}
div {margin:0px;border:0px;padding:0px}
div.main {width:720px;background:honeydew;height:100%;text-align:left;
margin:0px;padding-left:25px;padding-right:25px;padding-top:30px}
span {color:red}
table {margin:auto}
form {margin:auto;padding:10px;text-align:center}
input {background:oldlace;width:80px;height:20px;
border:2px inset;padding-left:2px}
input.go {width:auto;margin:1px;background:silver}
input.gogo {width:30px;margin:1px;background:silver}
/* width:auto on go button does miscalculate and wrap
- but absolute measure displays ok */
</style></head><body><div class="main">
<h1>cssForm.htm:VE3LL@RAC.CA</h1>
<p class="drop">This file demos a problem with the auto value.
A form with two controls folds instead of remaining on same line. The
width of the go button is miscalculated when assigned <em>width:auto</em>.</p>
<table class="nav" summary="navbar"><tr class="nav"><td class="nav">
<img class="nav" src="images/zhome.gif" alt="[home]" /></td>
<td class="nav">
<a href="home.htm">HomePage</a> | <a href="#update">Updates</a> |
<a href="sitemap.htm">Site Map</a> | <a href="#bot">Bottom of Page</a><br />
<a href="#health">Health</a> | <a href="#life">Lifestyle</a> |
<a href="#security">Security</a> | <a href="#hobby">Hobbies</a> |
<a href="#literacy">Literacy</a> | <a href="#edit">Editorial</a></td>
<td class="nav">
<form action="" onsubmit="search_form('formdata');return false;">
<div><input id="formdata" class="search" type="text" />
<input class="go" type="button" value="Go!" onclick="search_form('formdata')" />
</div></form></td></tr></table>
<p>If absolute measure is used then the display is ok.</p>
<table class="nav" summary="navbar"><tr class="nav"><td class="nav">
<img class="nav" src="images/zhome.gif" alt="[home]" /></td>
<td class="nav">
<a href="home.htm">HomePage</a> | <a href="#update">Updates</a> |
<a href="sitemap.htm">Site Map</a> | <a href="#bot">Bottom of Page</a><br />
<a href="#health">Health</a> | <a href="#life">Lifestyle</a> |
<a href="#security">Security</a> | <a href="#hobby">Hobbies</a> |
<a href="#literacy">Literacy</a> | <a href="#edit">Editorial</a></td>
<td class="nav">
<form action="" onsubmit="search_form('formdata');return false;">
<div><input id="formdata" class="search" type="text" />
<input class="gogo" type="button" value="Go!" onclick="search_form('formdata')" />
</div></form></td></tr></table>
<p>And with Amaya version 8.7.4 a peculiar border style is drawn for
<span>inset</span> on buttons. If inset is not implemented then a SINGLE
line is best but it would be nice to do a proper inset.</p>
</div></body></html>
Received on Wednesday, 1 June 2005 16:07:21 UTC