Adam, here is the css and xhtml to this previous message. Website is at http://www.mcn.org/1/mendoparks/Index.htm

"I need to know how to code my pages so that they render properly in FF. I'm using XHTML and CSS. Thanks."

body {
margin: 0px 0px 20px 20px;
font: normal 10pt/12pt Verdana, Arial, sans-serif;
color: #333;
background-color: #E3F1FB;
background-image: url(picture/whiteblock.jpg);
background-repeat: repeat-y;
background-position: 20px 0px
}
#nobg {
background-image: none;
width: 100%;
}
#page {
width: 45%;
padding: 6px 6px 6px 0px;
background-color: transparent
}
#header {
float: left;
margin: 0px 0px 0px 0px;
}
#subhdr
{
float: left;
margin: 0px 0px 0px 0px;
}
#maincontent {
font: 500 0.95em/3em Verdana, Arial, sans-serif;
text-align: left;
width: 210px;
float: left;
margin: 0px 0px 0px 0px;
border: none;
padding: 0px 0px 0px 0px;
background-color: transparent
}
#othercontent
{
font: 500 0.95em/3em Verdana, Arial, sans-serif;
text-align: left;
width: 210px;
float: left;
margin: 0px 0px 0px 0px;
border: none;
padding: 6px 3px 6px 12px;
background-color: #afd6f3
}
#main {
width: 425px;
height: *;
position: absolute;
margin: 0px 0px 0px 10px;
padding: 6px 6px 6px 6px;
background-color: transparent
}
.submain{
width: 465px;
height: *;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: transparent
}
#finish {
width: 220px;
height: 200px;
float: left;
bottom: 10px;
margin: 10px 0px 0px 0px;
padding: 5px 5px 0px 0px;
background-color: transparent
}
#bear {
width: 195px;
position: absolute;
margin: 83px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: transparent;
border: 0px
}
.footnotes
{
margin: 0px 0px 5px 0px;
font: 7pt/8pt Arial, sans-serif;
color: #669;
background-color: transparent }
.va
{
vertical-align: super;
line-height:0;
font: 6pt Arial, sans-serif;
}
h1 {
margin: 20px 0px 15px 0px;
padding: 0px 0px 6px 0px;
font: 600 2em/1.1em Arial, sans-serif;
color: #336;
background-color: transparent;
text-shadow: 5px 5px 5px;
border-bottom: thin groove #997217;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px 0px 0px 0px;
font: bold 10pt Arial, sans-serif;
color: #333366;
background-color: transparent;
text-transform: uppercase;
}
img {
border: none;
}
.leftfloat {
float: left;
width: 54px;
height: 54px;
margin: 1px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none
}
.rightfloat {
float: left;
padding-right: 6px;
padding-top: 6px;
padding-bottom: 6px
}
.list
{
font: normal 0.75em/1em Verdana, Arial, sans-serif;
margin: 1px 0px 0px 0px;
padding: 3px 2px 0px 3px;
height: 54px;
width: 156px;
background-color: #afd6f3;
float: right;
}
p {
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 0px;
font: 500 0.95em/1.3em Arial, sans-serif;
color: #669;
background-color: transparent;
}
p.smaller
{
font-size: 10px;
color: black
}
.left {
text-align: right;
}
.bold {
font-weight: bold;
margin: 0px 0px 0px 0px;
}
.bggold
{
background-color: #ffcc66;
margin: 0px 0px 0px 0px;
width: 210px;
padding: 6px 0px 6px 6px;
}
.grbar
{
background-color: #99FF99;
margin: 2px 0px 0px 0px;
width: 150px;
height: 20px;
padding: 3px 0px 2px 2px;
}
.red {
color: #ff0000;
}
.blue
{
color: blue;
}
.small {
margin: 0px 0px 2px 0px;
font: 100 0.75em/1em Arial, sans-serif;
}
#clear {
clear: both
}
p.black {
font-style: italic;
color: black;
background-color: transparent
}
p.justify {
text-align: justify;
}
.underline {
text-decoration: underline;
}
.back {
text-align: center;
text-transform: uppercase
}
.padding
{padding: 3px 3px 0px 3px;
}
hr {
color: #5E4703;
background-color: transparent;
width: 100%;
}
img {
border: none;
}
a:link {
color: #00F;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #5E4703;
background-color: transparent;
text-decoration: none
}
a:active {
color: #f00;
background-color: transparent;
text-decoration: none
}
a:hover {
color: #F0F;
background-color: transparent;
text-decoration: none
}
ol {
font: normal 0.95em/1.3em Arial, sans-serif;
color: #669;
background-color: transparent
}
ul {
marker-offset: 1em;
font: normal 0.95em/1.3em Arial, sans-serif;
color: #669;
background-color: transparent
}
.main ul li
{
marker-offset: 1em;
list-style: none;
marker-offset: -2em;
margin: 2px 0;
}
.nosquare{
list-style: none;
}
li {
font: normal 0.95em/1.3em Arial, sans-serif;
margin: 6px 0;
}
li.black
{color: black;
}
li.nopaddingwbg
{padding: 0px 0;
background-color: #afd6f3
}
li.nopaddingwobg
{padding: 0px 0;
}
li.bgcolor
{background-color: #afd6f3;
padding: 3px;
}
.bottombordr
{border-bottom: solid 24px #afd6f3;
}
.bolder {
font-weight: bolder;
}
.italic {
font-style: italic;
}
.stretch {
font-stretch: extra-expanded;
}
.refbox a:link
{
font-weight: bold;
color: #346784; /* Change the color of the REFERENCE MARK TEXT by changing the number */
background-color: transparent; /* Change the color of the REFERENCE MARK BKGD by changing the number */
margin-right:0.1em;
margin-left:0.1em;
padding: 0.1em 0.3em 0.1em 0.3em;
font-size: 7pt/8pt;
text-decoration: none;
border: none;
}
.refbox a:visited
{
background-color: #cccccc; /* Change the VISITED color by changing the number */
border: none
}
.refbox a:hover
{
background-color: #99CC66; /* Change the ROLLOVER color by changing the number */
border: none
}

