Weird margin bug w/ two nested divs and a ul, any ideas? (FF 2)

[___]

I am stumped on this one.  Here's the relevant section of code:

<div class="column-left">
	<div class="moduletable_menu">
		<h3>Main Menu</h3>
		<ul class="menu">
			<li id="current" class="active item1"><a href="http://localhost:9004/"><span>Home</a>

			<li class="item4"><a href="/index.php?option=com_content&view=article&id=4&Itemid=4"><span>Computer Repair</a>

					
			<li class="item2"><a href="/index.php?option=com_content&view=article&id=2&Itemid=2"><span>Xbox Modifications</a>

			<li class="item3"><a href="/index.php?option=com_content&view=article&id=3&Itemid=3"><span>PSP Modification</a>

			<li class="item5"><a href="/index.php?option=com_fireboard&Itemid=5"><span>Forum</a>

		</ul>		
	</div>	
</div>

And the relevant CSS:

.column-left {
width:160px;
min-height:170px;
margin:10px 0 0 0;
float:left;
}

.column-left h3 {
display:none;
}

.column-left .moduletable_menu {
position:relative;
width:154px;
min-height:150px;
top:0px;
margin:3px 3px 0px 3px;
}

.moduletable_menu ul {
display:none;
position:relative;
margin:8px;
}

/* color, border & background from a seperate file */

.column-left {
-moz-border-radius:12px;
border:none;
background:transparent no-repeat url(../images/leftcolumnbg.png);
background-color:#333333;
}

.column-left div {
-moz-border-radius:8px;
border:none;
background:#333333;
}

/* fonts are inherited from the body typeface css, from another file */

body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}

A little background:
The code is generated by a heavily overridden version of Joomla 1.5, I've got entirely custom module and component generators that actually spit out valid, semantic XHTML 1.1 (imagine that, a CMS that validates...).  Sorry if it's sloppy, it's hard enough to get these things to generate valid code let alone pretty code.  Note that .moduletable_menu is not referring to a table, that's just a compatibility artifact.

So the symptoms:
You'll notice .moduletable_menu ul is set to display:none.  As long as that's set, everything else works normally (the h3 is hidden intentionally, the module has to generate it but I don't want it shown on the page).  As soon as I remove the display:none line, the margins on the ul and .moduletable_menu, its parent, go all whacky:

• .moduletable_menu gains +5px to its top margin (regardless of ul's top margin)
• ul ignores its top margin entirely and gets a top margin of 0

This persists regardless of whether that h3 is shown, the position of the .moduletable_menu div or its parent on the page, or any of the decorative stuff (background images, -moz-border-radius, etc).  It's present in Firefox 2, I'll write back in about FF3 and IE7 if this is still going on by Monday, and I don't intend to support IE6 with this template so that browser is irrelevant - fuck IE6 in teh butt.

 

[e]

Err... .moduletable_menu ul is supposed to be set to display:none? Only the h3 is set to display none as far as I can see.

I tested it as a standalone, and the .moduletable_menu div seems to keeps its 3px margin; what I found odd though was the ul's 16px margin all around, but that's fixed by a quick ul { margin: 0; padding: 0 }

Anyway, I couldn't reproduce your bug; could you link to the page?

 

[Jeff Boldgloom]

Same here. I didn't have same problem either. You will need to link to the page because chances are something else is causing this. Perhaps some other code you haven't shown us?

 

[___]

Yeah it must be if you can't reproduce it.  The site isn't live yet so unfortunately I can't post it.  I ended up solving the problem by just using top to position rather than pushing it with a top margin, but I still can't figure out what the cause is.  Once the site is up I'll post it here so you guys can take a look, should be mid-next week at latest.  The behavior of all the ULs inside the moduletable_menu div is undecipherably wonky so I'm sure the problem will still be around, for now I'm just doing things that shouldn't have to be done in order to get them to behave, so there must be a bug present somewhere, but as it all validates its hard to track down.