Wednesday, September 20, 2006

How to create style for html element

The samples for creating the style for html element are followings:

body
{
background-color:#ACC2EE;
}
input
{
height:16px;
font-size:12px;
}
select
{
height:16px;
font-size:12px;
}

to define an input button or input image create the style as followings:

input.button
{
height:20px;
}
input.image
{
height:20px;
}
then add the following line into style:
input
{
-mso-attribute-selector-hack:expression( addAttributeName(this) );
height:15px;
font-size:12px;
}

finally, add the following javascript into asp.net page header

<script>
function addAttributeName(node) {
if (node.type&&!(node.className&&node.className.indexOf(node.type)>=0)) {
node.className = node.type;
}
}
</script>


The image input type can also define with the followings:

input.LookupButton
{
height:20px;
}

and set the class="LookupButton"

ex:

<input type="image" align="absMiddle" id="Lookup" height="21px" src="../Images/look.gif" runat="server" class="LookupButton" />

0 comments: