I'm trying to display an HTML email by inserting the entire html code from an email into a div on a webpage.
The problem is that the styles of the email are overriding the overall website styles. So if an email has a red background then my entire site's background color is red.
How do I lock the inner html of the div that has the email html.
You need to address this issue by re-writing or fixing your CSS, otherwise do something like load the HTML email as an iframe and the contents will be isolated from the rest of the page.
Its simply pollution, you mix one set of CSS with another, they mix, and cause problems.
Related
I've created a simple html and it looks perfectly
But when I use it as maintenance for my wordpress site it has lesser height that expected. CSS and inner HTML are completely the same, I've just inserted html inside maintenance.php
There are some screens to show what I mean:
The problems seems to be that height is not full screen, but I can't tell the difference
I made a laravel email client that displays emails as conversations, but the problem is how to restrict styles only for emails? Once I open an email with tags the whole email client's style changes. For example tags underlines and changes color. If I remove style or put !important to main css file then emails loose their original appearance.Any suggestions?
Personally I would use an iframe for rendering the email content. This way any styles/tags within the email content are restricted to the iframe only and the email is rendered as intended.
I've got a menu, links within it are sending user to e.g. ?menu=home but there are many other links. I wanted to use $_GET[""]; to manage content of website by switch i.e.
if ($_GET["menu"] == "home"), everything looks fine, I have background, a website, pictures and stuff, but each time you change ?menu by clicking on other links than itself, it flickers, for about 0.5 second it is white and then website loads.
Now that wouldn't be a problem if website would be bright like StackExchange, unfortunately my website orbits around dark colors, such flikker throws off the feeling of smoothness on website.
Is there a way to get rid of that white short flicker?
load your external css file in section.
set background to html or body element in your css file.
I think your problem is that css is loaded after content so styles are only applied after that and default html and body background is white.
Currently working on a project here http://palanquin.shrimp-works.com. When I try to validate what I have done so far, using http://validator.w3.org/, I get lots of this error Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.), which basically means there is a div which is printing it's styles to the body tag of my document. This is invalid. Simple styles like background color, text color, etc are all being printed in the body tag of the html, ruining any chance of html5 validation.
Is there a wordpress filter that can print all style tags in the wordpress text editor or tinymce to the head instead of to the body? I know how to enqueue inline styles in functions.php. I don't think that's what I need here. Any ideas?
We are in the process of importing some old pages from our legacy website which was designed in tables into our new DIV based layout. Our site is built on a PHP include system, so we have our pages split into three components; header, body, and footer. These old pages need to be pulled in for our launch of revision 1.0, and then as we get all of the wrinkles ironed out, we will redesign.
Our header component is working out just fine, and the body content displays as it should, but unfortunately the existing footer element plugs into the bottom of the table. Our footer for the new design extends for 100% of the width, but the existing table only allows for 960px width. Thus our footer is getting cut off.
We are trying to find a dynamic solution, either a using JavaScript, or the jQuery Attr() call to dynamically effect the table dimensions to allow the footer to extend to the edge of the page, yet everything I have tried does not modify the table dimensions or allow overfow to show at all.
Here are a couple of screenshots for you to see what I am talking about.
Div layout:
Table Layout:
If you like to take a peek at the code, you can look at my Demo Page, but just know that this is a demo version which is not using PHP to pull in the components. Its a simple HTML/CSS based layout I have been using to search for alternatives. (I'm not a PHP guy)
We are trying to avoid having to go through hundreds of documents and cutting and pasting the footer in below the table, or having to modify any other code by hand. If we could just include a CSS or JavaScript doc in the header that would render a workaround is the ideal solution.
You can also make a div with the footer Background - separate from the contents and underneath. Put a div with the same css styles as 'footer' after your element. Then you can take the background image (footer_bg.jpg repeat-x) off of footer.
See campdavidozarks.org for a website I made with the same idea.
Center the table, and use the same footer-background on the parent, 100% width element, too with alignment to the bottom and no-repeat on y. Done. Pure CSS solution.