CSS / HTML in Mozilla
 

I know this may be a little off the beaten path of questions normally posted in this forum. But I'm hoping that someone may still be able to lend a hand.

I have an HTML page that I've been developing and its layout is controlled by CSS. I had it all beautifully laid out in Mozilla and was working the CSS to get it to look nice in both Moz and IE. When I added a style element of
border: 1px solid black

however, a DIV in Moz jumped from its position up about 40 pixels. And the text contained in the DIV stayed in its original position. Can anyone help to tell me what this may say about my CSS? Why would the addition of a border cause a DIV to be moved in such a way?

Thanks,
jpbarto

It seems odd and I have never seen it before. What version of Mozilla are you using?

Any chance of seeing an example piece of code.

The Mozilla version is 1.5.

And for the following HTML:
<div id="content">
&nbsp;&nbsp;<div id="contentheader">
&nbsp;&nbsp;&nbsp;&nbsp;News
&nbsp;&nbsp;</div>
&nbsp;&nbsp;<div class="content-item">
&nbsp;&nbsp;...
&nbsp;&nbsp;</div>
</div>

With the following CSS:
#contentheader {
&nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contentheader-bg.gif) no-repeat top left;
&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 35px;
&nbsp;&nbsp;&nbsp;&nbsp;height: 36px;
&nbsp;&nbsp;&nbsp;&nbsp;width: 560px;
&nbsp;&nbsp;&nbsp;&nbsp;}

the text displays beautifully and just where it should in relation to the DIV background.

However with the following CSS:
#contentheader {
&nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contentheader-bg.gif) no-repeat top left;
&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 35px;
&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid black;
&nbsp;&nbsp;&nbsp;&nbsp;height: 36px;
&nbsp;&nbsp;&nbsp;&nbsp;width: 560px;
&nbsp;&nbsp;&nbsp;&nbsp;}

it just goes nuts with the background 40 pixels above the text and the text outside of the border (outside of the DIV??). It just seems really odd that the addition of a border would cause location changes. I hate to say it but perhaps a coding bug in Mozilla? (I haven't checked the site in Firefox, Galeon, etc to see if this error occurs elsewhere, only Mozilla and IE).

Thanks for the interest in this problem,
jpbarto

Well I can't see anything odd when I test it in Mozilla 1.6 - the only thing I can spot about your code is that the id is "content-header" and in css you specify "contentheader".

yeah, that's a typo from entering it into the site. Perhaps once the site has been released I'll post up the URL so that perhaps people could download the full html or css and give me a better idea of what is wrong with it.

Thanks for your help David.

jpbarto