I've been working on this issue for the past 2 hours but I just can't figure out what's wrong and how to resolve it.
Consider the following HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE8 test</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="myDiv">
<p>First line - bla bla bla bla bla bla bla bla bla</p>
<p>Second line - bla bla bla bla bla bla bla bla bla</p>
<p class="red last">Third line - bla bla bla bla bla bla bla bla bla</p>
</div>
</body>
</html>
And here is the CSS being used:
@charset "UTF-8";
#myDiv {
border: 1px solid green;
}
#myDiv p {
text-align: center;
}
#myDiv p:first-child {
text-align: left;
}
#myDiv p.last, #myDiv p:last-child { /* ISSUE IN IE8 */
text-align: right;
}
.red {
color: red;
}
The expected behavior is to center all text within the div, aligning the first line to the left and the last line to the right. This works perfectly in modern browsers, but not in IE8 (surprise, surprise...).
It appears that IE8 is not recognizing
#myDiv p.last, #myDiv p:last-childclass="last", the text-align:center is still not being overridden by text-align:right. Any suggestions on how to fix this? It's crucial for me to make this work in IE8. Thank you!