Internet Explorer, shoddy rendering.

Hey Guys,

As I am sure you all know, Internet Explorer is the most popular browser despite it being absolute crap. A lot of my possible users use Internet Explorer. I have a message on my site that pops up if you are using Internet Explorer telling you to install an other browser, links included below in the pop up. However, some people do not understand how to install an other browser or do not want to install an other browser.

I would like help in fixing my website to look correct in Internet Explorer. My site is here - http://www.talkz0r.com

Thanks,

Jeremy Reid

  • Peter M

    Your site looks fine in IE8. Absolutley nothing wrong. Think you will be shooting yourself in the foot trying to get people to change browser. Absoluteley no way I would change browser If I visited a site.

    I compared IE8 to firefox & the appearance is exactly the same

  • I only checked the index page on chrome, IE8 and IE7 and they all look almost identical. I don't know if you are having styling issues in other pages. 

    In any case, styling for different browsers is forever ongoing issue. The only way you can have all browsers display the same thing is by writing specific css for those browsers. Unfortunately, unless you point out each element that looks out of place and then provide us with the css that drives that element, no one would be able to fix the display for it.

    I would also echo what Peter said above, there will be more people navigating away from the page than those who are willing to download and install a foreign browser. I use 8 different browsers because I am a web designer and developer, however, if I am surfing the web, I use only Chrome. So you probably want to consider getting rid of the yellow browser compatibility message and focus on fixing the display to look correct on IE8 like you correctly aim at doing.

    -Carlos

  • If you logged in you would see the Menu Bar. It seems to be the only problem actually, which is helpful.

    http://i46.tinypic.com/in5xll.png

    Where would I find the CSS for the menu bar so you guys can help me?

  • Dude, That's gotta be simple enough to fix.

    Go to your theme/views/default/css.php.. look for topbar.

    Lets us know if you're having trouble.

    -Carlos

  • I located topbar. What do I need to change?

    /* ***************************************
      HORIZONTAL ELGG TOPBAR
    *************************************** */

    #elgg_topbar_container_left a.privatemessages {
        background:transparent url(<?php echo $vars['url']; ?>mod/black_pod_free/graphics/toolbar_messages_icon.gif) no-repeat left 2px;
        padding:0 0 4px 16px;
        margin:0 15px 0 5px;
        cursor:pointer;
    }
    #elgg_topbar_container_left a.privatemessages:hover {
        text-decoration: none;
        background:transparent url(<?php echo $vars['url']; ?>mod/black_pod_free/graphics/toolbar_messages_icon.gif) no-repeat left -36px;
    }
    #elgg_topbar_container_left a.privatemessages_new {
        background:transparent url(<?php echo $vars['url']; ?>mod/black_pod_free/graphics/toolbar_messages_icon.gif) no-repeat left -17px;
        padding:0 0 0 18px;
        margin:0 15px 0 5px;
        color:white;
    }
    /* IE6 */
    * html #elgg_topbar_container_left a.privatemessages_new { background-position: left -18px; }
    /* IE7 */
    *+html #elgg_topbar_container_left a.privatemessages_new { background-position: left -18px; }
    /* IE8 */
    *+html #elgg_topbar_container_left a.privatemessages_new { background-position: left -18px; }

    #elgg_topbar_container_left a.privatemessages_new:hover {
        text-decoration: none;
    }


    #searchform input.search_input {
        background-color:#626262;
        border:1px solid #808080;
        color:#FFF;
        font-size:12px;
        font-weight:bold;
        margin:0pt;
        padding:2px;
        width:180px;
        height:12px;
    }
    #searchform input.search_submit_button {
        color:#333333;
        background: #DFDFDF;
        border:none;
        font-size:12px;
        font-weight:bold;
        margin:0px;
        padding:2px;
        width:auto;
        height:18px;
        cursor:pointer;
    }
    #searchform input.search_submit_button:hover {
        color:#ffffff;
        background: #FF0000;
    }