On Tue, Sep 12, 2006 at 10:44:40PM +0200, francky wrote: > Bill Moseley wrote: > >On this page: http://infopeople.org/search/tools.html > > > >In firefox, when I change the ID to not match then the logo <div> gets > >bigger and then the <h1> text moves relative to the image.
> Hi Bill, > Collapsing margins! :-) Maybe that's the answer, but I think I'm asking a different question: What I was wondering about was why the <img> and the <h1> were moving relative to each other when applying the border (disabling border collapse). I think it has to do with the float. I'll use pixels for margins so things line up better: With this, both the <img> and <h1> top borders are at the same level -- 10px down from the top. Again, the markup: <div class="logo clearfix"> <a href="/"><img src="/images/ifp_logo_drkblue_orange_arr.gif" alt="Infopeople.org" /></a> <h1>Best Search Tools</h1> </div> #searchtools .logo { border: 1px solid transparent; } #searchtools .logo h1 { border: 1px solid green; margin: 10px; padding:0; } #searchtools .logo img { border: 1px solid red; margin: 10px; padding: 0; float: left; } (and remove they bad styles on the <a>) But if you remove the first rule (the .logo border) the <img> drops down lower, but the <h1> doesn't move much. Maybe that's the border collapse, but that's the part I don't understand. Is it related to the float? Maybe so, because if I apply float: left to the <h1> then things don't move. I need to remember to apply floats to all elements if I float any. -- Bill Moseley [EMAIL PROTECTED] ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/