StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>the use of <code>display: inline-block;</code> on the <code>ul.base</code> is the cause.</p> <p>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 <code>ul.base</code> will have the usual 2-3px top and bottom "padding" that a normal inline element has. It's not really padding it's the <strike>leading</strike> 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.</p> <p>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 <code>ul.base</code></p> <p>remove: <code>display: inline-block</code> add: <code>overflow: hidden;</code></p> <p><strong>[UPDATED]</strong> re the tabs.. sorry I didn't see them before I started</p> <p>Here's the "float everything" solution to containing child floats as it applies to your code, with some other suggestions too</p> <ol> <li><code>.menuContainer</code> all it needs is position:relative; and the border-right rule</li> <li><code>.navigationSecondary</code> float it left with a width of 100%; (you can remove z-index it's not doing anything)</li> <li><code>.wrapper</code> float it left with a width of 100%, remove the height</li> <li><code>ul.base</code> 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 </li> </ol> <p><strong>[UPDATE 2]</strong> I just copied this to a plain HTML document and <em>I think</em> 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)</p> <p>I'll put it in JSBIN so others can try it out on various browsers</p> <p>I changed it to:</p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </code></pre> <p>jsbin (with <strong>original</strong> HTML5 doctype) is here <a href="http://jsbin.com/agihe5/2/" rel="nofollow">http://jsbin.comhttp://jsbin.com/agihe5/2/</a> - shows gap</p> <p>jsbin <strong>with changed Doctype</strong> - but no changes to CSS code - with flash video to show dropdowns are working is here : <a href="http://jsbin.com/inare6/2" rel="nofollow">http://jsbin.com/inare6/2</a> - no gap!</p> <p>jsbin with no changes to Doctype, suggested changes to code and the flash insert to show z-index working is here: <a href="http://jsbin.com/iriya4" rel="nofollow">http://jsbin.com/iriya4</a></p> <p>with the latter, code changes are detailed in the source, they have moved to the bottom of the snapshot CSS</p> <p>I've tested the changed Doctype version as working in IE7, IE8, FF3.6.15, Safari4 (Win) and Chrome</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload