Hello, and thank you for checking out my thread…
I am designing a WordPress theme, all is well. At least when it come to Browsers the recognize CSS3, crazy right?
Anyways, I am taking allot of Aspirin to tackle this IE issue… With that being said, I really need some advice from the pro’s…
I have used CSS3 to design a Search Form for my WordPress theme, here is the CSS3 Styles:
#header > #searchform {
background: #1e1e1f;
background-image: -moz-linear-gradient(#544f4f, #171718);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #171718),color-stop(1, #544f4f));
border-width: 1px;
border-style: solid;
border-color: #292828 #2b2828 #0b0b0b;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
overflow: hidden; /* Clear floats */
padding: 6px;
position: absolute;
right: 20px;
top: 10px;
width: 380px;
}
Keep in mind that this is only for the design of the ’ Search Form ’ itself, not the ’ Input Fields’.
Of course, this is not going to work in IE period, well, the rounded corners do in IE9, but as for the gradient, nope.
So what I have done is, I had designed a Background for the ’ Search Form ’ itself. Then I created an IE only Style Sheet, then used a Conditional Statement to link to it. All was great, well, not perfect. When I used the ’ Search Form ’ Background Img, wow, it looked awful. I don’t have an image, to show you the disaster, but damn…
This is what my IE Only Styles look like:
#header > #searchform {
background: url(/images/hdr-searchfrom-bg.png) no-repeat scroll 0 0 transparent;
overflow: hidden; /* Clear floats */
position: absolute;
right: 20px;
top: 10px;
width: 380px;
}
Anyways, it look awful…
Is the Main Style Sheet over riding the IE Only? I don’t know. I ask, because when I check it in IE, I see a an extra border, Crazy.
Can anyone help me?
Thank you…