Home/ Questions/Q 4082734
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T18:13:26+00:00

I’ve got an example mht file here that will help demonstrate my issue; if

  • 0

I’ve got an example mht file here that will help demonstrate my issue; if you are using FF then this addon will help you view the mht file. You will prob need to download the file and view it locally since github doesn’t provide the right mime type for the file.

Basically my issue is this that I have a div which is 32px in height surrounding another div which is 29px in height, and I have no idea why the former is 32px tall.. It should be 29px tall afaict.. I don’t want to set height:29px tho because if you resize the window so that the nav items take two lines then the height shouldn’t be 29px for either div.

So what is wrong here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the use of display: inline-block; on the ul.base is the cause.

    when you use that it formats an element like it were inline (it only formats the actual content of the element like a block), so ul.base will have the usual 2-3px top and bottom “padding” that a normal inline element has. It’s not really padding it’s the leading vertical spacing i.e. it’s what gives lines enough space to provide for the ascenders and descenders of letters like g, h, p, etc.

    the use of it here is to make it seem like your ul is containing the floated child list elements. To make an element contain it’s floated children there are other ways to do this, one way is, on ul.base

    remove: display: inline-block
    add: overflow: hidden;

    [UPDATED] re the tabs.. sorry I didn’t see them before I started

    Here’s the “float everything” solution to containing child floats as it applies to your code, with some other suggestions too

    1. .menuContainer all it needs is position:relative; and the border-right rule
    2. .navigationSecondary float it left with a width of 100%; (you can remove z-index it’s not doing anything)
    3. .wrapper float it left with a width of 100%, remove the height
    4. ul.base doesn’t actually need anything but remove the display-inline-block.. it’s not containing the child lists but there’s no effect involved, if you want to you can float it left with a 100% width too

    [UPDATE 2]
    I just copied this to a plain HTML document and I think that just changing the DOCTYPE to an HTML4 transitional one solves the problems with no changes to the code ?? (why that should change the display be I don’t quite know! – but the use of “target=_parent” is “not allowed” in Strict Doctypes so that’ll be why it’s not validating)

    I’ll put it in JSBIN so others can try it out on various browsers

    I changed it to:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

    jsbin (with original HTML5 doctype) is here http://jsbin.comhttp://jsbin.com/agihe5/2/ – shows gap

    jsbin with changed Doctype – but no changes to CSS code – with flash video to show dropdowns are working is here : http://jsbin.com/inare6/2 – no gap!

    jsbin with no changes to Doctype, suggested changes to code and the flash insert to show z-index working is here: http://jsbin.com/iriya4

    with the latter, code changes are detailed in the source, they have moved to the bottom of the snapshot CSS

    I’ve tested the changed Doctype version as working in IE7, IE8, FF3.6.15, Safari4 (Win) and Chrome

    • 0