On Oct 14, 2005, at 11:47 AM, Akins, Chris wrote:
The first page looks the way I want, but I don't understand the WHY
behind
my CSS. I figured it out by just playing with padding and margins
on the
#overview h2 tag, but have no idea WHY I need the h2 rule there.
It's even freakier. Follow:
The relevant CSS is:
#overview {
margin:0 0 0 250px;
background: #fff url(images/bgnd_s.jpg) top left repeat-y;}
adding "border-top: #fff 1px solid;" to this (without the h2 rule)
also results in the desired effect.
Analysis: You don't need the h2 rule. What you need is something to
wake the browser up to the fact it needs to paint the blank space
with the background color. A border will do this as well as anything
else. I've run into this bug several times, and it affects enough
different browsers for me to speculate the behavior may be
intentional, but for the life of me I can't understand why it's
intended.
If you use the developer toolbar in firefox to outline the divs, it
will outline div#overview as starting where the top of the text
starts. Yet after adding just the 1px top border the outline has
shifted to 1 pixel down from the header, where I think it should be.
Love to have someone explain why sometime, but until then I have a
simple and effective workaround -- add a 1 px top border of the same
color as the background. The side-effect is to slide the background
color up one pixel farther than usual; if that's critical, then play
with the margins/padding of the first element, but I suspect if one
pixel breaks the design, it's going to be broken on a lot more
browsers and systems than just the ones with this bug.
Have Fun,
Arlen
------------------------------
In God we trust, all others must supply data
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
