Override style in the page

Add-in Express™ Support Service
That's what is more important than anything else

Override style in the page
Get rids of the styles applied to the some part of the page 
Fady Sayegh




Posts: 7
 Joined: 2012-09-12
Hi All,

my add-in express is able to add a "Div" tag after each "P" tag.
inside the "Div" tag i have added a "Table" tag with some rows (TR).
my "Table" tag have no border (border="0"), however, when i click on a button to change the DOM tree, all my "Table" tags has some borders and even some style that (it seems) are defined in the original page.

my question is how can i override these styles and to apply only my styles.

<table border=""0"" width=""100%"">
<tr>
<td><img src="image.png" width="80px" height="30px"</td>
<td align="right"><a id="Myid" href="#" target="_self" style="color:#ed1c24;">collapse</a></td>
</tr>
</table>

in the snippet code above :
even though i have border="0" i'm having a border for the table.
my collapse link is not right aligned.

offcourse if i test the above code on a normal page with only few P tags (and no styles on the page), my table is reacting in a good way.

can you please advice on this issue

Best regards and thanks in advance

Fady Sayegh
Posted 27 Sep, 2012 06:59:48 Top
Andrei Smolin


Add-in Express team


Posts: 18721
 Joined: 2006-05-11
Hello Fady,

This forum is about developing IE extensions. I'm sorry, we cannot help with general HTML-related questions that do not directly relate to our product. I'd suggest googling for the answer. Thank you for your understanding.


Andrei Smolin
Add-in Express Team Leader
Posted 27 Sep, 2012 09:08:42 Top
Fady Sayegh




Posts: 7
 Joined: 2012-09-12
Hi Andrei,

No problem. thanks anyway.
in the mean while i have found the problem.
in fact it isn't related to ie extensions.
i will however post the solution in case someone is facing the same problem.
in fact we have a priority order to apply the style to a tag.
from least weight to the higher weight:
external CSS class ==> color:red
internal style tag ==> color:green
style attribute in any html tag ==> color:blue
!important keyword

so if you have an external css class or an internal style tag and you are using a style attribute in any html tag, it mean's that the blue color will be applied to the html tag.
unless you have the keyword !important in the external css class or the internal style tag, in this case the color red or green will be applied to the html tag.

hope this help

regards

Fady Sayegh
Posted 27 Sep, 2012 11:14:47 Top
Andrei Smolin


Add-in Express team


Posts: 18721
 Joined: 2006-05-11
Thank you, Fady!


Andrei Smolin
Add-in Express Team Leader
Posted 27 Sep, 2012 12:08:44 Top