----------------------

<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>State Parks of the Mendocino Coast</title>
<link rel="stylesheet" type="text/css" media="screen" href="mendoparks_style.css" />
</head>
<body><a name="top"></a>
<div id="page">


<div id="header"><img src="picture/mendoparkshdr2.jpg" alt="State Parks of the Mendocino District" /></div>
<div id="maincontent">

<h2 class="bold bggold">Parks</h2>
<div><img src="picture/casbchth.jpg" class="leftfloat" alt="Caspar State Beach" /></div><div class="list"><a href="caspar.htm" title="Link to Caspar Headlands State Reserve and State Beach" target="_new">Caspar Headlands State Reserve and State Beach</a><br /><em>No Camping</em></div>
<div><img src="picture/gnwdbechth.jpg" class="leftfloat" alt="Greenwood State Beach" /></div><div class="list"><a href="greenwd.htm" title="Link to Greenwood State Beach (Elk Visitor Center)" target="_new">Greenwood State Beach</a><br /><em>No Camping</em></div>
<div><img src="picture/hwth.jpg" class="leftfloat" alt="Hendy Woods State Park" /></div><div class="list"><a href="hendy.htm" title="Link to Hendy Woods State Park" target="_new">Hendy Woods State Park</a>
<br /><div><span class="grbar">* <a href="148interpsch.html" title="Link to Hendy Woods Interpretive Schedule" target="_new" >Interpretive Program</a></span></div></div>
<div><img src="picture/jhth.jpg" class="leftfloat" alt="Jug Handle Beach" /></div><div class="list"><a href="jug.htm" title="Link to Jug Handle State Reserve" target="_new">Jug Handle State Reserve</a><br /><em>No Camping</em></div>
<div><img src="picture/makth.jpg" class="leftfloat" alt="Lake Cleone, Mackerricher State Park" /></div><div class="list"><a href="Macker.htm" title="Link to Mackerricher State Park" target="_new">MacKerricher State Park</a><br /><div><span class="grbar">* <a href="interpsch.html" title="Link to Mackerricher Interpretive Schedule" target="_new" >Interpretive Program</a></span></div></div>
<div><img src="picture/ghosth.jpg" class="leftfloat" alt="no picture available" /></div><div class="list"><a href="maill.htm" title="Link to Mailliard Redwoods State Reserve" target="_new">Mailliard Redwoods<br /> State Reserve</a><br /><em>No Camping</em></div>
<div><img src="picture/manth.jpg" class="leftfloat" alt="Alder Creek House, Manchester State Park" /></div><div class="list"><a href="manchst.htm" title="Link to Manchester State Park" target="_new">Manchester State Park</a></div>
<div><img src="picture/brth.jpg" class="leftfloat" alt="Big River Beach, Mendocino Headlands State Park" /></div><div class="list"><a href="mndhdld.htm" title="Link to Mendocino Headlands State Park (Big River Beach)" target="_new">Mendocino Headlands <br />State Park</a><br /><em>No Camping</em></div>
<div><img src="picture/menwth.jpg" class="leftfloat" alt="Lagoon at Mendocino Woodlands State Park" /></div><div class="list"><a href="mwca.htm" title="Link to Mendocino Woodlands State Park (Mendocino Woodlands Camp Association)" target="_new">Mendocino Woodlands State Park</a><br /><em>Group Camping only</em></div>
<div><img src="picture/ghosth.jpg" class="leftfloat" alt="no picture available" /></div><div class="list"><a href="montwd.htm" title="Link to Montgomery Woods State Reserve" target="_new">Montgomery Woods<br />State Reserve</a><br /><em>No Camping</em></div>
<div><img src="picture/nrbchth.jpg" class="leftfloat" alt="Navarro State Beach" /></div><div class="list"><a href="nrrsp.htm" title="Link to Navarro River Redwoods State Park (Paul Dimmick and Navarro Beach)" target="_new">Navarro River Redwoods State Park</a><br /><em>Camping only at Paul Dimmick and Navarro Beach</em></div>
<div><img src="picture/PtCth.jpg" class="leftfloat" alt="Point Cabrillo Lighthouse" /></div><div class="list"><a href="PtCab.htm" title="Link to Point Cabrillo Lighthouse Station" target="_new">Point Cabrillo<br />Lighthouse Station</a><br /><em>No Camping</em></div>
<div><img src="picture/rgth.jpg" class="leftfloat" alt="Russian Gulch State Park" /></div><div class="list"><a href="russian.htm" title="Link to Russian Gulch State Park" target="_new">Russian Gulch State Park</a></div>
<div><img src="picture/sgth.jpg" class="leftfloat" alt="Schooner Gulch Beach" /></div><div class="list"><a href="schooner.htm" title="Link to Schooner Gulch State Beach" target="_new">Schooner Gulch State Beach</a><br /><em>No Camping</em></div>
<div><a href="vandam.htm"><img src="picture/vdth.jpg" class="leftfloat" alt="Van Damme Beach" /></a></div><div class="list"><a href="vandam.htm" title="Link to Van Damme State Park" target="_new">Van Damme State Park</a></div>
<div><img src="picture/wpth.jpg" class="leftfloat" alt="Westport Union Landing Day Use Area" /></div><div class="list"><a href="westport.htm" title="Link to Westport Union Landing State Beach" target="_new">Westport Union Landing State Beach</a></div>
<h2 class="bold bggold">Other links</h2>
<div><img src="picture/cabinth.jpg" class="leftfloat" alt="Cabins at Hendy Woods" /></div><div class="list"><a href="cabins.htm" title="Link to Cabins at Hendy Woods State Park" target="_new">Cabins in State Parks</a></div>
<div><img src="picture/skpawprnt.jpg" class="leftfloat" alt="Skunk paw print" /></div><div class="list"><span class="red">Interpretive Programs for Summer 2006 are closed. See you in 2007!</span><br /><!--• <a href="148interpsch.html" title="Link to Hendy Woods Interpretive Schedule" target="_new" >Hendy Woods State Park</a><br />• <a href="interpsch.html" title="Link to Mackerricher Interpretive Schedule" target="_new" >Mackerricher State Park</a>--></div>
<div><img src="picture/pclath.jpg" class="leftfloat" alt="Image of Point Cabrillo Lighthouse Association logo" /></div><div class="list"><a href="http://www.pointcabrillo.org" title="Link to Point Cabrillo Lighthouse Association" target="_new"> Point Cabrillo Lighthouse Association</a></div>
<div><img src="picture/mapath.gif" class="leftfloat" alt="MAPA logo"/></div><div class="list"><a href="http://www.mendoparks.org" title="Link to Mendocino Area Parks Association" target="_new">Mendocino Area Parks Association(MAPA)</a></div>
<div><img src="picture/mwcath.jpg" class="leftfloat" alt="Image of Mendocino Woodlands Camp Association logo" /></div><div class="list"><a href="http://www.mendocinowoodlands.org" title="Link to Mendocino Woodlands Camp Association" target="_new">Mendocino Woodlands Camp Association</a></div>
<div><img src="picture/resvamer.gif" class="leftfloat" alt="Reserve America Logo" /></div><div class="list"><a href="http://www.reserveamerica.com/client/client_ca.jsp" title="Link to make reservations with our parks" target="_new">Reservations with Reserve America</a></div>



