I try to make a SELECT and DIV side by side with outline (style by border) in the same height; unfortunately, IE6 has always few pixels short.
I play it more. This situation only happens on heavy styling -- font is problem.
So, I try to set my SELECT with fixed size font (font-family:monospace,Courier,Courier New;), then both SELECT and DIV are in the same height.
<html>
<head>
<title>Control SELECT height</title>
<STYLE>
BODY, TABLE, TD, TH, P, OL, LI, INPUT, SELECT, BUTTON {font-family: Verdana, sans-serif; color:#343434}
</STYLE>
</head>
<body>
<TABLE width="100%" border="0" cellpading="0" cellspacing="0">
<TR valign="top">
<TD width="50%">
Avialable List <BR>
<SELECT SIZE="7" NAME="available" id="available" STYLE="width:100%; height:96px;">
</SELECT>
</TD>
<TD style="padding-left:1em">
Description<BR>
<DIV NAME="detailPanel" id="detailPanel" STYLE="width:100%; height:96px; border:1px solid blue">
</DIV>
</TD>
</TR>
</TABLE>
<BR><BR>
<TABLE width="100%" border="0" cellpading="0" cellspacing="0">
<TR valign="top">
<TD width="50%">
Avialable List <BR>
<SELECT SIZE="7" NAME="available" id="available" STYLE="width:100%; height:96px; font-size:12px; font-family: monospace,Courier,Courier New;">
</SELECT>
</TD>
<TD style="padding-left:1em">
Description<BR>
<DIV NAME="detailPanel" id="detailPanel" STYLE="width:100%; height:96px; border:1px solid blue">
</DIV>
</TD>
</TR>
</TABLE>
<BR><BR>
</body>
</html>
You can only see the result correctly in web, not open from file system.
No comments:
Post a Comment