I have a website which I am building; I have a problem in that sometimes I load the page and the text runs into itself. Sometimes just hovering over the text will cause the problem to go away, sometimes I have to reload the page. I use webfonts (Google fonts) and wondered if it was anything to do with that.
Here is a screenshot of the problem:
If anyone knows what is happening here and how to fix it, I'd appreciate it.
Edit
Here is my code, as requested. I can't get the problem to exhibit itself on there though; even on my dev site it is not consistent.
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>
try this:
instead of:
widthchanged to100%.