CSS Padding(Margin?) Issues in Firefox

S

sllrphoto

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

Jim Moe

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.
Click to expand...
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.)
Click to expand...
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. */
 
D

David Stone

Jim Moe said:
Bad URL.

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.
Click to expand...

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

Jim Moe

Jim - Thank you for the tips.

Here's the *correct* URL: http://lazycomic.blogspot.com/
Click to expand...
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://lazycomic.blogspot.com/>
 
S

sllrphoto

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/)
 
J

J.O. Aho

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.
Click to expand...

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
 
D

dorayme

"J.O. Aho said:
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.
Click to expand...

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

J.O. Aho

dorayme said:
Why is the js needed considering there are ways to let IE see CSS
instructions that FF does not see?
Click to expand...

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


//Aho
 
A

Andy Dingley

J.O. Aho said:
Why not make two CSS files, one for Gecko based browsers and one for MSIE,
Click to expand...

1. because it's a bad idea.

2. because it's pointless. IE isn't _that_ bad. If you can hit the
standard then not only is FF happy, but even IE will get nearly
everything right, so long as you use a suitable doctype to get it into
standards-based rendering mode. One stylesheet will fit all.

The only issues I know of where you can't do this are for the default
treatment of lists (just set everything (margin & padding) explicitly
for both). Also IE still have some font-sizing issues.
a little bit of javascript that selects the right CSS based on the user-agent
string.
Click to expand...

That's _MUCH_ worse.
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Followup-to set: alt.html
Here's the *correct* URL: http://lazycomic.blogspot.com/
Click to expand...

1-
You've got 284 validation markup errors
http://validator.w3.org/check?uri=http://lazycomic.blogspot.com/

Your problem could be related to those, you know.. Without fixing those
first, it's counter-productive to try to figure out what could be the
problem.

Using Web Standards in Your Web Pages
The benefits for valid markup code
http://www.mozilla.org/docs/web-developer/upgrade_2.html#benefitsvalidmarkup

Mozilla Web author FAQ
http://www.mozilla.org/docs/web-developer/faq.html

Why we won't help you
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you


2-
Some of your CSS declarations imply a font-size of 10px. Now, that's
very small for people (over 40 years old) who may have set a minimum
font-size of over 12px for webpages in Firefox. Have you checked your
layout with such minimum setting?

3-
You have many errors in your css declarations: here's a few:

Invalid number : float center is not a float value : center
# Line: 96 Context : #rightcontent

Invalid number : margin only 0 can be a length. You must put an unit
after your number : 10 10 10 10
# Line: 100 Context : #rightcontent

Invalid number : padding only 0 can be a length. You must put an unit
after your number : 10 10 10 0


4-
You have all kinds of CSS, javascript and a deep and wide DOM tree: this
is exactly the type of code that requires strict validation, combining
and compressing declarations and reduction of DOM tree.

5-
Font-size should never be defined with px. This is well known:

W3C Quality Assurance tip for webmaster:
Care With Font Size: Forget <font>, use CSS
"Do not specify the font-size in pt, or other absolute length units for
screen stylesheets. They render inconsistently across platforms and
can't be resized by the User Agent (e.g browser).
Use relative length units such as percent or (better) em"
http://www.w3.org/QA/Tips/font-size#css

Followup-to set: alt.html

Gérard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Firefox vs IE in padding 6
Help with CSS margin collapse 6
Padding issues 6
strange padding/margin around images in Firefox 4
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
CSS question: Using height/width at 100% with fixed-width borders/margin/padding 1
Right margin in IE? 7

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 405

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top