Joomla / IE6 Display Issue

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

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?

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.

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,

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

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

Select allOpen in new window

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.

Thanks. I don't have the time to continue with this at the moment.