I have an animation that is triggered by hovering on a sibling element (an image that renders above the animated element with the z-index property), and wish to get it paused once it's finished, since when the mouse leaves said sibling element, the animation reverts to its origin state. However I can't figure out how to do that.
Here's a snippet:
#keyframes boot {
0% {
background-color: black;
color: black;
}
100% {
background-color: #001900;
color: white;
}
}
div.tablet {
background-color: #666;
border-radius: 10px;
padding: 15px;
position: relative;
}
div.tablet img {
position: absolute;
z-index: 1;
top: 15px;
left: 0;
height: 100%;
}
div.tablet br {
display: none;
}
div.screen {
background-color: black;
color: black;
border-radius: 10px;
padding: 10px;
font-family: Monospace;
font-size: 12px;
z-index: 0;
}
div.screen br {
display: inline;
}
img:hover + div.screen {
animation: boot 7s;
background-color: #001900;
color: white;
}
<div class="tablet">
<img src="http://insurrection-du-chaos-sandbox.wdfiles.com/local--files/s-ou-o/broken.png" />
<div class="screen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla dolor, vel rutrum arcu porttitor in. Suspendisse et ornare orci. Duis dictum lacinia condimentum. Cras sed mattis justo, eu convallis elit. Sed efficitur lectus vitae nisi blandit scelerisque. Nulla efficitur condimentum quam. Ut et faucibus metus. Quisque ornare tempor sapien, ac venenatis urna. Donec eget suscipit turpis. Nulla venenatis ultricies purus, et facilisis felis sollicitudin et. In aliquet auctor aliquet. Donec sit amet diam iaculis, ultricies nisi eget, eleifend nulla.
</div>
</div>
The better solution will be to use transition and transition-delay.
.tablet {
background-color: #666;
border-radius: 10px;
padding: 15px;
position: relative;
}
.tablet img {
position: absolute;
z-index: 1;
top: 15px;
left: 0;
height: 100%;
}
.tablet br {
display: none;
}
.screen {
background-color: black;
color: black;
border-radius: 10px;
padding: 10px;
font-family: Monospace;
font-size: 12px;
z-index: 0;
transition: .4s ease-out;
transition-delay: 2s;
/* or only transition: .4s ease-out 2s;*/
}
.screen br {
display: inline;
}
img:hover+.screen {
transition: .4s ease-out;
background-color: #001900;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="tablet">
<img src="http://insurrection-du-chaos-sandbox.wdfiles.com/local--files/s-ou-o/broken.png" />
<div class="screen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla dolor, vel rutrum arcu porttitor
in. Suspendisse et ornare orci. Duis dictum lacinia condimentum. Cras sed mattis justo, eu convallis elit. Sed
efficitur lectus vitae nisi blandit scelerisque. Nulla efficitur condimentum quam. Ut et faucibus metus. Quisque
ornare tempor sapien, ac venenatis urna. Donec eget suscipit turpis. Nulla venenatis ultricies purus, et facilisis
felis sollicitudin et. In aliquet auctor aliquet. Donec sit amet diam iaculis, ultricies nisi eget, eleifend
nulla.
</div>
</div>
</body>
</html>
How I can add empty space at the left side of the text?
https://jsfiddle.net/ydL4emkd/
.camera_caption {
display: inline-block;
position: relative;
width: 717px;
padding: 10px 20% 10px 10px;
color: white;
text-decoration: none;
overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: -15%;
z-index: -1;
background: red;
}
.camera_caption:before {
top: 0px;
transform: skew(45deg);
}
.camera_caption:after {
bottom: 0px;
transform: skew(-45deg);
}
I need to get this visual result:
Add more padding to the left
.camera_caption {
....
padding-left: 100px;
}
Add padding-left
.camera_caption {
display: inline-block;
position: relative;
width: 717px;
padding: 10px 20% 10px 70px;
color: white;
text-decoration: none;
overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: -15%;
z-index: -1;
background: red;
}
.camera_caption:before {
top: 0px;
transform: skew(45deg);
}
.camera_caption:after {
bottom: 0px;
transform: skew(-45deg);
}
<div class="camera_caption">Some text</div>
<div class="camera_caption">Some text
<br>spanning across
<br>multiple line</div>
<div class="camera_caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius eros id consequat tempor. Nunc non libero nisi. Curabitur ultricies, magna eget hendrerit viverra, nibh leo faucibus est, eget efficitur mauris purus ut libero. Ut in arcu in leo
ornare tristique. Quisque rutrum lectus a lorem sollicitudin porta. Etiam placerat felis metus, non luctus felis placerat et. Nam lacinia libero enim, ut placerat mi accumsan eget. Ut viverra ipsum sit amet leo gravida, ac consequat ligula consequat.
Etiam consequat ex a augue rutrum, sed convallis est volutpat. Aliquam erat volutpat. Morbi pretium sem nec ipsum sollicitudin facilisis. Maecenas accumsan eleifend neque sit amet ornare. Curabitur condimentum arcu at tellus ullamcorper pretium. Mauris
lorem nisl, pulvinar eu lectus tincidunt, luctus fringilla diam.</div>
I centered a div vertically with CSS and it works great. But I have a background and when I resize browser the text go out the background.
.wrapper{
height: 100%;
width: 100%;
background: rgba(51,51,51,.5);
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 50%;
}
jsfiddle
.wrapper is div, so it already has width: 100% (because div has display: block, and we know that all blocks are full width elements). .wrapper { height: 100%; } means that it will inherit the full height of its parent (in this case it is body, body inherit height of its parent - html - so you get the viewport height); So we can remove all .wrapper styles. And simply add background: rgba(51,51,51,.5); to .outer
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
background: rgba(51,51,51,.5);
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin: 0 auto;
width: 50%;
}
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</div>
Jsfiddle Here
No need to use position:absolute in .outer and specifying height in .wrapper.
.wrapper{
/* height:100%; remove this-**/
width: 100%;
background: rgba(51,51,51,.5);
}
.outer {
display: table;
/* position: absolute; remove this-**/
min-height: 100%;
width: 100%;
}
try this https://jsfiddle.net/serGlazkov/5t9asdc1/3/
you should use min-height and delete here position: absolute;
.outer {
display: table;
/*position: absolute;*/
height: 100%;
width: 100%;
}
I've been reading the other posts from people having the same issue as I am but none of those solutions seem to be helping me. So, here's another post about my .news-post div height not adjusting to fit content inside of it. Here is the code:
HTML:
<div id="wrapper">
<div class="news-post">
<div class="news-post-header">
<h3>Fake News: blah blah blah.</h3><h3 style="float: right">July 26, 2013</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tempor diam. Vivamus eget neque ultrices, accumsan risus et, laoreet dui. Curabitur eu ligula fermentum, molestie orci sit amet, molestie ante. Morbi id massa laoreet, pellentesque magna nec, ultrices dui. Nulla tempus est massa, in euismod velit congue eu. Curabitur ac congue dui. Curabitur id risus tempor, mattis odio vel, faucibus nisi. Nullam pretium, dolor id auctor hendrerit, metus lacus volutpat orci, sed dapibus lorem lacus non felis. Aliquam felis lorem, posuere nec fringilla eu, aliquam in ligula. Duis ultrices, ante in vestibulum sollicitudin, lectus mi tristique tellus, in volutpat est lorem nec mi.</p>
</div>
</div>
</div>
And the CSS:
#wrapper {
margin: auto auto;
width: 1024px;
}
.news-post {
background: #fff url('images/skydive.png') no-repeat;
margin: 30px 30px 0 0;
height: auto;
min-height: 100% !important;
width: 642px;
display: block;
position: absolute;
overflow: visible;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 3px 0 #ccc;
-webkit-box-shadow: 0 1px 3px 0 #ccc;
box-shadow: 0 1px 3px 0 #ccc;
}
.news-post-header {
background: url('images/content-header-bg.png');
background-repeat: repeat-x;
margin: 0;
height: 47px;
line-height: 40px;
width: 642px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.news-post-header h3 {
margin: 0 15px;
font-family: 'droid_sansbold';
font-size: 14px;
text-shadow: 0 1px 0 #626262;
color: #fff;
float: left;
}
.news-post-header p {
padding: 445px 15px 0 15px;
text-align: justify;
}
Help would be greatly appreciated!
I think it is because you set a height parameter to your .news-post-header.
If you remove that it will work fine.
I've made a fiddle of your code here. have a look and let me know if this is what you're looking for.
link: http://jsfiddle.net/daltonpereira/2ZXx9/
below is what i've changed. basically removed the height:47px from news-post-header class
.news-post-header {
background: url('images/content-header-bg.png');
background-repeat: repeat-x;
margin: 0;
line-height: 40px;
width: 642px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I'm running into a weird issue that I'm struggling to figure out what's causing the page to break. I have an internal website that's still under development (thus no link to the page) that works great in Firefox and Internet Explorer 8 in IE 7 Standards mode. But when I force it to IE 8 Standards mode the page will only display the title text in the browser tab and an otherwise completely blank page. It seems so broken that the blank page doesn't even have a context menu.
The page generally looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<title>Page Title</title>
<link rel="shortcut icon" href="/Images/favicon.ico" type="image/x-icon" />
<link href="/Style/main.less" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<span id="logindisplay">[ Log On ]</span>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<div id="title">
<h1>APP TITLE</h1>
</div>
<div class="logo">
<img alt="Application" src="/Images/info.png" title="Application" />
</div>
<div>
<div id="company">Offered by: <span>Company Name</span>
</div>
<div id="version">Version: 0.0.0.0</div>
</div>
</div>
<div class="col2">
<div id="menucontainer">
<ul id="menu">
<li>
<a href="/Module1" class="ciApp">
<img alt="module" height="84px" src="/Images/Module1.png" title="module" />
<span>Module</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col3">
<div id="newsfeed">
<span class="welcomemessage">Welcome to <b>Application</b>
</span>
<div>
<span class="newsLabel">New Features</span>
<div class="newFeatures">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas condimentum laoreet. Curabitur urna elit, sagittis vel condimentum sit amet, ullamcorper suscipit diam. Suspendisse non ligula metus, nec ultricies libero. Vestibulum molestie ornare urna, eu posuere ipsum lacinia nec. Nulla facilisi. Curabitur elit ligula, laoreet nec vehicula at, ornare sed metus. Suspendisse gravida mattis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rutrum erat sed lacus eleifend et dapibus nisi mollis. Nulla elementum lacus quis mauris pulvinar in accumsan odio malesuada. Aliquam ultrices, mauris sit amet pharetra euismod, nisi nunc rhoncus est, eu commodo nunc sem vitae risus. Ut egestas ligula eu elit blandit consequat. Donec nunc justo, congue non mollis at, porta non massa.</p>
<p>Pellentesque consequat fermentum sapien at dictum. In pretium varius tellus, vitae blandit sapien cursus quis. Suspendisse potenti. Sed sollicitudin tempus elit et sodales. Vestibulum fringilla tempus elit, vitae convallis massa laoreet vel. Nulla facilisi. Duis dolor leo, lacinia ut ultrices eu, mollis in purus. Donec sagittis, est id tincidunt pulvinar, magna metus pellentesque nunc, eget tincidunt metus tellus sollicitudin tortor. Donec quis convallis nibh. In luctus, ipsum non sodales ornare, mi lectus molestie orci, id dignissim tellus augue at neque.</p>
<p>Phasellus ut molestie leo. Donec egestas odio ut felis lacinia ut interdum diam interdum. Fusce at posuere tortor. Vestibulum cursus elit quis purus porta vitae adipiscing nulla laoreet. Nam pretium orci a sem volutpat nec rhoncus magna viverra. Aenean non orci sapien. Nunc hendrerit sollicitudin lorem viverra porta. Pellentesque ac porttitor elit. Mauris risus sem, dapibus eu convallis vel, posuere in nibh. Phasellus sit amet tortor neque, aliquam volutpat massa. Sed quam libero, porttitor a lacinia in, pellentesque in libero. Suspendisse adipiscing laoreet lacus, eget fringilla felis tristique id. Maecenas lacinia, ante a vulputate gravida, felis libero hendrerit dolor, non tristique ante massa vitae leo. Aenean laoreet porta urna ullamcorper facilisis.</p>
<p>Nam a ligula a quam interdum ultricies. Suspendisse tempor pellentesque augue at sollicitudin. Sed vulputate, erat mollis fringilla rhoncus, nulla quam ullamcorper lacus, vel molestie metus ipsum quis eros. Fusce eget turpis tortor, viverra volutpat leo. Vestibulum in augue in augue fringilla volutpat sed eu purus. Ut varius lacus eget orci consequat eget tincidunt mi placerat. Donec suscipit suscipit enim, eget iaculis diam pellentesque in. Cras ac ante et lorem porttitor consectetur. Maecenas semper posuere magna. Aliquam erat volutpat. Sed at ante feugiat lectus hendrerit semper et ut elit. Aenean scelerisque fermentum justo, at blandit risus interdum eget. Donec a nulla pellentesque erat volutpat gravida. Nunc mattis est ac dolor dapibus viverra. Nulla facilisi.</p>
<p>Donec diam neque, lobortis quis aliquam nec, fermentum ac quam. Cras porta nisi sed massa pellentesque vitae luctus erat porttitor. Sed porta elit ac ligula semper eget volutpat purus adipiscing. Mauris aliquet convallis consectetur. Aliquam vel neque sit amet odio dapibus feugiat. Morbi vehicula porttitor cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut augue at tellus iaculis fringilla ut at enim. Ut sed lorem nunc. Aliquam ac accumsan eros. Fusce faucibus, lacus in convallis commodo, turpis nisi gravida ligula, sit amet semper odio ante sit amet lorem. Integer mollis, nibh vel malesuada imperdiet, purus justo ullamcorper ipsum, sed volutpat velit dui eget felis. Quisque sapien ante, dapibus quis malesuada ultrices, tincidunt id nibh. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
You may notice the .less extension for the stylesheet. This is an ASP.NET MVC application and I'm making use of DotLess. I have the HttpHandler hooked up for it in the web.config. Of course there's some additional info on the page, but (in theory) it shouldn't be causing this issue. I've run the CSS and the HTML through the W3C validators and both have come back as completely valid. I'm trying the arduous task of removing/re-adding elements until it displays, but any insight into what could cause this would help.
EDIT: it appears to be something related to the DotLess stylesheet. The resulting CSS is valid according to the W3C CSS validator.
EDIT 2: Digging further, and making use of IE's Developer Tools to control the styles, it appears that IE is reading a single statement twice even though it only occurs once in the output. Here's the output of the Less file:
a, abbr, acronym, address, applet, b, big, caption, center, cite, code, dd, dfn, div, dl, dt, em, fieldset, font, form, html, i, iframe, img, kbd, label, legend, li, object, pre, s, samp, small, span, strike, strong, sub, sup, tbody, td, tfoot, th, thead, tr, tt, u, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
blockquote, q {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
quotes: none;
}
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
line-height: 1;
width: 100%;
background: #efebde;
min-width: 600px;
}
del {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: line-through;
}
h1 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 2em;
margin: .8em 0 .2em 0;
padding: 0;
}
h2 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.8em;
margin: .8em 0 .2em 0;
padding: 0;
}
h3 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.6em;
margin: .8em 0 .2em 0;
padding: 0;
}
h4 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.4em;
}
h5 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.2em;
}
h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1em;
}
ins {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
ol, ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
list-style: none;
}
p {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
margin: .4em 0 .8em 0;
padding: 0;
}
table {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
border-collapse: collapse;
border-spacing: 0;
}
blockquote:before, blockquote:after, q:before, q:after { content: none; }
:focus { outline: 0; }
.bold { font-weight: bold; }
.systemFont { font-family: Arial; }
.labelled { font-style: italic; }
.groovedBorder {
border-color: #adaa9c;
border-style: groove;
border-width: medium;
}
#header, #footer {
clear: both;
float: left;
width: 100%;
}
#header p, #header h1, #header h2 {
padding: .4em 15px 0 15px;
margin: 0;
}
#header ul {
clear: left;
float: left;
width: 100%;
list-style: none;
margin: 10px 0 0 0;
padding: 0;
}
#header ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#header ul li a {
background: #eeeeee;
display: block;
float: left;
left: 15px;
line-height: 1.3em;
margin: 0 0 0 1px;
padding: 3px 10px;
position: relative;
text-align: center;
text-decoration: none;
}
#header ul li a span { display: block; }
#header ul li a:hover { background: #336699; }
#header ul li a.active, #header ul li a.active:hover {
background: black;
font-weight: bold;
}
#header #logindisplay {
float: right;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1em;
padding-left: 1em;
}
#title h1 {
font-family: Arial;
font-style: italic;
font-size: 175%;
text-align: center;
margin-top: 1%;
}
.col1 {
font-family: Arial;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
min-height: 350px;
float: left;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.col1 div.logo { text-align: center; }
.col3 {
font-family: Arial;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
float: left;
overflow: hidden;
position: relative;
}
#layoutdims {
clear: both;
background: #eeeeee;
margin: 0;
padding: 6px 15px !important;
text-align: right;
}
#company {
padding-left: 10px;
padding-top: 10px;
margin: 0;
}
#company span {
display: block;
padding-left: 1em;
}
#version {
padding-right: 1em;
padding-top: 1em;
text-align: center;
}
#menu li {
padding: 6px;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
min-width: 108px;
}
#menu li a.ciApp {
text-decoration: none;
font-size: 112.5%;
font-weight: bold;
font-family: Arial;
color: black;
}
#menu li a.ciApp span { vertical-align: top; }
.welcomemessage { font-size: 60.95%; }
.newFeatures {
overflow-y: scroll;
max-height: 300px;
}
#newsfeed div .newsLabel {
color: red;
font-size: 60.95%;
font-style: italic;
}
/**************************************************************************************
This statement appears twice in Developer Tools. Disabling one disables both. Disabling it also causes the page to render. Turning it on and the page disappears again
**************************************************************************************/
#newsfeed div .newFeatures {
margin-left: 1em;
margin-right: 1em;
font-size: 60.95%;
}
/**************************************************************************************
**************************************************************************************/
.colmask {
clear: both;
float: left;
position: relative;
overflow: hidden;
width: 100%;
}
.colright, .colmid, .colleft {
float: left;
position: relative;
width: 100%;
}
.col2 {
float: left;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.threecol .colmid { right: 33%; }
.threecol .colleft { right: 34%; }
.threecol .col1 {
width: 33%;
left: 100%;
}
.threecol .col2 {
width: 32%;
left: 34%;
}
.threecol .col3 {
width: 32%;
left: 68.5%;
}
Notice the #newsfeed div .newFeatures identifier near the end. I don't know what's causing that as it's only appearing once in the output stream. Here's an image of it too:
EDIT 3: It appears that even though it duplicates that particular selector, if I change the font-size to a whole number like 61% instead of the current 60.95% (that specific to defaultly match the existing desktop app as closely as possible) it works fine. I even moved the font-size (still as 60.95%) to a more general selector (just the .newFeature one a few lines up) and it still causes the page to break. Still not sure why that is. I've added the full HTML to see what's going on.
Keep in mind, we have NO way of knowing without seeing any code or anything, so this is basically guesswork. If you can get a sample up which shows the problem, that would be a big help.
Have you tried using the Developer Tools to see and manipulate the structure of the page? That's the first place to start when you get weird rendering issues for no apparent reason.
EDIT: Okay, this is really a tough one. Here's what I've been able to come up with.
For starters, I don't see the multiple defintion issue here, even though I copied all of that CSS into a file - so I can't really tell you what's going on there.
Secondly, it would appear that the problem is not specifically the 60.95% - it does the same if you use 60%, or 60.XX%. 61% works, 60.99 doesn't, 59.99% works, 60% doesn't.
However, it DOES render the page if I remove overflow-y: scroll. In fact, it works if I remove ANY of the definitions on .newFeatures or #newsfeed div .newFeatures. I can also change them to something else, and it works - except for max-height. Just changing one of the two margins on #newsfeed div .newFeatures to 0.999em makes the page render again. I propose doing that as a temporary workaround - or moving to 61% font-size, since there's very little difference.
It's really hard to tell what's going on here, but it looks like there's a bug in IE which causes some internal calculation to go horribly wrong in this particular scenario - and somehow the browser doesn't recover from it.
I think this is definitely something the IE team would like to know about now, so there's a chance they can fix it for IE9. This is a pretty isolated case, and probably not something currently covered by their testing. I'm not sure what the best way of contacting them are - there are some MSFTs on here, including Eric Law, who might know of a better option than opening a support case.