compatibilitie mozilla firefox

  • Thread starter Thread starter Tom Pepper Willett
  • Start date Start date
Firefox and IE interpret CSS differently when it comes to
width/padding/margins/borders. IE, when in quirks mode, thinks the padding
and borders are included WITHIN the width; Firefox thinks they are OUTSIDE
the width.

See a thorough explanation here:
http://www.ilovejackdaniels.com/css/box-model/ and here:
http://www.info.com.ph/~etan/w3pantheon/style/abmh.html

So, you have to write your CSS to accommodate both interpretations.

Try using this in your .contentwide in place of your width=650px. Yes, it
looks really weird, but it takes advantage of the idiosyncracies of the
various browsers.

width: 610px !important;
width /**/:650px; /* BOX MODEL HACK */
....Brenda
 
Thanks

That straightened out one thing. This seems like a pain, that every little
thing is messed up. Now the main photo is gone. css below

You mentioned quirks mode. Can I change that. or is that a frontpage thing?
Can I just delete from the top?

Thanks

JJ

#mainimage {
background-color: #FCF091;
background-image: url('images/Main_Marotta.jpg');
height: 240px;
width: 650px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
/*border-left: 1px solid #000000;*/
/*border-right: 1px solid #000000*/
padding: 4px 0px;
}
 
Add this to #mainimage in the CSS:

clear: both;

Do you use Firefox? If so, get the Web Developer Toolbar (go to Tools --
Extensions --> Get More Extensions). With that, you get some tools to edit
CSS on the fly, outline block elements, all sorts of stuff that helps to
track down problems.

Good luck,

Brenda
 
About the quirks mode:

If you have a good doctype at the top of your html, IE 6 will work in standards mode, which means it follows (most) of CSS correctly, especially the box model problems (where the padding and borders are supposed to OUTSIDE the width of the box). If your doctype is wrong, IE defaults to the quirks mode, which does the box model wrong.

Try this for your doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Here's a link to valid doctypes that you can cut-and-paste as needed: http://www.w3.org/QA/2002/04/valid-dtd-list.html

The hardest part about web development, for me at least, is handling all the idiosyncracies of all the different browsers. What looks great in IE6 might look awful in Firefox, Opera, Safara, IE Mac, etc. It takes a long time to get familiar with what works in which browser, and how to handle all the differences.
....BrendaT
 
Back
Top