Click to See Complete Forum and Search --> : div spacing


Cassius
10-16-2006, 08:48 AM
I have a div tag with a single line of text (an unordered list, having the setting display:inline to serve as a menu). Now when i tried adding a top and bottom border to this div tag, the div is automatically increasing in size, having some empty space above and below the line of text. All i added is the following:

border-top: solid 2px #FF6600;
border-bottom: solid 2px #FF6600;

In fact when i comment these two lines, the div height returns to normal. This is happening in IE6.

I tried setting padding and margin to 0 but to no avail.

Any suggestions are greatly appreciated.

Thanks in advance

WebJoel
10-16-2006, 09:03 AM
IE adds border widths to the width of the container. Real bummer sometimes. You just have to settle for a container width congruent with acceptable display on all browsers, even if this means making the container be 4 or 5 pixels less-wide than you'd optimally like to, to accomodate the combined left and right border widths (or in your case, top & bottom border widths)...
This list, -do you have a "line-height:n;" statement in it?

Kravvitz
10-16-2006, 04:14 PM
What doctype are you using? Which version(s) of IE are you testing in?