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/
