HTML - <p> Tag Incompatibilities

In one of my web site , I am using <p> tag inside <span> tag.
It works fine on IE, Opera, FireFox & Google chrome. On other browsers like netscape, seamonkey and safari paragraph shows in just single line ignoring the values specified in <span>. I have initially wrote this with <div> tag , but it is still not working.


Troubling Code which is in php file :

echo '<div style="position:absolute;z-index:2;left:50px;top:425;width:350;height:50">';

echo '<fieldset>';
echo '<Legend id="entry"><b>About CA Shiksha</b></Legend>';
echo '<p>CA Shiksha is an initiative to transform the learning. We are taking you from e-learning to i-learning (interactive learning), providing you comprehensive package of e-learning + video lectures + mock tests + assessment report + quick revision notes making it lot easier for you to grasp, understand and deliver. Now you can learn at your leisure anytime</p>';
echo '</fieldset>';
echo '</div>';

Hi All,

Being a frustrated businesswoman today, I may come across as a little frazzled, and I could spend the next half an hour complaining about certain company's not adhering to standards, but I won't.

The problem is this: I have a website which displays correctly in Firefox 3.6.3 but just won't display correctly in IE 7 (and I haven't even tried other flavours of IE). From searching, I understand that it is to do with the box model problem i.e., different ways of calculating box sizes depending on browsers. I have tried a variety of solutions found online but nothing seems to work. The suggestion seems to be that specifying a doctype will resolve any incompatibilities but that doesn't seem to work either. I have created a special page which I am free to 'play' around with, in an attempt to solve this but all of my attempts so far have failed. The page is at www.ashleyschoolofmotoring.co.uk/index2.html - in Firefox, this displays correctly but in IE the left index is out of position along with some other problems. I have simply tried to resolve the issue with the left index up to now.

I haven't posted the code for index2 here as it can be accessed via the page itself. However, I have posted the relevant part of the css file that I am using below.

If anyone can throw any light on what I need to do to get the pages to look the same, I will be forever in your debt...

Thanks

Em

Code:

.main           {float: left;  width: 930px; height:470px; text-align:justify; font-size:12pt; font-family:"Arial";}
.main-index     {float: left; width: 100px; color:#7153a0; }
.main-index ul  {padding-left:10px; list-style-type:none; }
.main-index li  {padding-right:0px; padding-bottom:10px; text-align:center; }
.main-centre    {width: 700px ; height:450px; position: absolute; top:110px; left: 120px; padding-top:10px; padding-right:10px; overflow:auto; }
.main-right     {float: right; width: 80px; padding-top:0px;  }
.main-right ul  {padding-left:0px; list-style-type:none; }
.main-right li  {padding-right:0px; padding-bottom:30px; text-align:center; }