Jump to content


Photo

paragraph causing format problems in firefox???


  • Please log in to reply
4 replies to this topic

#1 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 29 August 2006 - 12:10 PM

Hi Guys,

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

you can view the page here www.creativecogs.co.uk/ecommerce_demo

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

		#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;
}

HTML used in this container

<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>

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

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 29 August 2006 - 12:44 PM

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.

#3 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 29 August 2006 - 12:47 PM

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

Rick

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 29 August 2006 - 12:57 PM

If you want a header use the header tags (<h1> (biggest) through to <h6> (smallest).
Example:
<div id="content_body">
   <h1>Example Header</h1>
  <p>Example text here</p>
</div>
As the header has big padding/margin you'll want to remove these otherwise it'll interfear with your layout. So use this CSS:
#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;
}


#5 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 29 August 2006 - 01:03 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users