osTicket Community Forums

DackR · #1 01-02-2008, 01:30 PM

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.

queen · #2 01-06-2008, 11:02 AM

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

DackR · #3 01-08-2008, 01:34 PM

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.

dot45 · #4 01-08-2008, 08:12 PM

within the main.css file, simpley change the

Code:

* { position:relative;}

to

Code:

* { position:fixed;}

dot45 · #5 01-08-2008, 08:26 PM

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.

DackR · #6 01-08-2008, 09:51 PM

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

Code:

// 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 '<head>' line in './include/client/header.inc.php':

Code:

<script src="browsesel.js" type="text/javascript"></script>

3. Replace the '* { position:relative; }' line in './styles/main.css' with:

Code:

.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.

peter · #7 01-09-2008, 01:26 AM

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

Code:

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

* { position:relative; }

to

Code:

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

/* * { position:relative; } [comment out or delete]*/

change

Code:

#container {
  width:760px;
  margin:5px auto 0 auto;
  border:1px solid;
}

to

Code:

#container {
  width:760px;
  margin:5px auto 0 auto;
  border:1px solid;
  text-align:left;
}

Please give it a test and let me know.

DackR · #8 01-09-2008, 12:15 PM

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!

Edit: Safari works too!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode