3 replies [Last post]
PARoss
PARoss's picture
Offline
Enthusiast
Last seen: 9 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-10-29
Posts: 147
Points: 14

I'm using a Wordpress theme (German Newspaper) and have manually moved the search widget into the header. It works great in Firefox 3, Opera, Chrome. But in IE6 the search form is not getting "focus." Maybe that's not the right term, but the form doesn't work. See: irsp.org

I have no ideas. Help will be appreciated.

Phil

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hoo boy. There's lots

Hoo boy. There's lots strange here.

Why does IE get the strict doctype while everyone else gets the crap one?

IE7 seems to be not getting ANY of the styles.

The form LOOKS like it's inside the #header but it's not... it comes before it.

The form is actually invalid (not that that'll ever make a difference for a browser, but forms may actually not have inlines like inputs as direct children... for simple search I usually use a div cause they're just not worth a fiedlset/legend pair). The hover thing will never work in IE6 (unless you want to javascript it...). IE6 recognises :hover on links, so not even clickable things like text inputs get hover styles.

IE6 actually does let you type into that search box, however the clickable area(and something wrong with the url it's bogus) header text (the main title text thingie, the h2) is ever so partially covering the input so when trying to get my cursor in the search input I had to try a bit to make sure I didn't accidentally click on the header text's field.

IE7 of course has no issues with typing in, but that would be because there's nothing getting in the way (it's not getting hardly any header styles, the columns are out of wack, etc...) IE7 does not need any separate stylesheets, so you know. Being a goofy template, it may be too difficult to re-integrate IE into the main stylesheet, but just so you know, they don't HAVE to have different stylesheets (or different doctypes). Also, despite the separate stylesheet, there are all these !important hacks (they look like they're for Quirks Mode or IE5.5 and under... something weird).

You have
* {
margin: 0;
padding: 0;
border: 0;
}

I forget if this affect the input besides removing the border, or if it's more than that... I can't remember what the problem was with removing borders on forms, maybe it's only the submits that get badly affected... but that and the removing of padding on forms is a Bad Idea. If you have any select drop-downs in any forms anywhere, take a look in Opera. It won't be pretty.

Overal I think it's something to do with the form getting floated right, and the stuff underneath not actually clearing it (unless there's a clear somewhere... reading template stylesheets is like deciphering Morse code sometimes... easy for Gary, hard for the rest of us : )

Stick some ugly background colours on everything in #header (and maybe including #header too) to see who's overlapping your input box-- in all browsers. I suspect that while the Moderns look ok, they're hiding issues.

I'm no expert, but I fake one on teh Internets

PARoss
PARoss's picture
Offline
Enthusiast
Last seen: 9 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-10-29
Posts: 147
Points: 14

Stoome, Thanks for looking

Stoome,

Thanks for looking at it. There is a lot of weirdness. It's Wordpress theme and I'm not a PHP guy. It's a German theme and I don't speak German. And I'm moving the search widget out of its usual place. I want it in the header, but "Widgets" won't put it there. So, I'm cutting and pasting, scraping and taping.

I eliminated the strict doctype for IE. It doesn't seem to make any difference. I also changed the border:0; to border:none;

Then, I took your float:right advice to heart and put the form in a floated div. That seems to have done it.

Thanks.

Phil

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

suche is "search". In Dutch

suche is "search". In Dutch it's zoek, which I think just looks much cooler.

Everyone should be getting the awesome (strict) doctype. The transitional might be there for wordpress reasons, but unless your theme is using invalid/deprecated elements, you don't need it.

border: 0 and border: none are the same thing. They're just not good for forms. Truth be told, there is only one element I can think of who will get an ugly border if you don't remove it, and that's IMG elements. My stylesheets always have

img {
border: 0;
vertical-align: bottom;
}

Because nobody else has a border to be removed. In the form, to remove the default borders and put in your own (like you have), you can say #searchform input {border: the border you want;} and it won't hurt the submit button.

The form was already floated but maybe the div around it is now giving it more room to breathe.

I'm no expert, but I fake one on teh Internets