I have a webpage and files that show up fine in the latest version of IE. Need it to show up the same in the latest version of Firefox and Safari.
The webpage and supporting files are archived for review. I'll paste the page below followed by the CSS. It is easier to see with images.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="top"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="left">
<div id="left_top">
<div id="left_grey">
<h1 class="lb_blk_hdr">Water. Pure and Simple</h1>
<p class="text">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" class="text">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" class="text">Home</a>, <a href="office.html" target="_self" class="text">Office</a>, <a href="food_service.html" target="_self" class="text">Restaurant /Food Service</a> and <a href="medical.html" target="_self" class="text">Medical Facilities</a> and <a href="commercial_ind.html" target="_self" class="text">Commercial/Industrial facilities</a>. </p>
<p class="text">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 class="text">Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h1 class="lb_blk_hdr">Our Promise to You...</h1>
<p class="text">We are committed to market innovative and creative <a href="brandpg.html" target="_self" class="text">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>
<div id="left_bot">
<p><span class="lg_blue_hdr">Our Guarantee</span></p>
<p class="text"> 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="right">
<div id="fla"><img src="fla.gif" width="430" height="380" /></div>
<div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div>
</div>
<div id="bottom">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: #EEEEE4;
}
.lg_blue_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000066;
line-height: 10px;
}
.lb_blk_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
line-height: 10px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
a.text:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a.text:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
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 auto;
padding: 0px;
width: 800px;
}
#top {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#left {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: D9DAD5 repeat-y 50% 0%;
margin: 0px;
padding: 0px;
width: 370px;
}
#left_grey {
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;
}
#bottom {
background: #000000;
float: left;
width: 770px;
margin: 0px;
padding: 15px;
}
-
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
classandidattributes 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"> <html xmlns="http://www.w3.org/1999/xhtml"> <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; }Rich Bradshaw : Yep. Testing in standard browsers before IE is the way to do things.Slee : good job cleaning that up -
Hi there --
I created an HTML file, added the CSS, and created dummy images to replace the ones that should be there. Here's a screenshot of the Mac Firefox 3.0.6 overlaid on the IE 7:
http://s622.photobucket.com/albums/tt302/ellen898945/?action=view¤t=Firefox_IE.png
The file looks almost exactly the same to me, using the code that you sent, minus some text rendering differences. Can you provide a better description of the problem you're having, or provide visual examples? You're not using any CSS that's particularly tricky, or which is poorly-supported on any of the major browsers; it's hard for me to understand what your concern is.
Generally you have to accept that you don't have full control over the pages that you're sending out. You could have a user who sets their text size larger or smaller than the default, or who always sets the page background to white and ignores your colors. If the rendering is off by a couple of pixels in different browsers on different operating systems, it's not a big deal. And realistically, no users are going to (a) open the same page in two different web browsers side by side (b) notice that they're a tiny bit different and (c) care.
0 comments:
Post a Comment