Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Search widget is messed up in internet explorer

  1. notchangingmyname
    Member

    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 {
    position:fixed;
    bottom:-10px;
    z-index:100;
    right:190px;
    }

    #search-3 .widget-title {
    display:none;
    }

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

    Thanks in advance!

    The blog I need help with is notchangingmyname.com.

  2. timethief
    Member

    I looked at my site through IE7

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

  3. timethief
    Member

    See all the browser use stats here > http://www.w3schools.com/browsers/browsers_stats.asp
    Note: July 2012 IE7 2.0 % http://www.w3schools.com/browsers/browsers_explorer.asp

  4. notchangingmyname
    Member

    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 :-)

  5. timethief
    Member

    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.
    http://onecoolsitebloggingtips.com/2012/06/13/kogan-imposing-tax-on-shoppers-who-use-ie7-lifehacker-australia/

  6. notchangingmyname
    Member

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

  7. timethief
    Member

    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.

  8. houstonweaver
    Member

    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.

  9. notchangingmyname
    Member

    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.

    max-width:250px;

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

  10. houstonweaver
    Member

    'swonderful!

  11. houstonweaver
    Member

    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?

  12. houstonweaver
    Member

    Also added some ideas on your thread about the sidebar.

  13. notchangingmyname
    Member

    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 {
    background:#333;
    display:block;
    float:left;
    margin:0 auto;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    z-index:50;
    }

    #access .menu-header,div.menu {
    margin-left:10px;
    }

    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.

  14. houstonweaver
    Member

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags