homepage Welcome to WebmasterWorld Guest from 54.235.39.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Problem with CSS Dropdown Menu Appearance
need help with font and menu size
Speeeedy




msg:1209395
 3:56 am on Oct 30, 2003 (gmt 0)

Hello peoples!

I never had to use it so I never learned how to create a custom drop-down menu.

I need the following:
A dropdown menu with a background color, and the height of the menu to be less than default, as well as the font to be smaller than default.

I have no problems with getting the background color and font, but nothing else seems to work.

Here is the code that works so far:

option {background-color:#ff0;color:#000;}

<form action="blahblah" method="post">
<input type="hidden" name="Animals" value="Animals">
<select name="Animals">
<option value="#">Choose Animal >
<option value="Dog">Dog
<option value="Cat">Cat
</select>
</form>

I assume it may have something to do with a DIV or a CLASS entered somewhere in the form or input, but I can't get the font-size or size of menu itself to shrink. Does it have anything to do with <form style="CSS/TEXT"> or something similar? Any help is much appreciated.

Thanks!

--Jim---

 

BlobFisk




msg:1209396
 11:32 am on Oct 30, 2003 (gmt 0)

Hey Speeeedy,

Various browser allow varying degrees of styling to be applied to option lists...

IE allows the least, so be aware of that...

jetboy_70




msg:1209397
 12:36 pm on Oct 30, 2003 (gmt 0)

Apply your font style to the <select> tag instead of the <option> tags and it should work. In IE the height is governed by its contents (smaller font - smaller <select>). I *think* you can alter the the height in Opera. A width can also be applied to the <select> tag, but Netscape 4 will not pick this up (although there is a Netscape 4-specific HTML tag to do this I believe).

Borders can be altered (again, applied to the <select> tag) and these changes will display in Netscape 6+/Mozilla etc., but not IE. Not sure about Opera.

Font style applied to the <form> element will be picked up by Netscape 4, which won't see the styles if they are applied to the <select>.

That about covers it. You can't change the colour or style of the <select> arrow as this is created by the OS (and will look different across OS's).

Speeeedy




msg:1209398
 9:33 pm on Oct 30, 2003 (gmt 0)

Thanks a lot for responding. I'll try this out today and give an update later.

--Jim---

Speeeedy




msg:1209399
 10:23 am on Oct 31, 2003 (gmt 0)

Works awesome. Thanks again :)

--Jim---

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved