Member Avatar for davy_yg

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.

  • 2 Contributors
  • 1 Reply
  • 109 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

Short diagnosis: the page is using deprecated HTML (<font>) and invalid CSS declarations, so the browser is falling back to other rules and you get unexpected sizes. As said, use font-family and font-size (or a correct font shorthand). The HTML size attribute on <font> is obsolete and uses a legacy 1–7 sizing system (values like 14 are invalid and can produce huge results); replace it with CSS instead (MDN: <font> element).

Example of a clean fix (use classes rather than <font> or align attributes):

<!-- HTML -->
<p class="post-meta">
  <img src="images/pic1.png" alt="picture1" style="float:left; margin-right:8px;">
  <span class="post-title">Lorem ipsum</span> - 14 Jan 2011
</p>

<!-- CSS -->
.post-meta { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 1.4; }
.post-title { color: red; font-size: 14px; }

Extra troubleshooting steps:

  • Inspect the element with DevTools (right-click → Inspect) and check the Computed styles to see which rule sets font-size. Chrome docs: https://developer.chrome.com/docs/devtools/.
  • Fix invalid declarations: a shorthand font must include a size and family, e.g. font: 14px/1.4 Arial, sans-serif;. An invalid font declaration will be ignored, and non‑existent properties like size: are ignored entirely (MDN: font shorthand & font-size).
  • Remove unnecessary <br> after </p> and deprecated ALIGN attributes; use CSS for layout and spacing.

Note on accessibility: 10px is very small for many users — consider 12px+ or use rem/em so text scales with user settings.

Member Avatar for hericles

size isn't a CSS property or is font either. You would ned to use font-family and font-size in your CSS file for these to work. Why the mix of inline and external styles? Everything can easily be put in your CSS file.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.