<!--<a href="kidntqz2.htm"><img src="picture/kdqzlogo.jpg" align=left valign=top border=0 hspace=24></a><br> A four page quiz. Fun for the whole family.
<hr><a href="parkmain/index.html"><img src="picture/parkmain.jpg" align=left valign=top border=0 hspace=18>District Equipment Listing for Employees-Password required.</a>&nbsp;This link is not yet available.<img src="picture/pmanimat.gif" hspace=12><br><br>
<ul><a href="OTFWO.htm">On The Fly Work Order form</a>-->

</div>
<div id="main"><h1>STATE PARKS <br />of the Mendocino Coast</h1>
<p class="black italic justify">The Mission of the California Department of Parks and Recreation is to provide for the health, inspiration, and education of the people of California by helping to preserve the state's extraordinary biological diversity, protecting its most valued natural and cultural resources, and creating opportunities for high-quality outdoor recreation.
</p><br />
<p>The Mendocino District is part of the California State Park system. Comprising of 17 parks Mendocino District is located along the California coastline 150 miles north of San Francisco. From Highway 101 at Cloverdale exit to Highway 128 going west. At the juncture of Highway 128 &amp; 1 head north or south on Highway 1 to visit any one of our 13 coastal parks. You may have noticed on your journey by way of Highway 128 to the coast 3 out of 5 of our inland parks: Hendy Woods, Mailliard, and Navarro River Redwoods. Montgomery Woods, another inland park can be visited up the Comptche Ukiah road just south of Mendocino.
</p>
<p>During the winter months Highway 128 may be closed due to flooding from the Navarro River. Before traveling to the Mendocino coast at this time of year check <a href="http://www.fhwa.dot.gov/trafficinfo/" title="Link to Department of Transportation road conditions" target="_new"> road</a> conditions. The <a href="map.htm" target="_new" title="Lind to map of routes to the Mendocino Coast"> Road Map to the Mendocino Coast</a> page will assist you in finding other picturesque routes to the Mendocino coast.
</p>
<p>The Mendocino coast is one of California's rapidly diminishing frontiers in fact and in spirit. This remote and vast country has been harsh to its settlers at times, but it has also allowed time to pursue an independent life close to nature. Here the mountains meet the sea in a precipitous coastline with but few harbors. The ocean is cold and often <span class="red bold">ROUGH &amp; DANGEROUS</span>; the land deeply dissected and heavily forested.
</p>
<p>Steep canyons and narrow valleys carry runoff from the abundant winter rainfall to the sea. Summer fog sends fingers up the valley and spills over low ridges, providing needed moisture for tall redwoods. The few plains have been cleared for farms and ranches, and small towns located generally near rivers or harbors. Road building has been inhibited by the lands rough terrain, forests, and rivers.
</p>
<p>The forests are the basic resource, providing employment in logging and mills. Fishing, long second in the county's economy, has been superseded by wine grape production in the hot interior valleys. Both are finding strong competition from tourism. The region attracts visitors for fishing, hunting, and scuba diving, but probably draws most people to the area between the Navarro and Ten Mile Rivers for the scenic beauty of the coastline, the charm of Mendocino, and the world reknown coast redwoods. Mendocino State Parks, assisted by the <a href="http://www.mendoparks.org" title="Link to Mendocio Area Parks Association" target="_new">Mendocino Area Parks Association</a> provide interpretive programs about the history of the area. To learn more about what the coast has to offer go to the <a href="http://www.mendocinocoast.com/" title="Link to Fort Bragg and Mendocino Coast Chamber of Commerce" target="_new">Fort Bragg-Mendocino Coast Chamber of Commerce </a>web page.
</p>
<hr />
<div id="finish"><p>All rights reserved<br />California State Parks, <br /><a href="distoff2.html" target="_new" title="Link to location of District office">Mendocino District</a><br />
<a href="http://www.mcn.org/1/mendoparks/Index.htm" target="_new">Mendocino State Parks Homepage</a></p>
<p class="small">Photos, maps and art are the property of California State Parks.<br />Use of any of the above is subject to permission by California State Parks.</p>
<p class="small bold"><a href="mailto:twhitney@parks.ca.gov" title="Link to Contact Webmaster">Contact webmaster</a>
|<a href="mailtoarkrec1@mcn.org" title="Link for park information" target="_new">Contact for park information.</a></p>

