hi,
i am working on an application, which has DevExpress control, that generates some code dynamically. I am in the process of changing the look and feel of these control to make it fit in the entire design.
I changed most of the part by atjusting the styles using !important tag. But at one place i am stuck, as the control generates inline styles using !important tag.
<td style=“border-bottom: 1px solid rgb(168, 168, 168) ! important; width: 5px;”>
is there any way to overwrite this bottom border through css?
here is the code in page:
<dxtc:aspxtabcontrol ID=“tabProperties” runat=“server” ActiveTabIndex=“0” CssClass=“tabControl”
AutoPostBack=“True” onactivetabchanged=“tabProperties_ActiveTabChanged”>
<Tabs>
<dxtc:Tab Text=“Search Object” Enabled=“true” ></dxtc:Tab>
<dxtc:Tab Text=“Mass Update” Enabled=“true”></dxtc:Tab>
</Tabs>
</dxtc:aspxtabcontrol>
Below is dynamically generated html code:
<table id=“ctl00_cntContents_TabTable” class=“search-objects” width=“90%” align=“center” border=“0” cellpadding=“0” cellspacing=“0”>
<tbody>
<tr>
<td class=“so-tab-container” valign=“top” align=“left”><table class=“dxtcControl tabControl” id=“ctl00_cntContents_tabProperties” style=“height: 0px; width: 0px; border-collapse: separate;” border=“0” cellpadding=“0” cellspacing=“0”>
<tbody>
<tr>
<td id=“ctl00_cntContents_tabProperties_TC” class=“dxtcTabsCell” style=“padding: 3px 0px 0px; width: 905px;”><table border=“0” align=“center” cellpadding=“0” cellspacing=“0” style=“height: 100%; border-collapse: separate;”>
<tbody>
<tr>
<td style=“border-bottom: 1px solid rgb(168, 168, 168) ! important; width: 5px;”><div style=“overflow: hidden; height: 1px; width: 5px;”></div></td>
<td id=“ctl00_cntContents_tabProperties_AT0” class=“dxtcActiveTab” style=“height: 0px; width: 0px; cursor: default; border-bottom-width: 0px ! important;”><table class=“dxtc” style=“border-collapse: collapse; margin-bottom: 1px;” border=“0” cellpadding=“0” cellspacing=“0”>
<tbody>
<tr>
<td id=“ctl00_cntContents_tabProperties_AT0T” class=“dxtc”>Search Object</td>
</tr>
</tbody>
</table></td>
<td style=“border-bottom: 1px solid rgb(168, 168, 168) ! important; width: 1px;”><div style=“overflow: hidden; height: 1px; width: 1px;”></div></td>
<td id=“ctl00_cntContents_tabProperties_T1” class=“dxtcTab” onclick=“__doPostBack(‘ctl00$cntContents$tabProperties’,‘CLICK:1’)” style=“border-bottom: 1px solid rgb(168, 168, 168) ! important; height: 0px; width: 0px; cursor: pointer;”><table class=“dxtc” style=“border-collapse: collapse;” border=“0” cellpadding=“0” cellspacing=“0”>
<tbody>
<tr>
<td id=“ctl00_cntContents_tabProperties_T1T” class=“dxtc”>Mass Update</td>
</tr>
</tbody>
</table></td>
<td id=“ctl00_cntContents_tabProperties_RAC” style=“border-bottom: 1px solid rgb(168, 168, 168) ! important; width: 100%;”><div style=“overflow: hidden; height: 1px; width: 1px;”></div></td>
<td style=“border-bottom: 1px solid rgb(168, 168, 168) ! important; width: 5px;”><div style=“overflow: hidden; height: 1px; width: 5px;”></div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td id=“ctl00_cntContents_tabProperties_CC” class=“dxtcContent” style=“border: 0px solid rgb(168, 168, 168);”><div style=“overflow: hidden; height: 1px; width: 1px;”>kkk</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
here is the css used
.so-tab-container table.dxtc{width:100px !important; background: url(tab3.gif) top left no-repeat !important; padding:0px !important; margin:0px !important; text-align:center; height:39px!important; border-bottom: 0px solid rgb(23, 250, 187) !important;}
.so-tab-container td.dxtcTab{ padding:0px!important; margin:0px !important; margin-right:2px!important;border-bottom:none!important;}
.so-tab-container .dxtcActiveTab
{
padding:0px!important; margin:0px !important;
}
.so-tab-container .dxtcActiveTab td.dxtc
{
background: url(tab2.gif) top left no-repeat !important;
width:100px!important;
color:#ffffff !important;text-align:center;height:39px!important;
margin-bottom: 0px!important;
border-bottom: 1px solid rgb(23, 250, 187) !important;
}
.so-tab-container .dxtcTabsCell{ background: url(tab4.gif) top left repeat-x !important; height:39px;}
.so-tab-container .dxtcTabsCell div{ display:none;}
.dxtcControl td.dxtcTabsCell table td
{
margin-top: 0px !important;
padding-top: 0px !important;
border-bottom-width: 0 !important;
}
.so-tab-container .dxtcControl
{
font: 9pt arial;
width: 100% !important;
padding:0!important; margin:0 !important; height:30px;
}