Wordpress Blog renders poorly in IE8 - css

I've read several similar posts but am still at a loss so I'd appreciate some help here.
In Firefox & Chrome the page looks exactly as it should http://www.deductyourhome.com.au/ wheras at the widget, Home Middle 3, the Recent Comments scroll has ridiculously huge font and is and overlaid.
Further down that widget, "Take The Test Now" is too large and the following font is in bold when it shouldn't be and below that, the font under "Contact Us Today" also should not be in bold.
Essentially, this widget should render the same as Home Middle 2 (i.e. the column to the left).
At Home Bottom 1, 2 & 3, all font except headings should not be in bold and the second one is clearly erroneously enormous and overlaid.
Here's the code for Home Middle 3 widget:
<!-- home middle 2 -->
<iframe width="290" height="290" src="http://www.youtube.com/embed/S4q4mas5aPE?hl=en&fs=1" frameborder="0" allowfullscreen></iframe>
<div><h1 align="center" style="line-height: 26px">
A Substantially Tax Deductible Home Improves Your Wealth & Lifestyle!</h1></div>
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
<p>Deduct Your Home provides fresh thinking that's vastly superior in many ways to anything your financial planner, finance broker, stock broker, bank, real estate agent, lawyer & accountant have ever put on the table or could hope to devise and perfect anytime soon!</p>
<p>It shreds debt fast saving you tens to hundreds of thousands in mortgage interest!</p>
<p>It smashes tens of thousands or more from your annual assessable income by legally claiming a huge proportion of your home mortgage interest, council and water rates & building insurance and even lets you claim depreciation on your home!</p>
<p>It sends capital gains tax packing if you later sell your home at a profit (here’s hoping when the time comes)!</p>
<p>It’s often cash-flow positive within mere months leaving the rest of your life to soak it up!</p>
<h1 align="center" style="line-height: 26px">
Checked & Approved By The Authorities!
</h1></div>
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
Our system, products and services have been extensively examined and approved by each of the Australian Securities and Investment Commission, the Australian Taxation Office & the Tax Practitioners Board to the extent they've respectively confirmed we’re not operating an unlicensed financial services business, promoting illegal tax exploitation schemes or providing unregistered tax agent services!</p>
<p>Furthermore, in response to our correspondence to The Federal Treasurer (in seeking certainty for our clients), we requested that he discuss our home business proposals with the Federal Commissioner of Taxation and to kindly get back to us with any concerns etc and where we have since been twice informed in writing by his office, that in speaking, the Commissioner said our clients can obtain the Government's protection regarding their tax affairs by way of applying for a private tax ruling as based on our home business proposal. Ladies and gentlemen, this is as good as it gets - period. Accordingly, you can now tap into our exclusive intellectual property (IP), confidential information or know-how (it's all the same thing), to achieve optimum, ultra-safe outcomes on this basis and that noone can compete with or deny.
</p><p>
We further take this opportunity to thank the ATO for respecting our claim of ownership in the IP in NOT having published any details into the public domain as would otherwise normally have occurred under the circumstances in which the relevant taxation officers were made aware.
</p><p>
Of note, BetterLifePanel®, a related entity of our parent company, is Australia’s sole training provider to progressive accountants, registered tax agents, lawyers and financial planers, regarding proprietary and highly advanced, adviser training and client management systems on these same cutting-edge processes. Accordingly, once we have assisted you to secure your own tax ruling, we can point you towards qualified and suitably trained, professionals to assist you into the future with these and other matters!
</p><p>
The bottom line is we'll help you to obtain written ATO confirmation on your circumstances that the sorts of things we'll discuss with you are true and proper etc!</p>
Now that's safe!
</p>
<h1 align="center" style="line-height: 14px">
Make It Good Debt!
</div>
And here's the code for Home Bottom 1 widget:
<!-- Home Bottom #1 -->
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
<p>John earns $120,000 p.a in his job.</p>
<p>He lives in a nice home that's worth around $1,000,000 with a mortgage of $600,000 # say 8% interest (long-term average).</p>
<p>He can likely restructure himself to attain deductions of around $50,000 p.a. that he can use to offset his wage and salary income going forward thus saving him around $18,500 p.a in tax (medicare levy excluded).</p>
<p>He can also pay no capital gains tax in future should he hopefully sell his property for a profit.</p>
<p>See more examples HERE</p>
</div>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6797160;
var sc_invisible=0;
var sc_security="c52d8549";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="wordpress visitor"
href="http://statcounter.com/wordpress.com/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/6797160/0/c52d8549/0/"
alt="wordpress visitor" ></a></div></noscript>
<!-- End of StatCounter Code -->
And here's the code for Home Bottom 3 widget:
<!-- Home Bottom #1 -->
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
<p>“Imagination is everything. It is the preview of life's coming attractions". ~Albert Einstein.</p>
</br>
"Some people get lost in thought because it's such unfamiliar territory". ~G. Behn.</p>
</br>
"No problem can withstand the assault of sustained thinking". ~Voltaire.</p>
</br>
"Too often we enjoy the comfort of opinion without the discomfort of thought". ~John F. Kennedy.</p>
</br>
"Thinking is the hardest work there is which is probably the reason so few engage in it". ~ Henry Ford.
</div>

