CSS in Explorer vs. Mozilla

Well, I'm now totally bald after pulling my hair out over this one. I've
got a site, done entirely with CSS and html, and it looks perfect in
explorer. The layout looks like this:

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

| |
| |
Div 1 | Div 2 |
| |
| |
--------------------------------------------------
| |
| |
Div 3 | Div 4 |
| |
| |
--------------------------------------------------

In explorer it renders just fine, with all boxes looking even and lining up
properly. Each div holds different text or graphic content.
However, in Mozilla, the boxes are all distorted, and don't display the
proper number of pixels that I had specified in the css. They look like
this:

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

|

|

Div 1 | Div 2

|

|

--------------------------------------------------------------
|

|

Div 3 | Div 4

| Text Text Text
Text |
| Text Text Text
Text |

--------------------------------------------------------------
Text Text Text
Text
Text Text Text
Text


All jacked up. I'll post my CSS if you are interested in seeing that, I
supose it may help. If anyone has any ideas I'de love to hear. Mozilla
dosen't seem to be very good with CSS. I will say I am a new Mozilla user.
I'm used to designing with Explorer. Also, the content is dynamically
created with PHP so I can't control the height of the div, and in Mozilla
the text will just break right out of the div, instead of expanding the div,
see Div 4 above.

Thanks for any help.

-g-

The site is at: www.aperfectnumber.com

Look at it in IE, then with Mozilla. The CSS is below:


body {
background-color: #999999;
}
..topleft {
margin: 0px;
padding: 5px 5px 5px 25px;
height: 366px;
width: 478px;
position: absolute;
visibility: visible;
left: 0px;
top: 0px;
background-color: #FFFFFF;
background-image: url(images/setlistjpg.jpg);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #000066;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
z-index: 1;
border-top: 1px solid #000066;
border-right: 1px solid #000066;
border-bottom: 0px solid #000066;
border-left: 1px solid #000066;




}
..topright {
margin: 0px;
padding: 0px;
height: 366px;
width: 476px;
position: absolute;
visibility: visible;
left: 475px;
top: 0px;
background-color: #FFFFFF;
background-image: url(images/splash.jpg);
z-index: 2;
border-top: 1px solid #000066;
border-right: 1px solid #000066;
border-bottom: 0px solid #000066;
border-left: 1px solid #000066;



}
..bottomleft {
margin: 0px;
padding: 0px;
height: 400px;
width: 475px;
border: 1px solid #000066;
position: absolute;
left: 0px;
top: 366px;
z-index: 3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000066;
letter-spacing: normal;
word-spacing: normal;
text-align: left;
background-color: #FFFFCC;





}
..caseys {
position: absolute;
right: 10px;
bottom: 13px;
}
..navpos {
position: absolute;
left: 0px;
top: 0px;
}
..bottomright {
margin: 0px;
padding: 0px;
border: 1px solid #000066;
position: absolute;
z-index: 4;
left: 475px;
top: 366px;
background-color: #FFFFFF;
height: 400px;
width: 473px;
background-image: url(images/apn4.jpg);



}
..insidebottomleft {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000066;
background-color: #FFFFCC;
margin: 0px;
padding: 10px 10px 5px 5px;
height: 358px;
width: 473px;
position: absolute;
left: 2px;
top: 34px;
background-image: url(images/yellow.jpg);

}
..insidebottomright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000066;
margin: 0px;
padding: 10px;
height: auto;
width: 458px;
position: absolute;
left: 6px;
top: 35px;
background-repeat: repeat;
background-position: center center;
background-attachment: scroll;



}
..footer {
height: 40px;
width: 952px;
padding-top: 12px;
padding-bottom: 5px;
padding-left: 15px;
border: 1px solid #000066;
position: absolute;
left: 0px;
top: 766px;
background-color: #FFFFFB;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;


}
..formDiv {
padding: 0px;
height: auto;
width: auto;
position: absolute;
left: 130px;
top: 2px;
z-index: 10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;



}
..rightfloat {
float: right;
}
..centeredtext {
text-align: center;
}

