/    Sign up×
Community /Pin to ProfileBookmark

Setting 0px height to a UL in IE6

Copy linkTweet thisAlerts:
Apr 08.2007

Hopefully there is a simple answer to this. I have several UL elements in my page that I need to be hidden until a link above is clicked, which will reveal the ul element below it.

In my style sheet I have the visibility set to hidden and the height set to 0px. Both work great in Firefox and IE7, but unfortunately the 0px height does not work in IE6.

Is there some other attribute I can use to get a 0px height for my UL element in IE 6. (BTW, I’m using JavaScript to set the UL’s height to auto when the menu trigger is hit)?

Thanks
Jayson

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelApr 08.2007 — I would think that [I]display:none;[/I] is what you really want to use, and then change to [I]display:block;[/I] ("visible") with the a:hover. Would need to see the whole code to try. ? Or are you building a 'drop-down list', in which case, there are better ways to do this
Copy linkTweet thisAlerts:
@JaysonWardauthorApr 09.2007 — Hey Joel:

That worked for me.

The menu's I'm creating are dropdowns (in a sense), but it's a vertical set of navigation. What I've set up in my code is the following:

[code=html]
<h3 id="menu1">Category One<span id="menu1mark">+</span></h3>
<ul id="menu1menu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<h3 id="menu2">Category Two<span id="menu2mark">+</span></h3>
<ul id="menu2menu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<h3 id="menu3">Category Three <span id="menu3mark">+</span></h3>
<ul id="menu3menu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<h3 id="menu4">Category Four <span id="menu4mark">+</span></h3>
<ul id="menu4menu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>[/code]

I have event listeners attached to the h3 tags that display the associated <ul>'s when mousedown (set the style.dispaly to block) and then when you hit the button again it sets the <ul>'s style.display to 'none'.

I had originally set the height to 0px, which Firefox and IE7 understood, but I suspect using the display style attribute is the more appropriate way to do this.

The only other issue I'm having with IE7 and 6 is that the onmousedown is attached to the <h3> tag, but it also attaches to the <span> child element. How can I make it attach to the <h3> only and not it's child elements also?

Thanks for your help.

Jayson
×

Success!

Help @JaysonWard spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...