My menu bar is dancing around

[jeddiki]

Hi,

I been working on my editor bar and still have two problems.

One is that when you run your curser over the images,
the whole bar starts "dancing".

Go here to take a look: dancing bar

Can you see what is making it do that ?

The other problem I have is the color selector.
First - I can not get it positioned in line with the images.

Second - I don't know how to set the foreground color.
presently its gray but I want it the same as background color.

If you can help with any of these problems would most appreciate it.

Here is my css code:

/*
*  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;
/*	border: 1px solid #000; */	
}

.editor {
  background: #E1E1E2;
	padding: 10px 0 0px 10px;
	float:left;
}

.select{
margin-top:-10px;
}

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

.sptr {
	background: #E1E1E2;
	margin: 4px 0 4px 0;
}

Many thanks

[drhowarddrfine]

121 HTML errors
1 CSS error

[serdar]

Two solutions for your 'dancing bar' problem which is caused by the image borders set on hover state.

Solution 1:

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

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

Solution 2:

.imgbtn {
    background: #E1E1E2;
    margin: 10px 0 4px 0;
    border: 1px solid #E1E1E2;
}

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

For your alignment problem; add

{float:left; padding-top:10px;}

in these classes: editor, imgbtn, sptr, select

Finally for your third problem:

I don't know how to set the foreground color.
presently its gray but I want it the same as background color.

Do you want to set the text color or the background color when you hover an option? Please clarify.

Posts merged by Moderator - Post your response in one post; it is unnecessary to use 3 separate posts.

[jeddiki]

The background color.

Basically I want the color to remain the same whether hover or not.
Each select option is a different color and when hovered over it doesn't need to change color.

[jeddiki]

I put in those changes to the css

and I now have:

/*
*  Editor Styles
*/

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



.imgbtn {
  background: #E1E1E2;
  padding-top:10px;
	float:left;
}
  
.imgbtn:hover{
  background: #cff;
  border: 1px solid #33f;
	float:left;
}


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

.select{
  padding-top:10px;
	float:left;
}

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

as you can see here:
Celebrity Membership.

it is still jumping about and the hover state dos'nt look too good.

[jeddiki]

Thanks for all your help,

From your guidance I've now got everything nice except for the
select color. This for some reason chanches to gray when the mouse hovers over the colored areas.

This is the code that I have:

 <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>

And 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-top:10px;
	float:left;
}

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

The problem can be on this page
- look at the color option box

Thanks for any ideas :)


Can any one please help me sort out these color options ?

[serdar]

I'm not sure with this, but you cannot change the background color of a selected option element with CSS because it's the same color when you select a text in your browser and so it's browser specific.