ansaurus

Question

CSS Div, need it to work in Firefox and Safari

Answer 1

+5 A:

It would help greatly if you could point us to a live version of the page. There's a lot of things that can affect the display of pages in browsers (standards or quirks rendering mode, doctypes, valid/invalid HTML and CSS, etc.)

As it stands, there's not enough information in your question to let people accurately pinpoint the source of your problem.

Also, keep in mind that Firefox and Safari are most likely rendering your page "correctly". But because you've been coding it for IE, you've probably coded your CSS to make it look good in IE at the expense of standards-compliant browsers.

EDIT: With the properly formatted code above, I refactored your code a bit. When writing HTML, it's a considered a best-practice to use class and id attributes that describe what it's content is, not what it looks like. So "header" instead of "top" and "content" instead of left.

This simpler code should also make it easier to debug.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
  <div id="content">
    <div id="left_top">
      <h2>Water. Pure and Simple</h2>
      <p>United Distributors, Inc. is the region’s top   provider of Water Treatment Solutions and Supplies. For over 30 years, you have   trusted us to provide the latest in <a href="brandpg.html" target="_self">water treatment</a> technology and related products. We have met   your needs through a broad range of products that provide you the purest of   water for use in your <a href="home_solutions.html" target="_self">Home</a>, <a href="office.html" target="_self">Office</a>, <a href="food_service.html" target="_self">Restaurant /Food Service</a> and <a href="medical.html" target="_self">Medical Facilities</a> and <a href="commercial_ind.html" target="_self">Commercial/Industrial   facilities</a>. </p>
      <p>Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
      <p>Let us help you enjoy the healthy benefits of safe, pure water.</p>

      <h2>Our Promise to You...</h2>
      <p>We are committed to market innovative and creative <a href="brandpg.html" target="_self">water treatment</a> and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
    </div>
    <div id="left_bot">
      <h2 class="blue">Our Guarantee</h2>
      <p> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
    </div>
  </div>
  <div id="images">
    <img src="fla.gif" width="430" height="380" />
    <img src="bbb_logos.gif" width="430" height="160" vspace="50" />
  </div>
  <div id="footer">Content for  id "bottom" Goes HereHereContent for  id "left_bot" Goes HereContent for  id "left_bot" Goes HereContent for  id "left_bot" Goes Here </div>
</div>
</body>
</html>

CSS:

@charset "utf-8";

body {
    background-color: #EEEEE4;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
}
h2 {
    font-size: 15px;
    line-height: 10px;
}
h2.blue {
    color: #000066;
}
a:link {
    font-size: 12px;
    font-weight: bold;
    color: #003366;
    text-decoration: underline;
}
a:hover {
    font-size: 12px;
    font-weight: bold;
    color: #009900;
    text-decoration: underline;
}


#wrap {
    background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
    margin: 0px auto;
    padding: 0px;
    width: 800px;
}
#header {
    margin: 0px auto;
    padding: 0px;
    width: 800px;
}
#content {
    margin: 0px;
    padding: 0px;
    float: left;
    width: 370px;
    background: url(none);
}
#left_top {
    background: #D9DAD5;
    margin: 0px;
    padding: 15px;
    width: 340px;
}
#left_bot {
    margin: 0px;
    padding: 15px;
    width: 340px;
}


#right {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 430px;
}
#footer {
 clear: both;
    background: #000000;
    width: 770px;
    margin: 0px;
    padding: 15px;
 color: white;
}

Tyson 2009-02-05 20:40:50

Yep. Testing in standard browsers before IE is the way to do things.

Rich Bradshaw 2009-02-05 20:42:35

good job cleaning that up

Slee 2009-02-05 21:21:19

Answer 2

+2 A:

Ellen B 2009-02-06 01:54:16

ansaurus

tags:

views:

answers:

CSS Div, need it to work in Firefox and Safari

HTML

CSS

related questions