Of Course! IE Issues, Need Help!

HTML & CSS
1

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…

2

As long as you have the IE conditional stylsheet AFTER the regular stylesheet in the HTML, it shouldn’t be overriding.

Is there any chance of you giving us a site to look at? If it’s online of course :).

If not, we will need full HTML and CSS because without it, we can’t reproduce the issue (we really should try and get a site from you, because then we will have the images that go with it, to look at :)).

3

Since id’s are unique and can only occur once on a page, what does it need the fancy selector for?!?

Actually, looking through what you posted, I do agree with Ryan we need to see MORE – though from what I’ve seen it looks like you took something simple and made it complicated… but without seeing what’s AROUND the form it’s hard to weigh in one way or the other… I’m questioning the use of APO, the narrow width, the bizzare separation of border styling…

… and even then, you’re missing about two-thirds the vendor specific implementations, and your gradient COULD be built with filters in IE (cinsce you have no real color-stops)… though to be honest WASTING a second stylesheet on applying such style is exactly that, a waste of time. Your background gradient seems so simple, I’d consider using an image for ALL browsers and then using background-size for the new ones. Wouldn’t stretch to fit in legacy browsers – oh well.

But really about 99% of the time people use IE conditionals for CSS – it’s nothing more than code bloat and indicative of broken HTML/CSS coding methodologies.

Though since you’re working in turdpress, christmas only knows what train wreck of markup you’re actually struggling with.