1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Competing CSS tags with dynamic content

css specificity

         

cvecchi

6:56 pm on Feb 26, 2011 (gmt 0)

10+ Year Member



Good afternoon,

I have an html page that utilizes a CSS sheet for the styling. Within this page, I am pulling in dynamic email content (using a Wordpress loop) that occasionally includes it's own html/css formatting. This is causing a formatting conflict I can't seem to figure out.

In order to diagnose the issue, I ran the php / wordpress loop and copied the relevant page source it produced below. It may not be perfect, as I trimmed it down significantly to as to not "code dump" in the forum. The code pulled in by the wordpress loop is commented out as "-- WORDPRESS BEGIN --": 


<head>
<link rel="stylesheet" type="text/css" media="screen,projection" href="./css/style_screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="./css/style_print.css" />

 <style type="text/css">
<!--
.style12 {font-size: 12px}
.style13 {font-weight: bold}
.style14 {font-weight: bold}
-->
 </style>

</head>

<body>
  
<div class="content1-container" align="left">

<!-- WORDPRESS BEGIN -->


<h1>test html test</h1>
<style type="text/css">
body { font-family: Verdana, Arial, Helvetica, sans-serif; cursor: auto; color: #000000; padding: 0px 0px 0px 0px; }
a { text-decoration: underline; color: #006666; }
a:active {color: #06ab22; }
a:hover {color: #06ab22; }
td { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: 10pt; }
img {border: 0px;}
</style>
<p><html><body class="text"><br />

<div align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<p>
Notification from: <b>blah blah</b></p>
<p><P>test class</P><br />
<hr /><span style="font-weight: bold">Attachments available for 30 days until Monday, March 28, 2011:</span><br /><a target="_blank" href="https://example.com/">test.pdf</a><br />
<hr />

<p></font></div>
<p></body></html></p>
<br />
<br />
<p><a href="http://www.example.com/wordpress/wp-login.php">Log in</a></p>
<!-- WORDPRESS END -->

</body>
</html>


I have full control over the website's css files, but unfortunately I'm stuck with the coding that is used within the emails as they are incorporated into the page automatically. My ultimate goal is to somehow allow the incoming dynamic emails to style themselves, while leaving the styling of my existing website alone.

Any assistance or suggestions would be most appreciated!

Thanks,
Chris

[edited by: alt131 at 7:12 pm (utc) on Jul 9, 2011]
[edit reason] Examplifying href [/edit]

webprutser

10:04 pm on Feb 26, 2011 (gmt 0)

10+ Year Member



I don't know anything about WordPress, so can't be of any help with that. For someone not familiar with it, your code looked odd. I never saw a nested body before, for example. I googled it and it is indeed used in certain instances.
Also your style declarations looked odd to me. With that last remark I may be right. Checking what WordPress was, I read it was used with XHTML (are you sure you can use it with html?) and that style declarations must be put in the head, not in the body.
I see a couple of unclosed <p> tags in your code as well.
Anyhow, I hope someone who is familiar with WordPress will join this post.

webprutser

10:07 pm on Feb 26, 2011 (gmt 0)

10+ Year Member



P.S. The div before WordPress begins is not closed.

cvecchi

11:39 pm on Feb 26, 2011 (gmt 0)

10+ Year Member



Indeed, wordpress can do some odd things. I believe I may have misspoke in saying the page was HTML, when in fact it is PHP. Perhaps if I explain what is happening with the page a little better it will make more sense to someone. Also, let me preface this with the fact that I am certainly not a css or coding pro, so hopefully my message is clear even if my terminology is a little off.

The "parent" page includes a reference to the CSS stylesheets in the head, within the first few lines of code. This portion of the code renders the page appropriately and matches the rest of the site.

The Wordpress "loop", in essence, runs through php and pulls in a dynamic list of "posts" from the blog. In my instance, this is a collection of RSS feeds converted to posts, distribution list emails converted to posts, etc that may be of interest to the members of our organization. Some of those messages, the emails in particular, are formatted to display as independent HTML messages. Thus, I end up collecting the html, head, body, and style tags of the email message.

Generally speaking, this is alright as it allows the emails to display as they were intended to, including links to images and regular web hyperlinks. The issue is that in some manner, the style information from the email is contaminating the style of the other objects within the "parent" php page. For instance, text that is supposed to look like the rest of the site now takes on the appearance of the text in the offending email brought in through the Wordpress loop.

I know the style information contained in the email is causing the issues with the formatting because when I remove this, the email is still there and the entire page displays with the correct formatting: 

<style type="text/css">
body { font-family: Verdana, Arial, Helvetica, sans-serif; cursor: auto; color: #000000; padding: 0px 0px 0px 0px; }
a { text-decoration: underline; color: #006666; }
a:active {color: #06ab22; }
a:hover {color: #06ab22; }
td { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: 10pt; }
img {border: 0px;}
</style>


Unfortunately, that code comes part and parcel within the email when Wordpress brings it into the page, so I need to adapt around it and let it do it's thing if possible.

Ideally, I'd like to somehow tell my page to use the main style sheet for the entire page, with the exception of the "content-1container" div which would be allowed to retain it's own styling as called for by the information imported in by Wordpress.

I know there's some dangling code in what I copied and pasted, my apologies for that. I tried to hack down the length of my post by eliminating some inconsequential code such as menus, footers, etc.

Thanks,
Chris

Snix

12:24 am on Feb 28, 2011 (gmt 0)

10+ Year Member



Hmm, very tough one. Can you pull them to where the email loads in ::shudder:: an iframe?

caribguy

1:18 am on Feb 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you use a Javascript framework, you can remove any inline style tags when the page loads.

SuzyUK

9:55 am on Feb 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



you could just make sure your code is more specific, then the Cascade won't matter, you can also override inline styles using the important selector

it might take a bit of time to "catch" all the general codes that might be used, but you should be able to make a fairly general sheet, make a separate one and call it from the head of your document after your other stylesheet.

I know you said the first post was only an example, but I imagine most emails would have a fairly similar set of styles, either the ones embedded with <style> or inline, style="" attribute ones - using a few of those sample emails I imagine you could soon create a few basic overrides.., which might be better than nothing ;)

I pasted that code from the first post.. then added this mini stylesheet, exaggerated I know, but you would override them with values close to your default styles, redeclaring as much options as you think necessary.. I just targetted what I could by way of an example

I would image font-family and color to be among the major ones to try.. don't want no Comic Sans now do we ;)

anyway the embedded styles <style> are very easily overwritten.. you just make a more specific selector - usually this could be done by prefixing all selectors with html.. inline styles are bit more difficult, but attribute selectors should get them, but then you will need to use 
!important
as well as that's the only way to overrule an inline style.. not lightly recommended really, mostly 
!important
should be reserved for user styles.. but for this use case and the fact it's likely only temporary until you can find away to strip out embedded styles and inline styles before they reach your page (I would have thought there would be something you can put in the WP Loop to sanitise code?) - I don't see a problem using !important anyway..

here's the mini sheet I came up with for the code in post#1

html body {
font-family: georgia, arial, sans-serif;
color: #00f;
padding: 15px;
}

html body a {color: #f00;}
html body a:hover,
html body a:active {color: #dad;}
html body img {border: 5px solid #000;}

/* more specific using importantto reach those inline styles */

*[align=left] {text-align: right;}

font {
font-family: georgia, arial, sans-serif !important;
font-size: 12px !important;
}

span[style]{ /* doesn't work in IE7 */
font-weight: normal !important;
color: #f00 !important;
}


The [style] attribute selector don't work in IE7, but these simple ones do in IE8 although I believe there are some caveats if you try to get more specific with them

the 
<font>
element is actually very easily overruled as per your example, but I'd still use 
!important
with it in case some emails actually have 
<font style="">
code blocks ;)

is that of any help, or have you found another way?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026