Welcome to WebmasterWorld Guest from 54.163.52.98

Forum Moderators: not2easy

Message Too Old, No Replies

styling options

is is possible?

     

theonliest

4:05 pm on Feb 12, 2003 (gmt 0)

10+ Year Member



Does anyone know whether it's possible to format text in a 'pull down' options box using CSS (or anything for that matter)?
I've seen a few on big sites that are just defaulting to your browser font?
it seems like it should be straightforward but after tinkering around for a while I can't get anything to work.

Birdman

5:04 pm on Feb 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It only works in IE, I believe. Give it a go and see what you come up with, but remember certain styles won't render in certain browsers.

[u]Stylesheet[/u]

option{
font: normal bold 150% arial, verdana, helvetica, sans-serif;
}

<added>Hey Nick, look at that CSS Shorthand [webmasterworld.com];)</added>

theonliest

5:52 pm on Feb 12, 2003 (gmt 0)

10+ Year Member



well, unfortunately it doesn't really work on IE at all,
I'm trying to control the text size which I can't, although it sort of works in NN6, well on the drop down bit anyway but not in the original box, so it just looks weird.
it seems you can control background and text colour (sorry I'm from 'Old Europe') but not font size!
it's all a bit unpredictable, I think I'll leave it...

another grand plan ruined by bizarre browser interpretations

Nick_W

5:56 pm on Feb 12, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I think I'll leave it...

That's what I ended up doing when I last tried this :( - I'd rather hoped someone might show us the 'secret' here but, like you said: Browsers!

Nick

SuzyUK

7:37 pm on Feb 12, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



tested working in IE6 Opera6 & NN6

<form>
<select size="1" class="drop">
<option selected>choice 1</option>
<option>choice 2</option>
<option>choice 3</option>
<option>choice 4</option>
</select><input type="submit" value="Submit"><input type="reset" value="Reset">
</form>

css:
.drop{
font-family: arial;
font-size: 1.5em;
font-weight: bold;
}

Suzy

Nick_W

7:40 pm on Feb 12, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



If I remember correctly, (it was a long time ago I did it...) it's IE5 and 5.5 that doesn't like it. Or am I talking rubbish, that's exactly the way I'd do it Suzy so I'm sure it must be how I tried it before?

Nick

theonliest

7:47 pm on Feb 12, 2003 (gmt 0)

10+ Year Member



doh, you just beat me Suzy,
I was going to try and sound clever but it's a bit late now!
yes it's the 'select' selector that allows you to define the font size, decoration etc, which I just figured out.
however if you define colours for the 'option' selector it overrides colours defined for 'select' (except in the box itself on NN6!),
it's probably easier to just define a class for select and leave the rest alone.

another one bites the dust!

theonliest

7:51 pm on Feb 12, 2003 (gmt 0)

10+ Year Member



this seems to works in IE5.5 too!

SuzyUK

8:05 pm on Feb 12, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



theoneliest..this time you beat me to it!

Yes it works in 5.5

but..I noticed that when I added background color (Old Europe here too, but I gave in!) Opera still enlarge the font, but didn't like the color...

so you see...nothings perfect :)

Suzy

 

Featured Threads

Hot Threads This Week

Hot Threads This Month