View Full Version : Padding not working in Firefox

Nov 13th, 2006, 04:34 AM

I'm currently trying to revise my CSS/HTML for a page I did and make it more cross-browser compliant and cleaner.

I have a two column layout with a header and a footer. I did use a table for the main layout (Oh no!) but I was told this was ok to do.

Anyways, my problem....

The 'content' div is not working in Firefox like I want it to. When I put padding to this div, the box grows wider. This only happens in Firefox. Internet Explorer and Opera are ok when I apply a padding larger than 0.

What is going on?

Here's the page...


Here is the css...

html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
font-family: times;
color: #000000;
background-image: url('images/brick.gif');

p {
color: black;
font-family: times;
font-size: 12pt;

/* main grid */

#header {

margin: 0px;
width: 800px;

#content {
padding: 0px;
margin: 0px;
width: 600px;
background-color: #fff;

#navigation {
margin: 0px;
padding: 0px;
width: 200px;
color: #fff;
background-color: #09c;

#footer {
margin: 0px;
width: 800px;
background-color: #0ff;

/* divs for header */

#logo1 {
border: solid thin #0099CC;
border-width: 1px;

/*divs for navigation bar */
#navlist {
list-style: none;

#navlist li {
padding-left: 20px;
padding-bottom: 5px;
background-image: url('images/bullet-news.jpg');
background-repeat: no-repeat;

A.navnews:link {color: #FFFFFF; text-decoration: none}
A.navnews:visited {color: #FFFFFF; text-decoration: none}
A.navnews:hover {color: #8b008b; text-decoration: underline}
A.navnews:active {color: #FFFFFF; text-decoration: none}

/*divs for content */

image.header {
margin: 0px 0px 10px 0px;

image.pic {
margin: 0px 0px 10px 0px;

Nov 13th, 2006, 05:54 AM
I'm not sure if I follow.

If you have a box, padding will give space between the sides of the box and what is in it; with content being king. Adding margin to the box adds space between the sides of the box and what is out of it; with the box size being king.

Nov 13th, 2006, 06:15 AM
That is how I'm understanding it. And it works that way in both IE and Opera. What I wanted to do was give some padding to 'content' so that what's inside (the pictures and the paragraph) is not flush against the border. When I give 'content' a padding of 10, 'content' grows wider in Firefox.

Here are the width declarations:

-'header' is supposed to be 800 pixels.

-'navigation' and 'content' are inline boxes where 'navitation is 200 pixels wide and 'content' is 600 pixels wide

-'footer' is supposed to be 800 pixels

So, with these declarations, 'navigation' and 'content' are supposed to line up with the header and the footer.

But, in Firefox, when I set a padding for 'content', 'content' gets wider and no longer lines up with the right edges of 'header' and 'footer'

Does that make more sense?

Nov 13th, 2006, 01:32 PM
If you add padding to the paragraph...

<p style="padding:0px 10px;">Realize your dreams with us.&nbsp;

...does that give you the effect you want?

Nov 13th, 2006, 01:38 PM
You need to either create a separate class to the content, or make the width less relative to the amount of padding you want. For some reason, when you pad an id it tends to stretch the side out rather than simply indent, so for example... if your box was 400 pixels wide, and you wanted to pad it 10 px, create the width at 390 pixels and padding-left: 10pixels... that way the overall width will be 400. It is much eaiser to create a class for your text with in the id tho!

Nov 13th, 2006, 03:39 PM
Or, you could just pad the paragraph as opposed to having padding assigned to everything inside the box including the images... which I think is what's happening here.

Nov 13th, 2006, 03:51 PM
Yeah, depends whether you want everything padded, or just the paragraph. Either way should work the same, except mine will pad everything within the content div class rather than just a paragraph. If you wanted all paragraphs within the content padded then you could simply apply the style #content p {padding-left: 10px;} to the style sheet?

Nov 13th, 2006, 04:56 PM
If you wanted all paragraphs within the content padded then you could simply apply the style #content p {padding-left: 10px;} to the style sheet?

Exactly. :thumbsup:

I just want to see if that's what pmontesi is looking for or if there is something else I'm not seeing.

Nov 13th, 2006, 10:33 PM
Ok, I will try doing this tonight. Let's see how I do!

Come on broswers! Work the same way! I pray for the day they all do.

Nov 14th, 2006, 04:40 AM
Yep, it worked. Now I just have to work on making #content be as tall as #navigation. It looks good in IE, but not Firefox or Opera. Oi ve.