> well the <a> element is still inline (I was referring to that element > in my answer above). Try setting to <a> to display: inline-block in > that test case.
I have change to display: inline-block; and, it worked as expected. The padding space on a elements was rendered on the viewport. However, if I recall correctly, this very nice property/value par, is not well supported cross-browser, that's why I try to avoid it. Still, and since I have a float applied, we can rely on display:block; only right? http://www.nuvemk.com/formacao_lx/outros/ul_li_tests_v5.html Question, assuming that all my previous assumptions were correct: Is it ok to change the nature of a inline element to block ? Silly question perhaps, it depends on our/user/layout requirements, but, I mean, should we use it with caution (ie. Using mostly with very specific selectors?) (I believe I have repeat the same silly question) :) Please reply if it makes any sense. > > property, I still can't see any effects on the vertical space > augmentation: > > http://www.nuvemk.com/formacao_lx/outros/ul_li_tests_v4.html > > You apply the line-height to the <a> element. this won't affect the > layout/height of the box which is governed by the line-box generated by > the block element (LI in this case). Almost perfectly clear. Why the line-height doesn't affect the container? Or better (or worst) yet, what kind of rule, apply when the element affect the container or don't affect it? > Apply to line-height to the parent > block (like the UL or the LI). Ok, and if we do so, let me guess, we also need to change the border and background properties declarations from the A element to the LI, and some other necessary changes. :) Yes? http://www.nuvemk.com/formacao_lx/outros/ul_li_tests_v6.html > > So, I still have doubts here: > >> but because it is an inline element, the > >> excess padding will be clipped by the overflow:hidden. > > > > because it seems that, even if we remove the display:inline; > property, the > > padding is still clipped,if we keep that overflow:hidden; > declaration. > > As I explained above, your <a> element is an inline element. You had > originally applied that display:inline to the parent <li> (iirc). In > the testcases above, you float the <li>, but you apply the padding to > the <a>. And since the A is a inline element by default, with or without overflow, I will get no margin or padding bottom/up here. So, actually, the relation I was assuming between inline and overflow, doesn't exist or, better saying, doesn't exist on the way I was describing? Correct? > I rarely use overflow:hidden for these kind of constructs. If the > intent is to contain the floated blocks for 'good' browsers, there are > many ways. Now that bugs me. Until know, I thought that, for compliant browsers, the only condition that should apply for floats to be contained was that the container should be wide enough to contain the child floated elements. And, perhaps for consistency cross browser, explicitly declare a width on both, container an elements.(don't recall if this is for IE only). Google 'containing floats'. if your use of 'overflow:hidden' > is solely and only to trigger 'hasLayout' for IE 6 & 7, you could use > 'zoom:1;' > Yes but, in order to use it, and as far as I know, to have it validate, we need to create a separate css file on a conditional comment for ie browsers only. Clearly, this will be done but, let's say that we have 140 elements to contain the floats. Should we declare all those elements again on a separate css file (assuming this is the best approach), and apply zoom:1; to each of them? > Philippe > --- > Philippe Wittenbergh > http://l-c-n.com/ Thank you sooo much. K. Regards, Márcio ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
