css chestnut

[Tim]

I'm slowly moving from Table layout to CSS layout.
Yes I know the benefits, but hell I spend about 99% of my time tweaking
the css to work on different browsers. Tables are almost exactly the
same on any browser. If they do go wrong you might get a hairline of
color where you don't want it.

When CSS goes wrong though, it goes properly wrong.

So a question for you CSS fans out there...

If I have a block of text 200px wide, and add a 10px margin, firefox
gives me a 220px wide box, and IE gives me a 200px wide box. I've seen
that there's a hack for this including some wierd voice tag, but with
something so fundementally different what are we supposed to do? It's
making CSS pretty much unusable for me as a method for layout.

You thoughts...

[Beauregard T. Shagnasty]

Tim wrote:

I'm slowly moving from Table layout to CSS layout.

Great news!

If I have a block of text 200px wide, and add a 10px margin,

Try adding a 10px padding, instead of a margin. ?

Better yet, use em units instead of px or pt, so the box will scale when
your visitor increases text size. Use px only for widths of borders and
the like. And image height and width, of course.

--
-bts
-Warning: I brake for lawn deer

[Tim]

erm, doesn't padding do exactly the same thing?
Beauregard T. Shagnasty wrote:

Tim wrote:

I'm slowly moving from Table layout to CSS layout.

Great news!

If I have a block of text 200px wide, and add a 10px margin,

Try adding a 10px padding, instead of a margin. ?

Better yet, use em units instead of px or pt, so the box will scale when
your visitor increases text size. Use px only for widths of borders and
the like. And image height and width, of course.

--
-bts
-Warning: I brake for lawn deer

[Rik]

Tim wrote:

Don't toppost.

Beauregard T. Shagnasty wrote:

>Tim wrote:

>>I'm slowly moving from Table layout to CSS layout.

Great news!

Yup, welcome to css, one of the first things you will learn is that MSIE
sucks.

>>If I have a block of text 200px wide, and add a 10px margin,

Try adding a 10px padding, instead of a margin. ?

erm, doesn't padding do exactly the same thing?

No, simplified: padding is the distance from the outside of the box to the
content of that box, margin the distance from the outside of the box to the
other content.

And I rarely have to use both a width and a margin for a block of text.
Maybe if you tell us more (perhaps post a url) about what exactly you're
trying to accomplish we have an easier (cross browser) method.

>Better yet, use em units instead of px or pt, so the box will scale
when your visitor increases text size. Use px only for widths of
borders and the like. And image height and width, of course.

Amen.

--
Rik Wasmus

[Tim]

just tested - and you might be right!

thanks

TIm
Tim wrote:

erm, doesn't padding do exactly the same thing?
Beauregard T. Shagnasty wrote:

Tim wrote:

I'm slowly moving from Table layout to CSS layout.

Great news!

If I have a block of text 200px wide, and add a 10px margin,

Try adding a 10px padding, instead of a margin. ?

Better yet, use em units instead of px or pt, so the box will scale when
your visitor increases text size. Use px only for widths of borders and
the like. And image height and width, of course.

--
-bts
-Warning: I brake for lawn deer

[Tim]

what is top posting?

another problem is borders.
IE puts them inside, and FF outside (or the other way around).

what a pain!
how do you overcome this headache?

Tim

Rik wrote:

Tim wrote:

Don't toppost.

Beauregard T. Shagnasty wrote:

Tim wrote:

I'm slowly moving from Table layout to CSS layout.

Great news!

Yup, welcome to css, one of the first things you will learn is that MSIE
sucks.

>If I have a block of text 200px wide, and add a 10px margin,

Try adding a 10px padding, instead of a margin. ?

erm, doesn't padding do exactly the same thing?

No, simplified: padding is the distance from the outside of the box to the
content of that box, margin the distance from the outside of the box to the
other content.

And I rarely have to use both a width and a margin for a block of text.
Maybe if you tell us more (perhaps post a url) about what exactly you're
trying to accomplish we have an easier (cross browser) method.

Better yet, use em units instead of px or pt, so the box will scale
when your visitor increases text size. Use px only for widths of
borders and the like. And image height and width, of course.

Amen.

--
Rik Wasmus

[Beauregard T. Shagnasty]

Tim wrote:

what is top posting?

Posting above the quoted reply. Notice how everyone else is posting
below the quote - inline, so to speak - in the manner of a conversation.

http://oakroadsystems.com/genl/unice.htm#upside

open the front cover and begin reading there?
the back cover and end up at the front or do you
chapter one or do you start somewhere near
When reading a book, do you start at

another problem is borders.
IE puts them inside, and FF outside (or the other way around).

IE gets so many things wrong.

what a pain!
how do you overcome this headache?

"Best viewed in a *modern* *conforming* browser!!!!1!!!"

Actually, careful thought to design can eliminate most irregularities by
not striving for a 'pixel-perfect' layout. Make boxes and divs such that
there is some white-space between, so a few extra pixels does not upset
your layout.

--
-bts
-Warning: I brake for lawn deer

[Rik]

Tim wrote:

Rik wrote:

>Tim wrote:
Don't toppost.

what is top posting?

This:
You: Now, don't push your luck...
Me: And now that you've come all this way, also cut the bits from quotes
that are no longer relevant to the conversation.
You: Ah, now I know. I see the error of my ways and will stop topposting.
Me: There is such a thing as netiquette, google it.
You: But a lot of others do it, and I think it's simpler
Me: Because then the conversation makes more sence.
You: Why should I?
Me: Please reply beneath the text of the original poster

another problem is borders.
IE puts them inside, and FF outside (or the other way around).
what a pain!
how do you overcome this headache?

Depends on the circumstances. I normally display:block, and set left- &
rightmargins.

Grtz,
--
Rik Wasmus

[Tim]

one more while I'm here...

if I have 3 divs, all floated left, all set to width 33% they should
fill the screen width ways (short of a couple of pixels). IE does fine.
FF fails and the 3rd box drops down. It appears to be the dreaded
padding of the text blocks. If I remove the padding then all is well.
FF seems to calculate the 33% width, and then add on the padding. That
must be wrong?!?!

[Rik]

Tim wrote:

one more while I'm here...

if I have 3 divs, all floated left, all set to width 33% they should
fill the screen width ways (short of a couple of pixels). IE does
fine. FF fails and the 3rd box drops down. It appears to be the
dreaded padding of the text blocks. If I remove the padding then all
is well. FF seems to calculate the 33% width, and then add on the
padding.

Yep, had that problem before.

That must be wrong?!?!

In the W3C box model, the width of an element gives the width of the content
of the box, excluding padding and border.In the traditional box model, the
width of an element gives the width between the borders of the box,
including padding and border.

Reading material and work-arounds:
http://www.quirksmode.org/css/box.html

Grtz,
--
Rik Wasmus