There are so many things wrong with your code... ugh.
First of all, start with the CSS, erase all styles and start putting them back one by one, from most essential until you get the desired result, then ditch the rest.
For any kind of unit, don't use more than 1 digit after the decimal point, meaning 0.0 is ok, 0.00 is not.
Then again, there is absolutely no need for that level of precision so I would about using the decimal point.
Now the HTML:
Don't put an image inside of a heading tag
Quote:
|
<div class="body" style="white-space:normal">
|
There is absolutely no reason to use a div with class body since you have a body tag and you can apply css directly to it. also, white-space is one of those css rules you should throw in the bin.
AFAIK, there is no need for the title attribute, since we can't hover with our mouse pointer then we won't be able to see the title anyway.
I think this code should work well for you:
Code:
<body>
<div style="text-align:center;">
<img alt="Misericordia Readers Pre-Primer_Page_06" src="../Images/1.png"/>
<h1>Little Ned</h1>
</div>
<p class="s1">Wake up, little Ned.</p>
<p class="s1">Wake up.</p>
<p class="s1">Wake up.</p>
<p class="s1">Little Ned wakes up.</p>
<div style="text-align: center;">
<img alt="Misericordia Readers Pre-Primer_Page_07" src="../Images/2.png"/>
</div>
<p class="s1">Ned called, “Mother, Mother!</p>
<p class="s1">Come up, Mother.”</p>
</body>
Code:
body, div, p, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
.s1 {
font-size: 1em;
text-indent: 15px;
line-height: 1.2;
}
EDIT: I changed the actual images to see what happens, so change back to your images.