PDA

View Full Version : Problem with keeping the background color stable



jeddi
Jan 27th, 2009, 07:13 PM
Hi,

I have a select button for colors and each option
has the background color assciated with the color selection.

Here is the HTML:


<div class="my_editor" >
<span class="editor"> Editor: </span>
<img class="imgbtn" src="/picts/bold.gif" width="21" height="20" alt="Bold" title="Bold" >
<span class="select">Color:
<select name="x_color">
<option style = "background: black;" value = 'black' selected= "selected" >black &nbsp;&nbsp;</option>
<option style = "background: blue;" value = 'blue' >blue &nbsp;&nbsp;</option>
<option style = "background: red;" value = 'red' >red &nbsp;&nbsp;</option>
<option style = "background: green;" value = 'green' >green &nbsp;&nbsp;</option>
<option style = "background: yellow;" value = 'yellow' >yellow &nbsp;&nbsp;</option>
<option style = "background: gray;" value = 'gray' >grey &nbsp;&nbsp;</option>
<option style = "background: white" value = 'white' >white &nbsp;&nbsp;</option>
<option style = "background: brown;" value = 'brown' >brown &nbsp;&nbsp;</option>
<option style = "background: orange;" value = 'orange' >orange &nbsp;&nbsp;</option>
</select>
</span>
</div>

And here is the CSS



/*
* Editor Styles
*/

.my_editor {
width: 600px;
background: #E1E1E2;
border: 1px solid #000;
margin: 10px 300px 10px 110px;
float:left;
}

.imgbtn {
background: #E1E1E2;
margin: 10px 0 4px 0;
padding:1px;
float:left;
}

.imgbtn:hover{
background: #cff;
border: 1px solid #33f;
padding:0px;
}


.editor {
background: #E1E1E2;
margin:0 10px 0 10px;
padding-top:12px;
float:left;
}

.select{
padding:10px 5px 0 0;
float:left;
}

.select select{
background: ;
}

.sptr {
background: #E1E1E2;
padding-top:10px;
float:left;
}


The problem is that when the mouse hovers over an option, the
background color changes to gray. I think that is because it is
the default for the <div class editor>

I have tried to negate this with an empty background
in the CSS at .select select{ but this did not help.

Here is a link to the problem page - select a color
http://www.devchoice.info/testing.php

Any ideas ?

jerry62704
Jan 27th, 2009, 09:17 PM
In FF3, the backgrounds on the color dropdown list are blue on hover. When I move off the first one (black), the text is black and the background is black as well.

I see the same thing in IE6, but the layout is pretty raggity as we have already discussed.

jeddi
Jan 27th, 2009, 09:41 PM
Well that's strange !

I just checked on FF3, Explorer & and Opera
and I get same thing on all of them:
- on hover the background color changes to gray.

redspyder
Jan 28th, 2009, 02:15 AM
I see the same colours as jerry62704 in Firefox3 and in IE7. That is, pale blue on hover with white text.

All the best - redspyder

jeddi
Jan 28th, 2009, 07:34 AM
OK
Well may pale blue is what I mean by gray.
I meant a bluey gray.

Anyway the point is - I DON'T want the color to change
from what it is eg yellow or green or red to to this
blue/gray on hover, I just want it to stay the color I gave it in
the code for that option.

How do I stop the on hover from changing the color ?

To indicate which option I am hovering over, I would prefer to BOLD the font
and keep background how I set it.

So:
Instead of background color change I would like the text to BOLD.
So on hovering over green, the text green goes to green but
the background color stays green.

Is this possible ?

redspyder
Jan 28th, 2009, 04:00 PM
hi jeddi,

This part of your css might be causing the problem:


.select select{
background: ;
}

background doesn't have any attributes. So I presume the blue/grey is a default of some kind.

All the best - Duncan

jerry62704
Jan 28th, 2009, 04:08 PM
You are explicitly changing the color. If you don't want the background to change, then don't go to the trouble of changing it.


<select name="x_color">
<option selected="selected" value="black" style="background-color: black;">black </option>
<option value="blue" style="background-color: blue;">blue </option>
<option value="red" style="background-color: red;">red </option>
<option value="green" style="background-color: green;">green </option>
<option value="yellow" style="background-color: yellow;">yellow </option>
<option value="gray" style="background-color: gray;">grey </option>
<option value="white" style="background-color: white;">white </option>
<option value="brown" style="background-color: brown;">brown </option>
<option value="orange" style="background-color: orange;">orange </option>
</select>

Remove all that red stuff and add this to your css
select {font-weight: bolder;}

Or use a number from 100 to 900 and pretend you have more control <g>.

BTW, the default text color is white so you might want to do something about that in the white option.

<option value="white" style="color: black;">white </option>

redspyder
Jan 29th, 2009, 12:57 AM
One other thing, using an attribute name <select>, as a class or id name is not a good idea. This in itself could cause errors in various browsers usually causing the class or id to be ignored.

All the best - Duncan