The code below is taken from a tutorial book. The thing I cannot figure out is that when I get rid of the code “border-bottom: none” in ‘ul a’ the menu boxes get smaller in vertical direction. Can someone please tell me why this happening?
Hi, the problem is that borders (vertical borders anyway, top and bottom) add to the total height of the anchor (it was set on the anchor)
So lets say the anchor (theoretical) has a height of 30px
2px vertical borders altogether make it 32px height. If you specify border-bottom:none; then you make the height 31px and thus shrinking it.
As you have already seen, this is a horizontal menu and in fact it gets shrung much much more than 1px. You can try it by copying the code into your text editor, do what I did and see the results. Or am I still missing something?
Sorry it was my fault. What I actually did was, I deleted only ‘none’ and left the rest of the text left to it. So the menus got shrunk in a very weird way. However, when I deleted the code completely, as you have told me, it got shrung only by 1 px. It is all solved now. Thanks for your hand…
I’m not seeing that effect. When i remove the border-bottom:none, the 1px dashed border bottom you have on the ul appears more pronounced and gives the anchor a 1 px more height. Removing the border on the ul and the border:none on the anchor gives no difference in vertical height. So i’m not sure what you’re seeing on your end…