index.html
<div id="content">
<div id="main">
<h3>Latest News</h3>
<p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />
<div class="post">
<p><img src="images/pic1.png" ALT="picture1" ALIGN=LEFT><font face="Arial" color="red" size="14">Lorem ipsum</font>- 14 Jan 2011<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta diam in quam consectetur elementum. Vestibulum iaculis pellentesque mauris, non sodales erat egestas nec. Proin sed elit sed ligula ullamcorper adipiscing. Quisque pellentesque sapien odio. Phasellus nec elit ligula. Ut tempus urna ut lectus ullamcorper imperdiet. Quisque vitae massa sem, sed cursus sapien. Ut mi lorem, iaculis non ultricies vitae, sodales porttitor... <a href="#">read more ></a></p>
<p style="border-bottom: 2px dotted #FF0000; width: 700px;"></p><br />
style.css
#content #main .post {
position: relative; margin: 0 0 60px 0; padding: 0 0 0 0; overflow: hidden;
}
#content #main .post h2 {
float: left; margin: 0 0 10px 75px;
font: 24px Lucida Grande, Lucida Sans Unicode, Helvetica, Sans-Serif; letter-spacing: normal;
}
#content #main .post p {
font:Arial, Helvetica, sans-serif; size: 10px;
}
1) <font face="Arial" color="red" size="14">Lorem ipsum</font> suppose to be 14 size. but it does not, the font turns extremely large font with red color.
2) The paragraph suppose to be 10px size but in actual it does not. The print appears like 12 px.
Why is it ?
Thanks.