paragraph causing format problems in firefox???

[Ricklord]

Hi Guys,

I have created yet another test site but this one will demonstrate an ecommerce store.

you can view the page here [url=http://www.creativecogs.co.uk/ecommerce_demo]www.creativecogs.co.uk/ecommerce_demo[/url]

If you view the page in IE its fine but if you view it in firefox the background image of the containers has a gap when i add text using <P>example text here</P>

Any suggestions on how to fix this?

my code is below.

CSS for container

[code]
#content_main {
float:right;
width: 580px;
}
#content_top {
width:580px;
height:20px;
background-image:url(images/content_top.gif);
background-repeat:no-repeat;
}
#content_body {
width:545px;
padding: 0px 0px 0px 0px;
background-image:url(images/content_body.gif);
background-repeat:repeat-y;
}
#content_bottom {
width:580px;
height:20px;
background-image:url(images/content_bottom.gif);
background-repeat:no-repeat;
}
[/code]

HTML used in this container

[code]
<div id="content_main">
<div id="content_top"></div>
<div id="content_body">
  <p>Example text here</p>
</div>
<div id="content_bottom"></div>
</div>
[/code]

Its the paragraph which is throwing the formatting out but i need to use pargraphs to define text style in my style sheet dont I???

Cheers
Rick

[wildteen88]

Not really no. You use paragraph tags to add paragrahps. You dont need the to format your text. You can just add styles to rthe #content_body style to format the text that is in the content_body div.

[Ricklord]

What if i wanted to define 2 different styles i.e headers and paragraphs?

Rick

[wildteen88]

If you want a header use the header tags (<h1> (biggest) through to <h6> (smallest).
Example:
[code]<div id="content_body">
  <h1>Example Header</h1>
  <p>Example text here</p>
</div>[/code]
As the header has big padding/margin you'll want to remove these otherwise it'll interfear with your layout. So use this CSS:
[code]#content_body h1 {
    /* remove the margin */
    margin: 0px;
    /* remove the padding from the top, right and left of the header */
    /* add 15px padding to the bottom of the header */
    /* padding: top, right, bottom, left */
    padding: 0px 0px 15px 0px;
}[/code]

[Ricklord]

Thanks Wildteen

I haven't done it the way you suggested but your suggestions opened my eyes to something i wasnt seeing.

I have created my styles in my CSS i.e content_p and content_h1

Then just used <span class="content_h1">Example Header here</span>

This seems to do the trick and i can still manager my font styles from within the CSS.

Cheers again

Rick