Your Take the Test title does not have a font-size specified for the h1 tag so it just uses whatever the browser default is. Try specifying default font sizes for all your h tags. This may fix your other problems too. You specify one for h1.content, but the widget is outside the content area I believe.

Related

Why Google PageSpeed Insight Shows some images in Opportunities even after adding lazyloading on the images

I have searched for this everywhere but I don't think there is anything written yet for this.
Every week I optimize 1 to 2 Shopify and WordPress sites. When Google shows images in "Defer offscreen images" in the opportunities section I usually add https://github.com/aFarkas/lazysizes in shopify.
I have noticed one thing sometimes even after adding lazyloding to the images google still shows some images in "Defer offscreen images" in the opportunities section whereas it should not show them.
I'm sure if you have optimized the speed of multiple sites you would have also noticed this problem.
The problem is not with Google Page Speed Insights, it is with your implementation / your plugin.
Take the following as an example (part of the brand images section):-
<td>
<a href="https://www.primemassagechairs.com/collections/ultracomfort-america" title="UltraComfort America">
<div style="text-align: left;">
<img src="//cdn.shopify.com/s/files/1/2444/6637/files/UltraComfort_Logo_Home_Page_Image.jpg?v=1553734908" alt="Ultra Comfort Lift Chairs" width="" height="" style="float: none;">
</div>
</a>
</td>
The plugin is not recognising this as an image to be lazy loaded (or you have not adjusted it for lazy loading as per the instructions on the plugin - I am not familiar with the plugin to know what you are meant to do here).
As a src is set for this image it will be downloaded normally and that is why Page Speed Insights is marking this as a problem.
As far as I can tell the correct format for this should be
<img data-src="//cdn.shopify.com/s/files/1/2444/6637/files/UltraComfort_Logo_Home_Page_Image.jpg?v=1553734908" class="lazyload" alt="Ultra Comfort Lift Chairs" width="" height="" style="float: none;"/>
with the image URL as the data-src and a class of lazyload in order for the plugin to work and no href set.
Either manually adjust this or find another plugin.
As a final thought - the way this plugin is implemented means that if the site has no JavaScript the images will not load at all, it may be worth exploring a better option that provides a <noscript> fallback for the images (or adding them yourself).

Correct way for writing an <address> tag for my web site, to provide Contact details for our company

