mu.nu - We're sorry we accidentally destroyed your panties.

August 17, 2004

Styling the Dropdown Munuvians list

I was updating my Dropdown muNu blogroll and noticed that Lynn & physics geek had the same question I do. How do we go about styling the output of that list with CSS so we can get a smaller font that matches what's being used in our 'side' style?

Doesn't seem to matter how I wrap it, the output is unaffected. What am I missing?

Posted by: PaulT at 03:34 AM | Comments (87) | Add Comment | Trackbacks (Suck)

1 Don't know if this will work...

form {
font-size: 80%;
}

Notice that there is no Class [.]or ID [#] indicator before the class form... this will, however, change all form elements in your HTML, including your search form(s) or any other drop down menus.

See if that will work, and if it does, I'll work on a specific fix for the MuNu menu.

Posted by: Madfish Willie @ at August 17, 2004 05:13 AM

2 Paul:

That won't work. Try this for your blog in particular:

option {
font-size: 67%;
height: 15px;
}

Posted by: Madfish Willie @ at August 17, 2004 05:30 AM

3 I tried to find some HTML that would let me size the width of the box, but couldn't get the size="xx" tag to work anywhere in that code.

Perhaps Jim or Rob or Pixy or someone else might have another, more elegant solution?

Posted by: Madfish Willie @ at August 17, 2004 05:51 AM

4 Thanks for the help MadFish!

As I mentioned in our emails, the box still defaults to the width of the longest line. I trimmed the length of some of the longer blog names to get it to fit well.

I then removed the reference to the initial default title (set to THE LIST in the script) because that line didn't get styled to smaller text size by the 'option' style you suggested above. (at least not in FireFox. You say it did size properly in Mozilla?)

So now I've got things looking quite nice in FireFox, but there's the usual gotcha. It looks like total shit in Internet Imploder. The list box is much wider, and it causes the whole bloody div to widen, making the whole sidebar widen too much and overlap the blog body as well. I can hide the overflow, but that still looks like crap as it hides the dropdown arrow. Yech.

**sigh**

Bloody IE.

Posted by: Light & Dark @ at August 17, 2004 06:29 AM

5 Ahh the age old select dilema... it's a tricky one. Let me say now that you are going to have no end of trouble styling it in IE. This is becasue IE uses the windows VB dropdown control which has very limited properties. Mozilla will allow you more control but even then it can be tricky.

basically a dropdown / select tag can be styled by the following without hitting too many problems:

width (in PX or %)
font-family
font-size
color
background-color

Anything else won't render in IE and may have weird issues in other browsers. Of course Mozilla renders them all perfectly.

If you need any more info then please feel free to email me directly.

Rob

Posted by: Rob @ at August 17, 2004 11:16 AM

6 Oh and I agree we need to get an id attached to that dropdown. Maybe consider replacing the name attribute which is due to be deprecated anyway.

Posted by: Rob @ at August 17, 2004 11:18 AM

7 Insert this into #links

overflow: hidden;

That will make the drop-down box cut off at the edge of the links column. It cuts off everything that won't fit the width of the links column. You won't be able to see the little down arrow at the end of the drop-down box, but if you click inside the actual box, the list displays at full-width.

Not the ideal solution, but it should do the trick without having to redo the script every time someone else is added to the group.

This solution was only tested in Mozilla.

Posted by: Madfish Willie @ at August 17, 2004 04:12 PM

8 MadFish;

Unfortunatley, as I mentioned, the whole thing blows up in IE, even/especially withe the overlow attribute.

I'll keep playing, & be in touch with Rob when I have a better idea of what might get me closer, but for now, it's a no-go.

Paul

Posted by: Light & Dark @ at August 18, 2004 01:47 AM

9 It works fine in IE for me with just the overflow:hidden set. I just copied from the original MuNu post, and pasted into my sidebar. No other styles applied to it, no other class wrapped around it. As I mentioned in the last comment though, the down arrow is cut off, but when you click in the box, it open full width.

Posted by: Madfish Willie @ at August 18, 2004 01:56 AM

Hide Comments | Add Comment






Processing 0.0, elapsed 0.0096 seconds.
22 queries taking 0.0062 seconds, 31 records returned.
Page size 11 kb.
Powered by Minx 0.8 beta.