Search widget is messed up in internet explorer

  • Author
  • #986979

    Hi all, today I looked at my site through IE7 and saw that the search widget was ridiculously wide and covers up the rest of the menu. I was wondering if anyone knows a CSS fix for this? (And yes, I know IE7 is not supported or whatever, but that doesn’t mean there isn’t a quick and simple fix, right?)

    I took a screen shot in IE7 and Firefox.

    Here is my search widget CSS modification:

    #search-3 {

    #search-3 .widget-title {

    Also, any idea why the horizontal scrollbar is showing up?

    Thanks in advance!

    The blog I need help with is



    I looked at my site through IE7

    IE7 is not a supported browser version and has not been supported since last year.



    Yes, I said that in my initial post. But that doesn’t mean there isn’t a CSS fix, perhaps a piece of code that says the maximum width of the search bar is 100 pixels or whatever.

    But thanks for those links :-)



    Here’s more fascinating information re: IE7 Online electronics retailer Kogan is no stranger to novel pricing approaches, from now on, anyone who visits the Kogan site using IE7 will be charged an additional 6.8% “IE7 tax” — 0.1% for each month since the browser was released — on any purchases.


    Hahaha that is too funny!!! Can you imagine going to a site and that pops up?!



    I think it might be an eye-opener for those folks who don’t upgrade. Only around 3% of the Kogan’s customers still use IE7 – and only 2% of those on the interent still use it, but Kogan’s development team has to spend as much time ensuring its pages work on that browser as they do on the Chrome, Firefox and Safari combined. Pony up or push off! is Kogan’s message and I do expect that other’s will soon take up that same position.


    As I posted on another post, that search widget is exhibiting the same behavior on my iPad. And I feel sure there is a CSS fix. I can do a lot of the basics but can’t wrap my mind around this one. We have some good CSS folks who will slide by and provide the answes I am sure. I think you can place it in your fixed footer area but put a bottom margin to allow for your footer, but not sure.


    Thanks houstonweaver!! For whatever reason your words prompted me to attempt it myself, and I managed to figure it out! I added the following code, and it now looks good in IE7.


    If you don’t mind, would you let me know if it looks good on the ipad now?




    Did you use that max width on your menu bar part?

    I use twenty ten on one of my blogs and would love a fixed menu at the bottom but don’t want it to be my menu from the top so guess I will do it another way. Did you use your menu and fix it there or a widget? I might have to poke around in your code unless you want to share?


    Also added some ideas on your thread about the sidebar.


    Of course I’ll share! (After all, it’s not like I came up with it myself, justpi helped me out in a different thread, and I’m more than happy to pay it forward.) I moved the regular menu to the bottom.

    #access {
    margin:0 auto;

    #access .menu-header, {

    Initially where it says margin-left I had auto, but I changed it yesterday to try to limit the menu overlapping with the search bar.


    You are just super… And of course so is justpi!

The topic ‘Search widget is messed up in internet explorer’ is closed to new replies.