Problem with positioning of DIV containers and browser compatibility?

[twebman84]

The site I'm working on is here: http://www.bayareacontracting.net/beta.php

 

I'm using DIV containers to position the content on the screen. The Site looks good in IE, but breaks in Firefox and Safari.  Below is the CSS for the container that is out of whack:

 

#meat
{
position: absolute;
visibility: show;
left: 493px;
top: 280px;
width: 538px;
background: url(/graphics/meat-bg.jpg) repeat-y;
text-align: left;
line-height : 20px;
height: 269px;
padding-left: 35px;
padding-top: 0px;
padding-right: 60px;
padding-bottom: 0px;
}

 

 

The code in my PHP file:

 

<div id="meat">
      <h1>Bay Area Contracting</h1>
      <h3>Framing your dreams, building your reality</h3>
      <font class="primary">We are a family-owned business, and "family" is the essence of everything we do. Whatever the size of your family - whether just two of you or several members - we understand how important your home is to everything that happens in your life. That's why we invest all of our time and effort into building your home around you. Our relationships with our clients can be described in three words: personable, honest and flexible. Our dedication to your satisfaction is unconditional, and our passion for professionalism and quality is complete. <br />You can feel confident in choosing Bay Area Contracting to create an environment where you love to spend time, and where memories are made.</font>
      </div>

 

I know this is a somewhat common problem, but I can't seem to find the solution.  Help would be greatly appreciated.

[sticks464]

The styling of the div is not the problem I don't think. You didn't show all the code so it's just a guess. Absolute positioned elements must be contained in a parent container that is relatively positioned or the absolutely positioned element will position off the body element which is the top left corner of your screen.

 

Your css could be cleaner by using shorthand

#meat
{
position: absolute;
left: 493px;
top: 280px;
width: 538px;
background: url(/graphics/meat-bg.jpg) repeat-y;
text-align: left;
line-height : 20px;
height: 269px;
padding-top: 0 60px 0 35px;
}

 

Font is used as a styling attribute not an html tag.