<p>
<!--<a href="http://validator.w3.org/check?uri=referer" target="_new"><img
src="picture/xmlValid.png"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>&nbsp;<a href="http://www.speakeasy.net/speedtest/" target="_new"><img src="http://www.speakeasy.net/images/spee...ibox_80x15.gif" width="80" height="15" border="0" alt="Speakeasy Speed Test" /></a> -->
</p></div>

<div id="bear"><a href="http://www.cal-parks.ca.gov/" target="_new" title="Link to All California State Parks"><img src="picture/bear.gif" alt="California State Parks link" /></a>
</div>
</div>
</div>
</body>
</html>

"Show us the pages in question that you're having problems with, and we'll help you find the solutions."

There are simply too many problems involving cross-browser compatibility for there to be one general answer to that question. So show us a URL, and we'll show you how to fix it in that instance. You'll repeat as necessary, and eventually you'll be a CSS goddess.

You would be better off coding them to work with a standards-compliant browser, like FF and Opera, FIRST, then kick IE's butt until it too renders properly. Doing it so that it's ok in IE first - which is buggy as heck and non-standards compliant - will drive you around the bend !


The link to her page: http://www.mcn.org/1/mendoparks/Index.htm (from a duplicate post).

You have a LOT of issues there, not the least of which is the use of position:absolute for #main. Take it off. You also need to address IE's broken box model as well as it's many, many bugs. With IE 7 now officially out, some of those will go away, but not all.

