Panos
asked on
Jquery ui style problem
Hello experts.
I have a styling problem with jquery ui dialog.
I'm using the lightness theme.Because i'm using in my main css document hover styles for input and select tags like:
input:hover,select:hover {background-color:#FFC;bor der:1px solid #1c94c4;}
input,select {background-color: #F5F5F5;}
select {border: 1px solid #c5c5c5;color: #043454;width:100%;font-si ze:12px;he ight:22px; display: block;padding-top: 1px;padding-right: 4px;padding-bottom: 1px;padding-left: 4px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
this makes a conflict with the css of ui style.
That what i want is no hover effect in that form.
(screen two:hover effect on email textfield)
(I tried also to remove the shadow effect on top and left but i did not get it too.)
Files can be downloaded from http://jqueryui.com/download (lightness theme)
screen1.gif
scree2.gif
I have a styling problem with jquery ui dialog.
I'm using the lightness theme.Because i'm using in my main css document hover styles for input and select tags like:
input:hover,select:hover {background-color:#FFC;bor
input,select {background-color: #F5F5F5;}
select {border: 1px solid #c5c5c5;color: #043454;width:100%;font-si
this makes a conflict with the css of ui style.
That what i want is no hover effect in that form.
(screen two:hover effect on email textfield)
(I tried also to remove the shadow effect on top and left but i did not get it too.)
Files can be downloaded from http://jqueryui.com/download (lightness theme)
screen1.gif
scree2.gif
ASKER
Hi mstrelan.
I was searching in the ui css files wich line is responsible for the border or shadow effect (see the textfields) so that i could add a line with a :hover style but i did not find it.
I was searching in the ui css files wich line is responsible for the border or shadow effect (see the textfields) so that i could add a line with a :hover style but i did not find it.
I downloaded the lightness theme and cannot replicate this. What browser are you using, and do you have any toolbars eg Google toolbar? Some browsers and toolbars define these styles.
If you have firefox you can install the firebug addon and you can easily see what styles are applied to what elements. same with chrome you can right click an element and go "inspect element"
If you have firefox you can install the firebug addon and you can easily see what styles are applied to what elements. same with chrome you can right click an element and go "inspect element"
ASKER
I tested this in chrome now.
The result under computed style is the code bellow
The result under computed style is the code bellow
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: white;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-style: inset;
border-bottom-width: 2px;
border-left-style: inset;
border-left-width: 2px;
border-right-style: inset;
border-right-width: 2px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-style: inset;
border-top-width: 2px;
color: black;
cursor: auto;
display: block;
font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 16px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 9px;
margin-top: 4px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
text-align: auto;
text-indent: 0px;
text-shadow: none;
text-transform: none;
width: 355px;
word-spacing: 0px;
element’s “style” attribute
Style Attribute
inline stylesheet
input.text
that probably isnt the computed style for hover or focus though :(
also computed style includes style from browser defaults, whereas the other style properties come from stylesheets or inline styles
also computed style includes style from browser defaults, whereas the other style properties come from stylesheets or inline styles
ASKER
OK.
Take a look what is coming up with firebug.(i have removed the hover effects and i'm looking for the shadow border effect
Take a look what is coming up with firebug.(i have removed the hover effects and i'm looking for the shadow border effect
input.text {
height:16px;
margin-bottom:4px;
margin-top:4px;
padding:0.3em;
width:95%;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
background-color:#FFFFFF;
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size:1em;
}
ui.theme.css (line 54)
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px;
}
ui.theme.css (line 286)
input {
display:block;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
.ui-widget-content {
color:#333333;
}
ui.theme.css (line 59)
.ui-widget-content {
color:#333333;
}
ui.theme.css (line 59)
.ui-widget {
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size:1.1em;
}
ui.theme.css (line 53)
body {
color:#043454;
font-family:"Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
font-size:12px;
}
Well the color of the border is #1c94c4, so perhaps search for that somewhere
ASKER
Sorry.
This was the code before removing the hover style.
Look at the code below.
This was the code before removing the hover style.
Look at the code below.
input.text {
height:16px;
margin-bottom:4px;
margin-top:4px;
padding:0.3em;
width:95%;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
background-color:#FFFFFF;
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size:1em;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px;
}
input {
display:block;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
.ui-widget-content {
color:#333333;
}
.ui-widget-content {
color:#333333;
}
.ui-widget {
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size:1.1em;
}
body {
color:#043454;
font-family:"Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
font-size:12px;
}
too hard to tell without seeing the html and css combined.
in the jquery-ui.css file of the ui-lightness directory i would assume it is somewhere in here
in the jquery-ui.css file of the ui-lightness directory i would assume it is somewhere in here
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }
ASKER
I removed all these lines and the border shadow effect is still there.Could it be a js generated style?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes mstrelan.
This was the problem.Thank you
This was the problem.Thank you
ASKER
thank you for your help
regards
panos
regards
panos
does that make sense? i can probably explain better