I have FIELDSET inside of P. If I set P style to hidden, FIELDSET is still shown.
The only solution I have is to use DIV instead of P.
Showing posts with label style sheet. Show all posts
Showing posts with label style sheet. Show all posts
Tuesday, January 05, 2010
Tuesday, March 17, 2009
Alex Blog: Use text-algin:right for table
Alex Blog: Use text-algin:right for table
So what is the solution?
Below is sample of center table alignment.
People also were talking about the solution in
here.
So what is the solution?
Below is sample of center table alignment.
<STYLE>
#container {text-align:center;}
#area {
width:600px; border:solid 1px black; text-align:left;
margin-left:auto; margin-right:auto;
}
</STYLE>
<DIV id="container">
<TABLE cellpadding="0" cellspacing="0" border="1" id="area">
<TR>
<TD>
This is a table.
</TD>
</TR>
</TABLE>
</DIV>
People also were talking about the solution in
here.
Thursday, February 12, 2009
Vertical Text
Firefox 3.1 comes with css transform. I learn IE also has matrix equally.
Previously, I use writing-mode: tb-rl; filter: flipv fliph; for IE vertical text. Unfortunately, the text is very jagged after rotated. I decide to give matrix a try.
Still, the text is very jagged. The matrix filter is quite mathematical. Not sure any other attribute can smooth the font.
Previously, I use writing-mode: tb-rl; filter: flipv fliph; for IE vertical text. Unfortunately, the text is very jagged after rotated. I decide to give matrix a try.
For IE, method 1
<style>
.vt {
writing-mode: tb-rl; filter: flipv fliph;
white-space:nowrap; font-size:12px; font-family:arial; letter-spacing:2px
}
</style>
<div class="vt">Vertical Text</div>
For IE, method 2
<style>
.displayretainer {
width:160px;text-align:right; z-index:25;
font-family:arial; font-size:12px; letter-spacing:2px
}
</style>
<div id="vt" class="displayretainer"
style="filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand');">
Vertical Text
</div>
<SCRIPT>
var deg2rad = Math.PI * 2 / 360;
function setRotation(obj, deg) {
var rad = deg * deg2rad;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
}
setRotation(document.getElementById("vt"), 270)
</SCRIPT>
Still, the text is very jagged. The matrix filter is quite mathematical. Not sure any other attribute can smooth the font.
Monday, February 09, 2009
style vertical text
Previously, I have a vertical text sample.
Today, I replace the line chart y-axis label with it.
Unfortunately, IE does not come out good render.
I think the issue is in the filter (filter:flipv fliph;).
Today, I replace the line chart y-axis label with it.
Unfortunately, IE does not come out good render.
I think the issue is in the filter (filter:flipv fliph;).
Monday, October 06, 2008
Use style sheet to control SELECT box height
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.
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.
Monday, September 29, 2008
Use text-algin:right for table
Try the following code to align inner table (print) to right.
In IE, that is straight forward -- I got "Print" to the right side. But, not Firefox.
According to http://bytes.com/forum/thread100308.html "The text-align property affects, by CSS specifications, the alignment of text lines inside the element. The inner table is a block element, so it is not affected.", that is make sense to me. However, it just give my style sheet more complication.
<TABLE width="100%" cellpadding="0" cellspacing="0" border="1">
<TR>
<TD><H1>Header</H1></TD>
<TD style="text-align:right">
<TABLE><TR><TD>Print</TD></TR></TABLE>
</TD>
</TR>
</TABLE>
In IE, that is straight forward -- I got "Print" to the right side. But, not Firefox.
According to http://bytes.com/forum/thread100308.html "The text-align property affects, by CSS specifications, the alignment of text lines inside the element. The inner table is a block element, so it is not affected.", that is make sense to me. However, it just give my style sheet more complication.
Subscribe to:
Posts (Atom)