Ooph… now, all the annoying animated “how not to build a website” gif nonsense aside, your HTML is a total disaster. Tables on non-tabular data, missing headings and nonsensical heading roders, clearing div, endless unnecessary div, presentation inlined in the markup, id’s on elements for no good reason, empty title attributes on elements that shouldn’t need title in the first place, lists around things that aren’t lists, non-breaking spaces and paragraphs doing padding’s job, content placement likely to trip rendering errors, paragraphs around non-paragraph elements, tags like MARQUEE that have NO BUSINESS on a modern website (much less in a STRICT doctype!) and is placed incorrectly (since the only thing that can come after a <ul> is <li> or </ul>)… even the paragraphs around non-paragraph elements…
… and that’s before we talk the illegible color contrasts and fixed metric fonts sized below accessibility norms.
There is more of 1998 to this page than 2011.
While SP’s suggestion of position:relative is a decent silver bullet fix, CSS is only as good as the HTML it’s applied to, and this HTML… and the CSS is just worse, since you’re declaring values you don’t need (block on a float?) and the same values more than once, probably because you’ve stuffed everything on single lines into an illegible mess.
So first order of business should be to pitch all that and redo the HTML… If I was writing that page, the HTML would probably look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
RPM NETCOM
</title>
</head><body>
<div id="pageWrapper">
<h1>
RPM NetCom<br />
<small>Real Power of Money</small>
<span><span><span><span>
<!-- image replacement sandbags -->
</span></span></span></span>
</h1>
<div id="content">
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Our plan</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="achievers">
<h2>Achievers</h2>
<ul>
<li>Nikhil...........…</li>
<li>Akhil..........…</li>
<li>Dinesh........…</li>
<li>Bunty..........…</li>
</ul>
<!-- #achievers --></div>
<div id="awards">
<h2>Awards</h2>
<img
src="images/3.gif"
alt="Awards"
width="230"
height="178"
class="plate"
/>
<!-- #awards --></div>
<div id="products">
<h2>Products</h2>
<img
src="images/prdt.gif"
alt="Products"
width="148"
height="172"
class="plate"
/>
<!-- #products --></div>
<!-- #content --></div>
<div id="sideBar">
<h2>Company News</h2>
<ul id="homeNews">
<li>
June 23, 2011<span> - </span>
<a href="#">
Launching of RPMNETCOM website …
</a>
</li><li>
June 25, 2011<span> - </span>
<a href="#">
Seminar for introduction of the company
…
</a>
</li><li>
June 25, 2011<span> - </span>
<a href="#">
Meeting with new consultants…
</a>
</li><li>
June 26, 2011<span> - </span>
<a href="#">
Board Meeting for discussion on future Prospects…
</a>
</li>
</ul>
<!-- #sideBar --></div>
<div id="footer">
Copyright 2011.
<a href="#">Privacy Policy</a> |
<a href="#">Terms of Use</a>
<!-- #footer --></div>
</body></html>
Though it would lose those marquee’s since that’s NOT something that should be done on a website, the tag was NOT accepted into the specification for a REASON. Those fixed height table areas would also probably need a major restyling getting rid of the border and other bits – which would be an improvement.
Really everything else goes in the CSS – if I have time later, I’ll toss together how I’d handle that… for now, notice that it’s saying for the most part what things are, and reduces it from 6.3k of HTML to 2.3k… so basically 70% of your HTML was just unnecessary bloat.