?
Solved

Joomla / IE6 Display Issue

Posted on 2009-02-08
9
Medium Priority
?
913 Views
Last Modified: 2013-11-10
Hi,

Ive been playing around with Joomla and I thought the site (from a template) I had was coming along nicely. I've just realised though that it does not display well in IE6.

If you look at the site tech.candygram.co.uk using IE6 you will see on the left hand side under the resources module there is a solid grey rectangle. This is not there when I view the site in other browsers.

If anyone can tell me how to resolve this that would be great.
0
Comment
Question by:ardrac
  • 5
  • 4
9 Comments
 
LVL 10

Expert Comment

by:fearialtog
ID: 23590991
Old versions of Internet Explorer do not handle CSS well. Fortunately there are several ways around this problem. See below.
http://www.dave-woods.co.uk/?p=143

Most template writers use a second (or more) style sheet that is specifically for IE. To use this approach Include the following code in your template and create the appropriate css file.

<!--[if  IE 6]>
<link href="/templates/YourTemplateName/css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

0
 
LVL 5

Author Comment

by:ardrac
ID: 23611139
Thanks. I realise that the problem is IE6 not handling the css well. The link provided is definatly the best I've seen regarding possible fixes. Especially as the double margin bug mentioned looks exactly like one of the issue we are seeing (with the image rotater module). However I've looked at the css and can not see where I would add the line that fixes this i.,e. display: inline.

Is there any way you could advise where I should add that code?
0
 
LVL 5

Author Comment

by:ardrac
ID: 23624361
Well I tried everything in the linked article but no luck. Then I changed some of the padding numbers and managed to get the Resources menu looking beter in IE6.

Just need to figure out now how to get the image rotator module looking right in IE6. Its to far to the right.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 10

Expert Comment

by:fearialtog
ID: 23624426
Hello ardrac,
I am afraid I do not have IE6 on any of the machines here. Could you attach a screen shot to your next message so I can see the problem.

regards,
0
 
LVL 5

Author Comment

by:ardrac
ID: 23654089
The SS are in the attached file.

First SS is IE6 with the module class suffix set as 'sss'
Second is IE7 with the module class suffix for the imageSlideShow blank

I have worked out that the problem is linked to the module class suffix.

Originally the ImageSlideShow module was in the correct location in all tested browsers. However it was surrounded by a grey box (see 2nd SS). I added a module class suffix and the the grey box vanished. Then I noticed that in IE6 the position is wrong, it had been correct.

I am very new to this, but my guess is their is something in the css which moves the items in the Left side to the correct poistion, it also surrounds all items on the left in a grey box. Turning on the module suffix meant the imageslideshow module was excempt from the 'something in the css' that had otherwise put it in the correct place...

I still dont know how to fix it though.



IE6-Issue.doc
0
 
LVL 10

Expert Comment

by:fearialtog
ID: 23668761
OK the best approach to solve your problem is to return your pages so that they look perfect in Firefox - if it works in Firefox then it is working correctly. IE is the problem, as it contains a number of bugs. However, many of those bugs have been corrected in version 7. The best approach to get pages to display correctly in IE6 you have to create a separate css file (called in the example below ie6.css) and tell the browser to find that file if the visitor is using IE6. This is called a conditional comment.


Paste the code below into the head section of your template. Then create a file called ie6.css in the css folder of the template you are using. You only need to add a few lines to this css file to control the errant behaviour.

http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/


<!--[if IE 6]>
<link href="/templates/YourTemplateName/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Open in new window

0
 
LVL 5

Author Comment

by:ardrac
ID: 23668932
Thanks. I understand the idea of using a seperate css file for ie6 only. I am also fine with changing the site so it works fine in Firefox.

The problem I have is that I do not know what to put into the ie6.css file to make it display correctly.

0
 
LVL 10

Accepted Solution

by:
fearialtog earned 1500 total points
ID: 23672171
This is a difficult one because the author of this module has not tested it with IE6 therefore you are left in the dark. Personally I would use Rokbox it is harder to install but easier to configure.

I cannot find where the problem lies but this is how you start to correct for IE6.

Copy all the items in your CSS file that contain briask - eg  ul.briask-iss {
Then make adjustments to margin and positioning attributes until you find the problem. I would start by copying the items from the file below into your new IE6 css file and go through each item there. (first try setting margin values to minus eg. -20).

Regards

http://techsolvers.dyndns.org/Joomla/modules/mod_briaskISS/mod_briaskISS.css
 
@CHARSET "ISO-8859-1";
 
 ul.briask-iss {position:relative;list-style:none;list-style-image:none;margin:0px auto;padding:0px;overflow:hidden;border:none;background:none;}
 ul.briask-iss li {list-style:none;margin:0px;padding:0px;border:none;background:none;}
 ul.briask-iss li a {margin:0px;padding:0px;border:none;background:none;}
 ul.briask-iss li a img {display:none;position:absolute;padding:0px;top:0;left:0;border:none;background:none;}
 ul.briask-iss li img {display:none;position:absolute;top:0;padding:0px;left:0;border:none;background:none;}

Open in new window

0
 
LVL 5

Author Closing Comment

by:ardrac
ID: 31597418
Thanks. I don't have the time to continue with this at the moment.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question