I am building a website using asp.net mvc-5, and I want to provide our company contact details such as telephone, email, postal address, etc.., so I used the <address> tag as follow inside our "Contact US" page (I replace the real data by ***):-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 address">
<h2>Addresses</h2>
<address>
<div class="info">
<p><span class="footercolor">Telephone: </span><span>+******</span></p>
<p><span class="footercolor">FAX: </span><span class="marginfax">+*****</span></p>
<p class="mainaddress">3rd Floor, Bldg. 1(....),<br />... Str. .CityName</p>
<p><span class="footercolor">P</span>.<span class="footercolor">O</span>.<span class="footercolor">Box: </span><span>*****,**** 1212,CountryName</span></p>
<p><span class="footercolor">Email:</span><span> info#*****.com</span></p>
</div>
</address>
</div>
so I have a couple of questions about using the <address> tag:-
inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?
Is the <address> tag the correct way to provide our company's contact details as I am currently doing, or it should be used to provide details about the web site owner such as who created the web site and when ....
What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>?
When you should use an address tag
From the W3C (https://www.w3.org/TR/html-markup/address.html):
If an address element applies to a body element, then it represents
contact information for the document as a whole. If an address element
applies to a section of a document, then it represents contact
information for that section only.
In summary, an address tag is for contact information. If your contact information is just a phone number, then only the phone number should be included in the address block. If your contact information is a phone number(s), postal address, and e-mail as in your case, then all of this information (including the postal address) should be contained within the address block.
When you should NOT use an address tag
The point is, you should not be including a postal address in the address block if it is NOT contact information. So for example, if you have a real estate website, and you're listing information about available houses, the address of a house listing should not be in the address block. On the other hand, the real estate agent's address should be included in the address block, since this is contact information.
Why use the address tag
HTML is meant to be semantic. Ie/ you provide content and give meaning to that content. The more meaning you can give to the content, the better. Address conveys a lot more meaning than just div or p, so if address is appropriate, you should use address. In fact, here's what the W3C says about divs (https://www.w3.org/TR/html5/grouping-content.html#the-div-element):
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Acceptable content within an address tag
Divs and Ps inside an address block are perfectly acceptable. More specifically, here's what you can use within an address block (from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address):
Flow content, but with no nested <address> element, no heading content
(<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), no sectioning content
(<article>, <aside>, <section>, <nav>), and no <header> or <footer>
element.
Divs and Ps are flow content.
tl;dr: Maybe you could make your code a little prettier. But regarding your usage of the address tag, you're good!
It might help to look at this answer about address formats
Advantages include semantic markup being easier for search engines to use.
By the way, you've got a lot more span tags in that sample than you actually need - you could remove most of the middle ones.
Let me see if I can answer all of your questions :), please note I'm not an HTML pro so I'm not 100% sure on everything.
inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?
Of course you can always write whatever you like, so if you want to include the postal code that's your call. There are no set rules to as of what you can do and what not.
Is the <address> tag the correct way to provide our company's contact details as i am currently doing?, or it should be used to provide details about the web site owner such as who created the web site and when ....
I don't think that there is a 'correct' way of using the <address> tag, as you are free to use it for whatever you like.
What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>???
https://stackoverflow.com/a/34862011/5806274, I think that he describes it pretty good, it's mostly easier for Search Engines such as Google.

3 column fluid page : BIG ISSUES

Everything looked great until I widened my site.
I have checked the code, firebugged all and for 2days I have only gotten more frustrated and am praying someone here could be of help - maybe a fresh set of eyes will help.
I have linked the page and the cssdesk code for you see what is going on.
Thanking you in advance.
In css desk the columns are correct but on the website it looks like everything is pushed down for some reason.
http://www.cssdesk.com/BVCf2
http://jason.carpedp.com/coinlogistics/charities-co-ordinator/aviation-sector/
don't use closing p without opening p and don't use -- in comments, some browsers interpretate it as end of comment.
<div class="left"><!--COLLEFT--NOTHING-->
</p>
<div class="airport"><!--CENTER--><br/>
</p>
<h4>AIRPORTS</h4>
use w3c validator to find more errors:
http://validator.w3.org
I had a look at the code and did a quick download of the page and dropped it into a HTML editor.
From what I gathered, there is a blank tag (code line 86 on my editor) in the airports column which is setting everything down a level.
After removing that it started displaying fine on my side again.
Original
<div class="airport"><!--CENTER--><br>
<p></p>
<h4>AIRPORTS</h4>
<p><img alt="Donation boxes are strategically placed in busy areas of the airport" src="./Aviation Sector - Coin Logistics_files/airport.jpg">
</p>
<p>With a substantial rise in international and foreign travel in recent years; the volume of foreign coins entering and departing the airports have increased. This makes airports the perfect location for the donation boxes to be located, giving travelers the opportunity to rid themselves of their unwanted change and enabling them to perform the good deed of donating to the designated charity and allowing their small change to make a big difference.
</p>
</div>
New
<div class="airport"><!--CENTER--><br>
<h4>AIRPORTS</h4>
<p><img alt="Donation boxes are strategically placed in busy areas of the airport" src="./Aviation Sector - Coin Logistics_files/airport.jpg">
</p>
<p>With a substantial rise in international and foreign travel in recent years; the volume of foreign coins entering and departing the airports have increased. This makes airports the perfect location for the donation boxes to be located, giving travelers the opportunity to rid themselves of their unwanted change and enabling them to perform the good deed of donating to the designated charity and allowing their small change to make a big difference.
</p>
</div>
if you check your html code in firebug you 'll found some unnecessary empty tags like <p></p> and <br/> just remove them and that is all.

