Target all versions of internet explorer

HTML & CSS
1

I need to target internet explorer, but for some reason I can’t get this to work.

<!–[if IE]>

#MainArea h1 {
font-size:.7em !important;

}
<![endif]–>

What am I doing wrong?

2

IE10+ do not support those conditional comments. Neither does IE4-. They only work in IE5, 6, 7, 8, and 9. Also they only partly work in IE9.

3

Well, how do I adjust that font for IE 10 then?

4

I can’t access your page at the moment so what’s wrong with the font in IE10?

You don’t usually need to hack for IE10 these days so there is probably a better answer to the problem. Indeed those that did use hacks will have come unstuck because the IE10 hacks mentioned in most cases target IE11 now and will break IE11.

5

Sorry, I had to transfer the site to new hosting. The problem is that Criminal justice overflows onto 2 lines on smaller screens while Personal injury and Immigration remain on 1 line creating different heights for the common section. I guess that I can set a height for that section, but I think that there is a better solution for this.

6

I wasn’t able to determine exactly what you were talking about. Nevertheless, if different heights is the issue… you can put a span around one of the words in each row and give the span “display:block” via a media query to wrap them all at once.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1205161-target-all-versions-of-internet-explorer
Apr 14, 2014, 02:15
BrianBam
-->
    <style type="text/css">
.outer {
    border:4px solid magenta;
    max-width:600px;
    min-width:14em;
    margin:0 auto;
}
p {
    font-weight:bold;
    font-size:1.25em;
    text-align:center;
    background:pink;
}
p:first-child {color:red}

@media (max-width:22em) {
    p > span {display:block;}
}

    </style>
</head>
<body>

<div class="outer">
    <p>Words wrap <span>simultaneously</span></p>
    <p>Unlawful Injury <span>Ligation</span></p>
    <p>Transirrigational <span>Law</span></p>
    <p>Socioparenthetical <span>Heresy</span></p>
</div>
<br>
<br>
<div class="outer">
    <p>Words wrap at width of container</p>
    <p>Unlawful Injury Ligation</p>
    <p>Transirrigational Law</p>
    <p>Socioparenthetical Heresy</p>
</div>

</body>
</html>

Hope that helps.

7

Hi,

The text "Criminal Defense is split on two lines in IE11 because the font size is 32px and not 18px as in other browsers.

The reason for this is your fault and not the browser :slight_smile: It amazes me that people immediately start to hack browsers when the answer lies elsewhere;)

In every post title you have malformed html and it is likely this that is causing the problem. You have an extra quote mark before the title attribute which means the anchor never gets closed and likely upsets the rest of the page depending on how browsers handle the error.


<p class="PostsTitle"><a href="http://www.utahlibertylaw.com/not-guilty-vindicates-client-arrested-for-a-dui/" target="_blank"   "title="&#8220;Not Guilty&#8221; Vindicates Client Arrested for a DUI ">&#8220;Not Guilty&#8221; Vindicates Client Arrested for a DUI </a></p>

Specifically:


 "title="

Remove the leading quote mark and then re-test IE. If this doesn’t solve the issue we can look at other things but not until this error is rectified and I’m almost certain this will cure the problem.

You will also need to remove the conditional comments from the stylesheet because they are not valid in a stylesheet and will break the block of code that follows.


<!--[if IE]>

#MainArea h1 {
	font-size:.7em !important;
	
}
<![endif]-->

Only css comments can go in a stylesheet not html comments. Conditional comments are html not css. The conditional comments are in the html and then you can call a stylesheet or add styles in a style tag inside the comments but you can’t embed conditional comments inside a styleheet just like you can’t add a block of html in your stylesheet.

e.g.


<!--[if IE]>
<style>
#MainArea h1 {
	font-size:.7em !important;
	
}
<style>
<![endif]-->

Anyway just remove that whole block as it won’t be needed when you fix the html I mentioned and indeed conditional comments are not supported at all in the latest versions of IE anyway as they have been deprecated.

8

Okay I removed those quotes and a few other errors found with the w3 validator. However, I don’t see a change in the font size in IE. However, there are a couple of other errors which I don’t know how to fix without removing the href around that whole section.

Line 161, Column 20: End tag a violates nesting rules.

Line 161, Column 20: Cannot recover after last error. Any further errors will be ignored.

9

Hi,

You still have invalid nestings in those 2 places. You should have a closing p tag but you have an opening one instead.


<p class="LearnMoreButton"> Learn more
		<p> 
		</a> </section>
	<!--Column3-->

It should be:


<p class="LearnMoreButton"> Learn more </p> 
		</a> </section>
	<!--Column3-->