Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

osTicket v1.10 (stable) and Maintenance Release v1.9.15 are now available! Go get it now

One more IE6 Issue

I found an issue with some of my users who dont have higher resolution displays(800x600) and are using IE6. Basically, when entering tickets, the bottom half of the page is cut off and they cant scroll down. (I simulated the screenshots on another machine with IE6.)

I believe the problem is with IE6 and something to do with the CSS style sheets.
I found some info about the issue here, but I'm not sure how to fix it myself. I've tried modifying the ./styles/main.css file to add the fix, but I can't figure out where it goes as I am not very familiar with css layouts.

Note: The issue occurs on both './index.php' and './open.php'

If anyone has insight to the issue, I would be most grateful.

Edit: This happens in RC1 and RC2.

Comments

  • bug in IE6

    I have had the same problem with IE6 cutting off the
    bottom half of the ticket webpage.

    I do not have a solution, and am waiting to hear
    from someone here in the forum.

    I realized it was a browser issue when I checked it
    in firefox.

    I hope that someone fixes this, because I too have
    users who use IE6.

    Please let me know if you find a solution

    -Christina
  • This is the last thing I need to get fixed before I can implement osTicket. MOST of my users have IE6 so this is a MAJOR issue.
  • within the main.css file, simpley change the
    * { position:relative;} 


    to
    * { position:fixed;} 
  • this fix will make IE6 work, but completely breaks IE7 & firefox. The CSS formatting needs to change to fix it, I am looking at solutions to create a real fix.
  • A-Ha! Great idea!

    That brings us to a good solution, although it doesn't fix all my issues because I've customized a couple things on the main page, other than that.. it should work perfectly with an un-tampered-with osticket layout.

    I've implemented the suggestion of dot45 and a special javascript from here:
    http://rafael.adm.br/css_browser_selector/

    Here are the steps to fix the compatibility issues:

    1. Copy the below code and save it in the osticket root directory as 'browsesel.js':
    // CSS Browser Selector   v0.2.5
    // Documentation: http://rafael.adm.br/css_browser_selector
    // License: http://creativecommons.org/licenses/by/2.5/
    // Author: Rafael Lima (http://rafael.adm.br)
    // Contributors: http://rafael.adm.br/css_browser_selector#contributors
    var css_browser_selector = function() {
    var
    ua=navigator.userAgent.toLowerCase(),
    is=function(t){ return ua.indexOf(t) != -1; },
    h=document.getElementsByTagName('html')[0],
    b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
    os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
    var c=b+os+' js';
    h.className += h.className?' '+c:c;
    }();


    2. Add the following line after the '' line in './include/client/header.inc.php':
    <script src=\"browsesel.js\" type=\"text/javascript\"></script>


    3. Replace the '* { position:relative; }' line in './styles/main.css' with:
    .ie7 * { position:relative; }
    .ie6 * { position:fixed; }
    .gecko * { position:relative; }
    .win.gecko * { position:relative; }
    .linux.gecko * { position:relative; }
    .opera * { position:relative; }
    .konqueror * { position:relative; }
    .webkit * { position:relative; }


    4. Test it out. It works for me.


    Note: I don't claim any portion of this code. I just put it all together.
  • DackR and dot45, thank you both for the efforts. I think the solution(s) above are great but I personally prefer not to work around/patch the problem which often leads to complexity and/or same issues in the future. In this particular case the issue is with * { position:relative; } which is ONLY useful for fancy page positioning. A new browser or IE version will possibly bring back the problem again in the future. Browsing with custom user agent ( e.g in FF) might result in incorrect browser being detected causing the error again..etc.

    A permanent solution is to redo the page positioning as shown below;

    In styles/main.css make the following changes.

    Change
    body {
    font-family:arial, helvetica, sans-serif;
    font-size:9pt;
    margin:0;
    padding:0;
    }

    * { position:relative; }
    to
    body {
    font-family:arial, helvetica, sans-serif;
    font-size:9pt;
    margin:0;
    padding:0;
    [B] text-align:center;[/B]
    }

    /* [B]* { position:relative; }[/B] [comment out or delete]*/
    change
    #container {
    width:760px;
    margin:5px auto 0 auto;
    border:1px solid;
    }
    to
    #container {
    width:760px;
    margin:5px auto 0 auto;
    border:1px solid;
    [B]text-align:left;[/B]
    }
    Please give it a test and let me know.
  • Outstanding!~

    That fixes -ALL- of my layout issues. Now it works as expected in IE6, IE7, and Firefox! (Probably most others too... Haven't checked on Safari yet.) Sweet!

    You da' man, Peter! :D:D:D


    Edit: Safari works too!
Sign In or Register to comment.