Hi Andre,
Sorry for delay in responding.
The code is almost too horrible to comment on; it's a classic case of
hard coding which leads to browser dependency and over complication. I'd
say BOTH versions are wrong. The HTML4 version renders differently in
IE6 to how it does in Mozilla anyway. There are also conflicting
attributes where you've defined width at the style sheet level, and then
again on the HTML tag itself!
The solution is to learn CSS and (x)HTML properly, and then code it from
scratch. Always test in Mozilla, it's much better for developers than IE
- actually it's better for everyone than IE but that's another story.
Regarding the span and width; this confused me, because I've never
thought of a span as having "width", the whole point is that it spans
the content it contains, however, the Microsoft docs say that width
_can_ apply to span - I don't understand that, but if you look at the
proper CSS1 docs here:
http://www.w3.org/TR/REC-CSS1.html
It says that width only applies to "block level" and "replaced"
elements; to me that makes more sense.
Options for nice form layouts include using tables with CSS attributes,
but you should never use tables for actual page layout. If the form
layout is truly tabular then it's OK. An other pure CSS option is to use
relative positioning to place elements side by side (a bit like a table
but with a lot more control). The docs for this are here:
http://www.w3.org/TR/REC-CSS2/
But note that IE6 only has limited support of CSS2.
An example of relative positioning is shown below. This will work in IE6
and Mozilla. I've deliberately left everything in-line here, but in real
life you'd use classes and inheritance instead.
<div id="outer" style="left:50px; top:50px; width:280px; height:60px;
background-color:#FFFF00">
<div id="div1"
style="position:relative;top:20px;left:20px;width: 100px;background-color:#FFFFCC">
This is Div1
</div>
<div id="div2"
style="position:relative;top:0px;left:160px;width: 100px;background-color:#FFFFCC">
This is Div2
</div>
</div>
Andre wrote:
Hi Gerry,
Please see below example in the HTML and XHTML when it looks differently.
The difference that in IE6 HTML treats "width" as instruction on how wide is
the span, when in XHTML it ignores its value. The height attribute is also
treated differently in HTML and XHTML for "input".
Please advise on how make "span" of specified width and how to keep height
the same.
Thank you.
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Test
</title>
<style type="text/css">
.forminfofield{font-family: verdana,arial; font-size: 8pt;
font-weight:400; border: solid 1px #adc6f1; font-style: normal; width:190px;
height: 18px; vertical-align: middle; padding-left: 2px; background-color:
#efefef;}
.formfield{font-family: verdana,arial; font-size: 8pt; font-weight:400;
width:190px; height:18px;}
</style>
</head>
<body>
<input id="input1" tabindex="10" class="formfield" style="width:95px;"
value="test" />
<span id="span1" class="forminfofield" style="width:120px;"> </span>
</body>
</html>
HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<head>
<title>
Test
</title>
<style type="text/css">
.forminfofield{font-family: verdana,arial; font-size: 8pt;
font-weight:400; border: solid 1px #adc6f1; font-style: normal; width:190px;
height: 18px; vertical-align: middle; padding-left: 2px; background-color:
#efefef;}
.formfield{font-family: verdana,arial; font-size: 8pt; font-weight:400;
width:190px; height:18px;}
</style>
</head>
<body>
<input id="input1" tabindex="10" class="formfield" style="width:95px;"
value="test" />
<span id="span1" class="forminfofield" style="width:120px;"> </span>
</body>
</html>
--
Gerry Hickman (London UK)
