Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Padding(Margin?) Issues in Firefox

Reply
Thread Tools

CSS Padding(Margin?) Issues in Firefox

 
 
sllrphoto@yahoo.com
Guest
Posts: n/a
 
      10-22-2006
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
problems.

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.

 
Reply With Quote
 
 
 
 
Jim Moe
Guest
Posts: n/a
 
      10-22-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) 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)
 
Reply With Quote
 
 
 
 
sllrphoto@yahoo.com
Guest
Posts: n/a
 
      10-23-2006
Jim - Thank you for the tips.

Here's the *correct* URL: http://lazycomic.blogspot.com/

Jim Moe wrote:
> (E-Mail Removed) 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)


 
Reply With Quote
 
J.O. Aho
Guest
Posts: n/a
 
      10-23-2006
(E-Mail Removed) wrote:
> Jim - Thank you for the tips.
>
> Here's the *correct* URL: http://lazycomic.blogspot.com/



Check here and you see some of your faulty html code:

HTML errors (200):
http://validator.w3.org/check?uri=ht...logspot.com%2F

CSS errors (12):
http://jigsaw.w3.org/css-validator/v...usermedium=all



//Aho
 
Reply With Quote
 
David Stone
Guest
Posts: n/a
 
      10-23-2006
In article <(E-Mail Removed)>,
Jim Moe <(E-Mail Removed)> wrote:

> (E-Mail Removed) 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.


A related problem is if the <ul> is in a middle or right column <div>
which does not have a left margin set explicitly...
 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      10-23-2006
(E-Mail Removed) wrote:
> Jim - Thank you for the tips.
>
> Here's the *correct* URL: http://lazycomic.blogspot.com/
>

Your code is a bit of a train wreck.
- There is no need whatsoever for "<?xml ... ?>. And IE does not
understand <?xml > anyway.
- There is no DTD. Use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- There are *two* <head> sections.
- You have mixed HTML and XHTML syntax.

The above are the main reasons for the huge number of validation errors
your page generates.
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flazycomic.blogspo t.com%2F>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
 
Reply With Quote
 
sllrphoto@yahoo.com
Guest
Posts: n/a
 
      10-24-2006
Jim / Dave / J.O. -

Thanks for the tips. With the "trainwreck" I've given the validators
too much ammo -- I don't think I'll tackle that until if/when I just
overhaul the whole template.

The tip on defining the right column was the biggest help in getting
things right. Also, somewhere in there I managed to get the typefaces
to match in IE and FF.

I still can't seem to get both columns to float center in firefox, but
(again, thanks to the trainwreck) that may be just b/c of a
conflict/override/glitch in the various definitions.

Thanks again,
Steve D. (http://lazycomic.blogspot.com/)

Jim Moe wrote:
> (E-Mail Removed) wrote:
> > Jim - Thank you for the tips.
> >
> > Here's the *correct* URL: http://lazycomic.blogspot.com/
> >

> Your code is a bit of a train wreck.
> - There is no need whatsoever for "<?xml ... ?>. And IE does not
> understand <?xml > anyway.
> - There is no DTD. Use
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> - There are *two* <head> sections.
> - You have mixed HTML and XHTML syntax.
>
> The above are the main reasons for the huge number of validation errors
> your page generates.
> <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flazycomic.blogspo t.com%2F>
>
> --
> jmm (hyphen) list (at) sohnen-moe (dot) com
> (Remove .AXSPAMGN for email)


 
Reply With Quote
 
J.O. Aho
Guest
Posts: n/a
 
      10-24-2006
(E-Mail Removed) wrote:
> Jim / Dave / J.O. -
>
> Thanks for the tips. With the "trainwreck" I've given the validators
> too much ammo -- I don't think I'll tackle that until if/when I just
> overhaul the whole template.
>
> The tip on defining the right column was the biggest help in getting
> things right. Also, somewhere in there I managed to get the typefaces
> to match in IE and FF.
>
> I still can't seem to get both columns to float center in firefox, but
> (again, thanks to the trainwreck) that may be just b/c of a
> conflict/override/glitch in the various definitions.


Why not make two CSS files, one for Gecko based browsers and one for MSIE, and
a little bit of javascript that selects the right CSS based on the user-agent
string.


//Aho
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      10-24-2006
In article <(E-Mail Removed)>,
"J.O. Aho" <(E-Mail Removed)> wrote:

> Why not make two CSS files, one for Gecko based browsers and one for MSIE,
> and
> a little bit of javascript that selects the right CSS based on the user-agent
> string.


Why is the js needed considering there are ways to let IE see CSS
instructions that FF does not see?

--
dorayme
 
Reply With Quote
 
J.O. Aho
Guest
Posts: n/a
 
      10-24-2006
dorayme wrote:
> In article <(E-Mail Removed)>,
> "J.O. Aho" <(E-Mail Removed)> wrote:
>
>> Why not make two CSS files, one for Gecko based browsers and one for MSIE,
>> and
>> a little bit of javascript that selects the right CSS based on the user-agent
>> string.

>
> Why is the js needed considering there are ways to let IE see CSS
> instructions that FF does not see?


It's easier to look true and for same options you can have different values too.


//Aho
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS dropdown issues between Firefox and IE7 joejodihurley@gmail.com Javascript 7 08-24-2007 04:38 PM
Windows XP Pro clean install issues, SP2 issues too... Howie Computer Support 0 07-06-2005 07:12 PM
Re: Windows XP Pro clean install issues, SP2 issues too... pcbutts1 Computer Support 0 07-06-2005 04:58 PM
Re: Windows XP Pro clean install issues, SP2 issues too... pcbutts1 Computer Support 0 07-06-2005 04:52 PM
SNMP Issues in Cisco Routers; Vulnerability Issues in TCP =?iso-8859-1?Q?Frisbee=AE?= MCSE 0 04-21-2004 03:00 PM



Advertisments