Sent by Robert Neville on 30 January 2005 04:04
--- Roger Roelofs [EMAIL-REMOVED]> wrote:
> > --- Roger Roelofs [EMAIL-REMOVED]>
> wrote:
> Every browser has default margin and/or padding for
> each element on the
> page. In your case, those margins are pushing
> things out of place. To
> make matters even more confusing, css has a concept
> of collapsing
> margins. It is a necessary feature, for esample, if
> you set a 1em
> margin on your paragraphs (a typical browser
> default), without
> margin-collapse, there would be 2em of margin
> between each pair of
> paragraphs instead of one. However, margins
> sometimes interact in ways
> that surprise us, as is the case on your page.
> Here's a link to Eric's
> article on the subject
>
<http://www.complexspiral.com/publications/uncollapsing-margins/>
>
Robert,
Thanks again for your assistance. Your suggestions led
to resolve my first intricate CSS layout. :D
Padding and margin adjustments needs considerable
experience since it has many idiosyncrasies. A fresh
CSS developer often gets caught in the minutiae behind
the browser hacks.
Here’s a summary about a margin collapsing.
Margins collapse; apply padding or a border to avoid.
You may struggle with extra white space where you
don't want any, or no white space where you want some.
If you're using margins, collapsing is most likely the
culprit. Andy Budd explains what you can expect.
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
Several questions remain to further my knowledge about
CSS. These inquiries may merit another post, yet I
continue with thread since it’s the same theme.
In reviewing other techniques, pseudo-elements
('::before' and '::after') seem like an attractive
approach. The HTML markup is cleaner without the need
for so many nested DIV. Its main liability relates to
IE non-support. What is the current status on browser
support for these pseudo-elements? Does other gotcha
exist for them as well? The following link will give
an explanation of the technique.
http://www.w3.org/Style/Examples/007/roundshadow.html#intro
A similar question applies to using PNG files in a
layout. My layout uses a PNG for the gradient
background. Fireworks had trouble exporting the
graphic as a GIF. After selecting GIF exact, the
graphic appears as expected, yet bloated to 356 kb (vs
10k for the PNG 32). PNG’s main liability relates to
IE non-support. What is the current status on browser
support for these PNG (don’t get too involve in the
answer)? Does other gotchas exist for them as well?
On my webpage, the first image (New Document Dialog)
does not center align even though the other images
center. Let me know if could give me an explanation
about the behavior.
I just discovered while updating the Website that
Round Corner layout has a bug. Apparently, the footer
graphic collapses in smaller menu side bar. The
graphic is larger than the actual DIV while in the
main content section the graphic is smaller than DIV.
So it renders as expected in the #middle DIV, but
incorrectly in the #left DIV. Please view my page
below. Look at the Sidebar then bottom left to see the
overlapping graphics. In addition, I changed the
padding and margins in an effort to resolve the
situation and may have mucked up the classes in the
process. So you may find some weird padding and margin
parameters.
http://www.geocities.com/robert_neville310/aquav1.html
STANDARD DISCLAIMER: These web pages are for personal
usage and will reside on an external hard drive (like
an iPod). I will use these documents to help me
remember key computing idiosyncrasies. These documents
number over a hundred. The CSS style sheet will allow
me to have a consistent format and allow me to update
formatting for all documents at once. The documents
should be viewable on Firefox, Safari, IE (second),
Opera, and Netscape (distant fourth); and not have any
platform specific needs. Thus server side processing
is not desirable.
__________________________________
Do you Yahoo!?
Read only the mail you want - Yahoo! Mail SpamGuard.
http://promotions.yahoo.com/new_mail
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/