Some references you need to read:
http://www.positioniseverything.net/explorer.html

http://css-discuss.incutio.com/?page=FloatLayouts

LNR, I really wish you wouldn't say things like that. They're only partly true.

In many cases, the "bugs" caused by one browser or the other are caused by incorrect code, as in this case.

So there's no point in saying one browser is better than the other because it happens to interpret code correctly. Personally, I tend to believe that there are no bad browsers, just bad code (although personally, I prefer IE to FF for non-code reasons.) It's one of those things that the anti-MS types and standards-types have started which isn't fully justified.

Having said that, this is one of those situations that would take you longer to fix than it would to restart from scratch. So, here's what you need to do:

1) Keep a copy of IE and a copy of Firefox open simultaneously.

2) Start with your "shell". Lay out your three divs (header, left col, right col) as you want them. DON'T put any of the images or text or any of that stuff in yet. Just a simple line saying "header", "left column", "right column" in each div. Check it in BOTH browsers.

3) Fill in one section and check it in both browsers. If you get stuck, ask on the one section. Then move on to the next section. And so on and so on and so on.

In other words, take a big piece and break it down into little pieces. It'll take you 2-3 hours, but it'll take 6-8 the other way.

t's one of those things that the anti-MS types and standards-types have started which isn't fully justified.

C'mon Adam, you can NOT deny the laundry list of bugs that infests IE 6 and below, and a few remaining in IE 7.

I agree poor coding is a big factor, but even when coded correctly, IE will still upchuck a layout while other browsers render correctly. It's deceptive because it LOOKS like they want it to in IE but doesn't work in FF or Opera or Safari.. because they are coding to a BROKEN browser.

Yes, I'm anti-MS AND a standards proponent, I don't see a darn thing wrong with that !!

C'mon Adam, you can NOT deny the laundry list of bugs that infests IE 6 and below, and a few remaining in IE 7.

I've also seen a number of bugs in both FF and the other browsers in the way they handle various things, when I have stacked them side by side and not coded for one first and foremost. (At some point, I'll have to get around to documenting them as I hit them...note to self.)

I'm not saying the bugs don't exist. I'm just saying that other browsers have almost as many, if not as many, bugs in the way they handle certain aspects of things that are coded correctly, and that the arguments tend to be blown out of proportion by those whose opinions are clouded by bias and sentiment. It's not an uncommon thing.

It's really interesting when you talk to people in IT about the issues associated with web browsers. A good number of them (including high-level IT types in large corporations) support IE because it is the only browser that doesn't give them grief.

For example, ask anyone who works in Primus' TalkBroadband department in Canada. Firefox won't even come CLOSE to working with their MyTBB portal properly. And you can come up with a good-code, bad-code argument all you want, but when you've got tens of thousands of customers using IE without issue and maybe a call a day about Firefox, then you wouldn't be especially interested in switching either.

Keep in mind that I'm neither anti- nor pro-MS. There are things about it that I like and things about it that I don't like. I'm indifferent. But I figured out something a long time ago...whille a number of things people say about various issues related to computing are correct, a number of them are distorted by bias, sentiment, and propaganda.

You would be very well served to read anything that is said with an open mind and really think about it. You'd be surprised at how much stuff that is written online about various aspects of computing and web design (SEO, standards, server choices, etc.) is complete and utter crap when you do that.