PDA

View Full Version : applying CSS to dd menus



bazz
Aug 20th, 2004, 10:09 PM
I have a form on my site and I have the text boxes controlled by css so that they have a border : 1 px #888888 solid;

I cant seem to get this to work for my dd menus - they seem to remain in the default setting.

How can I fix this.

ideally I would like to :

make the border attributes the same as text boxes,
coloured arrow button,
coloured background to the text part,
different coloured text.

is any of this possible with DD's?

Bazz

M1k3-+i3
Aug 20th, 2004, 10:31 PM
Have you considered showing the code for the menu?

bradyj
Aug 20th, 2004, 11:17 PM
Absolutely possible, but you need to show us your code so we can see what's wrong. As an example, check out this page I'm building:
http://www.dotfive.com/test/profile.php

Our names and titles on the left are dd/dt's

ReadMe.txt
Aug 21st, 2004, 01:04 AM
nice design you got there, did you ever use that menu i sent you? I't be nice if i had more example pages if people ask about it.

bradyj
Aug 21st, 2004, 01:16 AM
nice design you got there, did you ever use that menu i sent you? I't be nice if i had more example pages if people ask about it.

I forgot about that:), I'll get on it.

bazz
Aug 21st, 2004, 05:16 PM
HI,

I thought that the snippet of css I gave you might have been enough but here goes.


here's the html

<select class="textbox" name="numberOfSingleRooms"> <option selected="selected">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select>&nbsp;&nbsp; <strong>Single: </strong><br />


and heres the css.

.textbox {
font-size: 10pt;
font-family: "arial", verdana, helevicta, sans-serif;
color: #7b3b61;
text-decoration : none;
border : 1px solid #91B3AC;
width : 200px;
}

I know dd's aren't a text box but I want them to match the text boxes that I have assigned this class to :)

Bazz

bradyj
Aug 22nd, 2004, 05:17 AM
Well, the reason for us to see your code is because there may be code OTHER than what you've posted that is causing this to not work (conflicting code?). From the looks of it, it seems that this should work (but I do think there are some browsers who do not take to CSS in form elements, not 100% sure on that though). Have you tried instead of using that class element, just those CSS on the tag 'select'? Just for testing purposes?

bazz
Aug 23rd, 2004, 03:28 PM
Thanks for the reply Bradyj.

Well the problem I had was that the css worked with the text bxes but not the dd's. However, I have just uploaded the file to my ISP's server and it is working. Maybe there could be something wrong with my apache install? or it could be my Me win or ie6? Or it could be that I have viewed it now through XP?

You can see it at here (http://www.ireland-info.com/cgi-bin/reservations.pl?dpt=marlfield_dpt)

Thanks again.

AaronW
Aug 23rd, 2004, 04:33 PM
I think when he says "dd", he means drop-down menus; <select>. I was thinking he was looking to style <dl> tags... Heh.

The answer is no, you can't style the arrow or button on a dropdown menu because, like the fileUpload object, the OS (or browser) just doesn't allow much customization on it.

The arrow MIGHT be possible, but I don't know how... Fonts and backgrounds and borders are easy enough by styling the <select> and <option> tags.

bradyj
Aug 23rd, 2004, 05:53 PM
Agreed, I thought you meant a dd tag:


<dl>
<dt></dt>
<dd></dd>
</dl>


I believe some browsers allow this, but I know none of my Mac ones do, maybe just IE?

bazz
Aug 23rd, 2004, 08:35 PM
Sorry guys, I hadn't heard of the DD tag. Yes I did mean drop down menu. It seems that it works OK in IE6 on XP and in Moz, just like the drop downs above here for font size and color. It works like that even if my stylesheet isn't linked to the page.

But in IE6 on Me and Moz in Me, the style applies to the text boxes but not to the drop downs and I have applied the stylesheet in the same way for both.
If I can find the backup disk, I'll search through an old site I wrote a couple of years ago to see how they looked then - still on IE6. I know I had the background of the drop down changed and the text also. I just can't recall the border or (if different from here), how I did it.

Bazz

AaronW
Aug 23rd, 2004, 08:39 PM
Borders on <select> won't work. You can apply them to the <option> tag though, I believe.

<select> and <input type="file" />, and radio/checkboxes are the only unstylable elements (that I can remember right now). You used to be able to style checkboxes and radios in Mozilla, but somewhere along the line they cut that out. Opera might allow it, though.

You could write your own DHTML dropdown if it's that much of a concern :P

bazz
Aug 24th, 2004, 06:53 PM
Nope, it isnt that much of a concern really, I just wanted to have a level of consistency throughout my page. perhaps I still do; just that its a different level.

I have progressed form the days when I wanted to make scrolbars and stuff match my page. I see the logic in such things being outside of the designers control, though I would prefer if the drop down border were styleable.

Thanks for the replies.
Bazz

AaronW
Aug 24th, 2004, 07:43 PM
As do the rest of us. I don't believe select menus aren't styleable out of choice, but more because they vary so much from OS to OS. I'm surprised IE doesn't allow it though.

bradyj
Aug 24th, 2004, 07:53 PM
As do the rest of us. I don't believe select menus aren't styleable out of choice, but more because they vary so much from OS to OS. I'm surprised IE doesn't allow it though.

It's funny, on my Mac it seems to be a different beast -- Apple uses the Quartz technology so my Safari has that beautiful element to it's forms. Firefox and Mozilla builds show it as their own standard (much like Internet Explorer) and Opera has it's own that is quite clean and snazzy, but completely different than the rest. None seem to allow me to style the select tag, but it's interesting that it's not only an OS but a browser issue.