Posted by Jim Moe on 10/22/06 21:58

sllrphoto@yahoo.com wrote:
>
> 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
> problems.
>
Bad URL.

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

[Back to original message]