..insidebottom {
padding: 10px;
height: auto;
width: 948px;
position: absolute;
left: 0px;
top: 38px;
}-g-"Greg" <greg (AT) aperfectnumber (DOT) com> wrote

Well, I'm now totally bald after pulling my hair out over this one. I've
got a site, done entirely with CSS and html, and it looks perfect in
explorer. The layout looks like this:

--------------------------------------------------
| |

| |

| Div 1 | Div 2 |
| |

| |

--------------------------------------------------
| |

| |

| Div 3 | Div 4 |
| |

| |

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

In explorer it renders just fine, with all boxes looking even and lining
up
properly. Each div holds different text or graphic content.
However, in Mozilla, the boxes are all distorted, and don't display the
proper number of pixels that I had specified in the css. They look like
this:

--------------------------------------------------------------
| |
|
| |
|
| Div 1 | Div 2
|
| |
|
| |
|
--------------------------------------------------------------
| |
|
| |
|
| Div 3 | Div 4
|
| | Text Text
Text
Text |
| | Text Text
Text
Text |
--------------------------------------------------------------
Text Text Text
Text
Text Text Text
Text


All jacked up. I'll post my CSS if you are interested in seeing that, I
supose it may help. If anyone has any ideas I'de love to hear. Mozilla
dosen't seem to be very good with CSS. I will say I am a new Mozilla
user.
I'm used to designing with Explorer. Also, the content is dynamically
created with PHP so I can't control the height of the div, and in Mozilla
the text will just break right out of the div, instead of expanding the
div,
see Div 4 above.

Thanks for any help.

-g-

Looked at your website with Internet Explorer, Firefox (Mozilla) and
Safari - everything looks the same and works great in all three.
DisPlaced

Thanks for taking the time DisPlaced. I really can't figure this out then.
On my screen IE looks ok, mozilla breaks. Does screen resolution have
anything to do with it? Again, I really appreciate your help.

-g-

Ok, I figured it out, so maybe other people with this problem might be able
to solve it. For some reason, Mozilla displays the "Padding" feature of CSS
differently than IE. Where IE just pads the edges of a "box", Mozilla
actually adds to the square to keep the padded area the same dimensions as
the box. So if you wanted a box that was 50x50 and you wanted 10 px of
padding around the whole thing, it would increase the actual dimensions to
60x60, to keep the original box 50x50 with ten px of padding.

-g-


"DisPlaced" <displaced (AT) invalid (DOT) com> wrote

In article <kMudnQ04LZU8YXfcRVn-iA (AT) comcast (DOT) com>,
"Greg" <greg (AT) aperfectnumber (DOT) com> wrote:

Looked at your website with Internet Explorer, Firefox (Mozilla) and
Safari - everything looks the same and works great in all three.
DisPlaced

Thanks for taking the time DisPlaced. I really can't figure this out
then.
On my screen IE looks ok, mozilla breaks. Does screen resolution have
anything to do with it? Again, I really appreciate your help.

-g-

Sorry - I'm not an expert. My screen resolution is set at 1152 x 870 if
that helps.

DisPlaced

On Mon, 17 Jan 2005 10:29:11 -0800, "Greg" <greg (AT) aperfectnumber (DOT) com>
wrote:

Ok, I figured it out, so maybe other people with this problem might be able
to solve it. For some reason, Mozilla displays the "Padding" feature of CSS
differently than IE. Where IE just pads the edges of a "box", Mozilla
actually adds to the square to keep the padded area the same dimensions as
the box. So if you wanted a box that was 50x50 and you wanted 10 px of
padding around the whole thing, it would increase the actual dimensions to
60x60, to keep the original box 50x50 with ten px of padding.

The padding difference has been a known incompatibility for several
years. The bummer of it is: it's IE that's doing it wrong, not
Mozilla. There are a few work-arounds available on the net. Sorry but
I don't have any links handy right now, but use something like "css ie
mozilla work around" for keywords in Google and you'll find something.