The old Firefox IE space problem

Question

HI all. Just getting back into CSS after looog abscence. I have the problem of text/paragragh spacing not the same in IE and Firefiox, Have a image as background for div and tryng to place text correctly. Just a list of text as a menu. I've attched a zip with the page. If ayone could take a look, I don;t know where to start. Maybe the  <br> arent a good idea? Tried absolute as well .Exhausted Google ideas
Thanks so much. Really appreciate.
<div id="sidebar1">
    <h3 class="menuLeftITem"><a href="vtrPackage.html" target="_self"> <br />
      VTR Packages</a><br />
      DVRs/VCRs<br />
      SD Monitors<br />
      HD Monitors<br />
      Accessories<br />
      Digital Switchers<br />
      Wireless Systems<br />
      Printers<br />
      Video Camera Packages<br />
      Hd Cards Storage<br />
      Camera Accessories<br />
      Video Projectors &amp; Screens <br />
      <br />
      <br />
      <br />
      All <br />
      <br />
      <br />
      All <br />
      <br />
      <br />
      All </h3>
    <div class="downloads" id="downloads">
      <p><br />
        <span class="dowloadLink">download</span> <span class="menuLeftITem"><a href="../PDF/prices.pdf" target="_blank">Rental Rate Sheet</a></span><br />
        <span class="dowloadLink">download</span><span class="menuLeftITem"> <a href="../PDF/rental Agreement.pdf" target="_blank">Policy and Rental Agreement</a></span><br />
        <span class="dowloadLink">download</span> <span class="menuLeftITem"><a href="../PDF/CC.pdf" target="_blank">Credit Card Authorization</a></span><br />
        <span class="dowloadLink">download </span><span class="menuLeftITem"><a href="../PDF/w9.pdf" target="_blank">W-9 Form</a></span><br />
      </p>
      <p> </p>
    </div>
    <h3 class="menuLeftITem"><br />
    </h3>
    <!-- end #sidebar1 -->
  </div>
.twoColHybLtHdr #sidebar1 {
float: left;
width: 265px; /* since this element is floated, a width must be givenT THIS CONTROLS BOX PLACEMENT*/
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px; /* top and bottom padding create visual space within this div  */
background-image: url(images/videoramaWhite2SideMenu.png);
margin-top: 10px;
height: 550px;
background-repeat: no-repeat;
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 21px; /* the left and right margin should be given to every element that will be placed in the side columns THIS CONTROLS TEXT*/
margin-right 0px;
padding-top:10px;
text-decoration: none;
text-transform: none;
line-height: 16px;
margin-top: 20px;

Answer 1

YUDI don't believe you'll really ever get the alignment correct the way you have coded that sidebar.  Trying to align text by using <br> spacing isn't goign to work reliably.
What I would do in this case, would be to eliminate the background image altogether.  I would use a heading tag H2 or h3 and give it a green background color (as used in the image).  Then use an unordered list to for the menu items.  You can give the sidebar a background as per the bg color in the current image.
The code would then look something like:
<h3>Video</h3>
<ul>
<li>VTR Packages</li>
<li>DVRs/VCRs/</li>
<li>SD Monitors</li>
<li>Hd Cards Storage</li>
</ul>
<h3>AUDIO</h3>
<ul>
<li>All</li>
</ul>
<h3>NEXT HEADING</h3>
and so on etc etc.,
You would then style the headings as needed to resemble the image you are using and style the lists <li> as needed as well.
This would ensure that the spacing would be the same in all browsers.
That's only a quick example, but I'm sure you get the idea