CSS Padding(Margin?) Issues in Firefox

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
A veteran of early html, I've modified my blog template and made it
look rather clean (albeit rather plain) when viewed with IE.

Ironically, I'm a big Firefox fan, but when viewed in FF, my blog
leaves a lot to be desired.

The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
column style, with the right column being the one that's giving me the

In IE, it has nice padding around the text in the right column and
decent spacing between it and the left (main) column. It also sits
rather nicely in the middle of the window.

PROBLEM #1 > In FireFox, the text in the right column is slammed right
into the left edge of the column. The bulleted items even go into the
main column. (I've noticed the FF users continue to read my blog -- and
I appreciate it -- but it looks rather dreadful.)

PROBLEM #2 > In IE, the color (#f5f5f5) for the right column follows
neatly until it's done, while it FireFox it seems to end abruptly.

I'm sure there are a ton of poor syntax issues with my blog template,
but any help on correcting these two problems would be a great step in
the right direction.

Re: CSS Padding(Margin?) Issues in Firefox

sllrphoto@yahoo.com wrote:
Quoted text here. Click to load it
  Bad URL.

Quoted text here. Click to load it
  Without a useful URL I'm only guessing.... Each browser has a different
idea about how to apply padding and margins, and how much. A way to
achieve a mostly uniform look across browsers is to use
    html * { padding: 0; margin: 0; }
and explicitly specify the margin and padding for every element.

  For <ul> in particular, FF and IE use distinctly different values; I do
not remember which is which but one uses padding to indent a <ul>, the
other uses margin. If you set margin or padding to 0, one browser renders
the list without indent on the left.
  This works reasonably well:
    html * { padding: 0; margin: 0; }
    ol { padding-left: 2.5em; }    /* Allows up to 3 digits.    */
    ul { padding-left: 1.4em; }    /* Minimum needed across browsers.    */

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: CSS Padding(Margin?) Issues in Firefox

Quoted text here. Click to load it

A related problem is if the <ul> is in a middle or right column <div>
which does not have a left margin set explicitly...

Site Timeline