Help fixing float right CSS problem in IE7 and Opera |
Loading ...The Cascading Style Sheet (CSS) for this site has been a little messy for awhile and the situation was exacerbated when I added the search form to the header section recently. I think the search form is better there but unfortunately it’s not cross browser compatible code at the moment. One hack badly implemented upon another bad hack.
Here’s how it looks In IE7:
And also Opera 9 the search bar doesn’t align correctly either:
Looks correct in Firefox though:
A little help designer friends?
If you’d like to take a quick look at the CSS and HTML (again, I know it’s messy and needs to be redone) and recommend a working cross-browser fix in the comments below I’d be grateful. I will have more time to look into fixing this myself later today or this weekend. My apologies in the meantime that things are a bit haywire at the moment (and have been for a few days) for Opera and IE browser readers. Looks the way I want it in Firefox, but that’s only for like 40% of the site visitors, the rest are seeing ugliness.
I’m also in the process of moving a bunch of stuff over to our Windows Vista machine. Thanks to some equipment problems not by choice and not timed. Glutton for punishment on my second busiest day of the week? Believe it. Happy TGIF to the rest of the internet, though.
Update 9:06am PST: Using absolute positioning I can get the search form to show up in approximately the right place (as of this update it won’t match the IE7 & Opera 9 screenshots above) but the float right issue remains. Suggestions below still very much welcome.
Related Posts- Search MakeYouGoHmm and other sites inside Firefox
- Pivot hack: how to display images in search results
- Disabling Nofollow in Wordpress 1.5
- Electrical wire snakepit
- Yahoo and Techcrunch join forces for Hack Day September 29
- How many states can you correctly identify?
Try this:
.searchfloat {
/* floating search form css */
position: absolute;
width: 193px;
top: 0;
right: 0;
}
Absolute positioning in this case is not actually the worst solution. For example, I recently used it on the horizontal navigation on the site I created here:
http://www.wsou.net/
As a web developer by trade, I was a little disturbed by all the tables. You might try a pure CSS layout for greater flexible, accessible code. For example, consider this alternative header to your page:
http://www.mikull.com/download/hmm-header/header.htm
(a little quick and dirty- feel free to use for inspiration as you like; just view the source.)
Comment by mikull — October 21, 2007 @ 4:14 pm PST
That’s the ticket, mikull, thanks! As for the tables, I totally agree. The designer who did the theme for us a couple years ago (it’s a pro design firm, believe it or not) used tables instead of CSS
I was disappointed it wasn’t done in CSS but because it was part of another deal I didn’t make a big stink about it. I was supposed to get all the PSD files too and only got some of them.
Ever since, and as I mentioned in the post, it’s been one hack upon another hack and it’s a real mess in there now. We really need to start clean with a new template and re-build. I like the graphics and general layout but not the code that’s driving it.
Thanks for the mock-up on the header as well, much appreciated.
Comment by TDavid — October 21, 2007 @ 4:47 pm PST
BTW, just added you to Twitter as well.
Comment by TDavid — October 21, 2007 @ 4:50 pm PST
[…] but feels like that with all the competing formats. We experienced this recently trying to get the search box CSS in the header in Internet Explorer (thanks again to web designer reader, […]
Pingback by How to avoid annoying your web visitors » Make You Go Hmm — October 30, 2007 @ 10:42 am PST