How to add the image as part of RSS feeds

I have added the Title, Title link and description in RSS feeds. But unable to add the Image as part of the RSS feeds.
Please guide me how I can include the image within the tag and display them in the RSS feeds.
Regards,
Gourav
Wrap your description in CDATA comments and insert the images as HTML <img> tags.
TechCrunch have examples in their feed that you could work from: http://feeds.feedburner.com/TechCrunch
For example from their current feed the first item about UK Entrepreneurs using the following description tag:
<description>
<![CDATA[
<img src="http://eu.techcrunch.com/wp-content/uploads/startupbritain.jpg" alt="" />
This morning in London, the UK's answer to <a href="http://www.whitehouse.gov/issues/startup-america">
Startup America</a> launches, titled - guess what? - Startup Britain.
That similarity aside, the initiative has been put together by a number of existing UK entrepreneurs and
is not being backed by any government money, unlike the Obama initiative. Instead, we have here a
ground-up entrepreneur-led initiative which is seeing over 60 leading brands offer services to
up-and-coming startups in the UK. This is not specifically about tech startups - but it may well appeal to that sector.
The campaign is being launched by Prime Minister David Cameron, who is known to be very pro-enterprise.
The UK has 270,000 businesses that start up every year but many fail due to a lack of support. So in
effect the Startup Britain initiative is doing a few things much more differently. It's offering a
package of discounts and free trial on business services like insurance, broadband, advertising,
office space and more. The claim is that this amounts to over £1,500 in value for every startup
company in Britain. Startup Britain is a portal site to a package of these services.
<img alt=""
border="0"
src="http://stats.wordpress.com/b.gif?host=techcrunch.com"
width="1" height="1" />
]]>
</description>

Is it not possible to iframe nytimes.com?

I tried this, and it just reloads to nytimes.com Any ideas?
<div style="position:absolute; top: 0; left: 0; width:80%; height:100%; background-color:white">
<iframe border=0 width=50% height=1000 src="http://nytimes.com/"></iframe>
</div>
I just wanted to add to what Christopher Kelly said - they obviously don't want you to put their content in a frame, so you should not do it. You may want to refer to their terms of use to see what sort use of their content they are okay with.
This is what would be relevant:
Trademarks, Copyrights and Restrictions. This site is controlled and operated by The New York Times Company. All material on this site, including, but not limited to, images, illustrations, audio clips, and video clips, is protected by copyrights, trademarks, and other intellectual property rights that are owned and controlled by The New York Times Company, its related companies or by other parties that have licensed their material to The New York Times Company. Material on this Web site is solely for your personal, non-commercial use. Such material may not be copied, reproduced, republished, modified, uploaded, posted, transmitted, or distributed in any way, including by e-mail or other electronic means, without the express prior written consent of The New York Times Company. Use of the materials on any other Web site or networked computer environment, or use of the materials for any purpose other than personal, non-commercial use is a violation of The New York Times Company 's copyrights, trademarks and other proprietary rights, and is prohibited.
they are using a frame breakout javascript, since it is their site there is nothing you can do. one possibility is instead of embedding their site in a frame, use a server side method to download the wanted content and display it inline on your site.

Resources