Text launched into itself
I have a website that I am creating; The problem I have is that sometimes I load the page and the text is triggered in itself. Sometimes just hovering over the text will cause a problem, sometimes I have to reload the page. I am using webfonts (google fonts) and wondering if this is related to this.
Here's a screenshot of the problem:
If anyone knows what is going on here and how to fix it, I would appreciate it.
Edit
Here is my code, as requested. I cannot get the problem to manifest itself there; even on my dev site, it is incompatible.
WebFont.load({
google: {
families: ['Ubuntu:300,400,700,400italic,700italic:latin']
}
});
div#wrapper {
height: 100%;
display: table;
table-layout: fixed;
margin: 0 auto 3em;
}
#wrapper,
header div,
footer div {
max-width: 900px;
margin: 0 auto;
width: 90%;
}
* {
margin: 0;
padding: 0;
font-family: 'Ubuntu', serif;
}
.ajaxcol {
display: table-row;
height: 100%;
}
body {
font-weight: 300;
}
.post,
.page {
clear: both;
margin-bottom: 3em;
}
.page {
margin: 1em 0 0 0;
}
#maincol p,
#sidebar p,
#pagecol p,
td,
li {
line-height: 1.8em;
}
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper p {
color: #2E2E2E;
}
p {
margin: 0.3em 3px 1em 3px;
width: 100%;
}
<body>
<div id="wrapper" style="padding-top: 1em; opacity: 1;">
<div id="pagecol" class="ajaxcol">
<div class="page">
<header>
<h2>Header</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tellus odio, gravida posuere nibh aliquam sed. Sed vulputate maximus nibh malesuada tincidunt. Sed convallis faucibus nisi, imperdiet vehicula arcu sollicitudin finibus.
Maecenas aliquam neque eros, nec facilisis purus ultricies ac. Praesent feugiat lorem a ipsum interdum ornare. Etiam elit metus, laoreet vel consequat ut, mattis vel mauris. Donec ut libero diam.</p>
</div>
</div>
</div>
</body>
+3
source to share