Page 1 of 1
IE6 Stylesheet
Posted: Mon Apr 20, 2009 9:01 am
by vapors1911
Attached is a CSS stylesheet that will make the page display correctly with IE6.
------------------------------------------------------
To install:
-Replace the layout.tpl file.
-Add the stylesheet_ie6.css file to the stylesheet directory.
------------------------------------------------------
-This corrects the issue where the bottom middle content box or 'latest products' was being pushed to the very bottom left hand corner of the page, underneath all of the menus, in Internet Explorer 6.
-This also corrects the issue where the site is not centered in Internet Exporer 6.
-This also corrects the PNG issue in IE 6, where transparent PNGs are not rendered correctly. However, the small icon png's, are still grey.
There is a separate style sheet for IE6, which could be converted into one style sheet with some PHP if statements. The most strait forward way to use the stylesheet is with a simple if statement to check if the browser is IE6.
Here is the if statement that identify's if the browser is IE6, this is already included into the attached layout.tpl file.
Code: Select all
if(substr_count($_SERVER['HTTP_USER_AGENT'],"MSIE 6")){
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"catalog/view/theme/default/stylesheet/stylesheet_ie6.css\" />";
}
else{
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"catalog/view/theme/default/stylesheet/stylesheet.css\" />";
}
There is also a section which sets the height of the div called 'content' in the layout.tpl file. In IE6, if you do not have many items, the content table covers the right menus, so you cannot see them.
Code: Select all
// If browser is IE, set the height of this div, so it does not overlap the right side menus
if(substr_count($_SERVER['HTTP_USER_AGENT'],"MSIE 6")){
echo "<div id=\"content\" style='height: 540px;'>";
}
else{
echo "<div id=\"content\">";
}
Re: IE6 Stylesheet
Posted: Mon Apr 20, 2009 10:39 am
by baris22
Thanks for this. There is a small mistake on layout.tpl. I think you used the older version of it. that is not the latest version. stylesheet_ie6.css also is not for the latest version and it needs to be corrected according to the latest version. I did a quick correction on layout.tpl and
Correct one should be
Code: Select all
<?php echo '<?xml version="1.0" encoding="UTF-8"?>' . "\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $direction; ?>" lang="<?php echo $language; ?>" xml:lang="<?php echo $language; ?>">
<head>
<title><?php echo $title; ?></title>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<base href="<?php echo $base; ?>" />
<?php
// Check if the browser is IE6, if yes, display a special style sheet
if(substr_count($_SERVER['HTTP_USER_AGENT'],"MSIE 6")){
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"catalog/view/theme/default/stylesheet/stylesheet_ie6.css\" />";
?>
<!-- Corrects PNG images in IE6, so they are transparant and not grey -->
<script language="JavaScript">
function correctPNG()
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<?
// end of IF Internet explorer 6 statement
}
else{
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"catalog/view/theme/default/stylesheet/stylesheet.css\" />";
}
?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/thickbox/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/thickbox/thickbox.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
</head>
<body>
<div id="container">
<div id="header"><?php echo $header; ?></div>
<div id="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>
<div id="column_left">
<?php foreach ($modules as $module) { ?>
<?php if ($module['position'] == 'left') { ?>
<?php echo ${$module['code']}; ?>
<?php } ?>
<?php } ?>
</div>
<div id="column_right">
<?php foreach ($modules as $module) { ?>
<?php if ($module['position'] == 'right') { ?>
<?php echo ${$module['code']}; ?>
<?php } ?>
<?php } ?>
</div>
<?php
// If browser is IE, set the height of this div, so it does not overlap the right side menus
if(substr_count($_SERVER['HTTP_USER_AGENT'],"MSIE 6")){
echo "<div id=\"content\" style='height: 540px;'>";
}
else{
echo "<div id=\"content\">";
}
?>
<?php echo $content; ?></div>
<div id="footer"><?php echo $footer; ?></div>
</div>
</body>
</html>
Re: IE6 Stylesheet
Posted: Tue Apr 21, 2009 6:32 am
by vapors1911
Yeah, my version is a few weeks old. I'm hoping the development team will try make the changes into the main code base, so that way its easier to upgrade without having to add these changes in again.
Re: IE6 Stylesheet
Posted: Fri Apr 24, 2009 10:20 pm
by mal-schauen
LOOK HERE .....
click here
Re: IE6 Stylesheet
Posted: Wed May 06, 2009 7:16 pm
by bbs0769
-Replace the layout.tpl file.
-Add the stylesheet_ie6.css file to the stylesheet directory.
do as above.show up bug,
Re: IE6 Stylesheet
Posted: Wed May 06, 2009 7:21 pm
by Daniel
you know according to wikipedia IE6 came out in 2001.
Re: IE6 Stylesheet
Posted: Thu May 07, 2009 8:54 am
by bbs0769
Sir,What can I do for my store? please!
Re: IE6 Stylesheet
Posted: Tue May 19, 2009 11:51 am
by scarlson43017
Daniel wrote:you know according to wikipedia IE6 came out in 2001.
I have two web sites that get an average of about 250 unique visitors each per day, and for 2009 over 11% of the browsers are IEv6. The third largest group of clients. That's still a pretty significant number.
IE7 - 44.1%
FF3 - 28.0%
IE6 - 11.9%
IE8 - 4.9%
Chrome 1.0 - 2.89%
Safari 3.2 - 1.85%
Others - each less than 1%
Re: IE6 Stylesheet
Posted: Thu Jul 30, 2009 10:59 pm
by vapors1911
It looks like opencart is now working in IE6 by default. Thats great to see!!
Re: IE6 Stylesheet
Posted: Fri Jul 31, 2009 12:01 am
by Rich
scarlson43017 wrote:
I have two web sites that get an average of about 250 unique visitors each per day, and for 2009 over 11% of the browsers are IEv6. The third largest group of clients. That's still a pretty significant number.
IE7 - 44.1%
FF3 - 28.0%
IE6 - 11.9%
IE8 - 4.9%
Chrome 1.0 - 2.89%
Safari 3.2 - 1.85%
Others - each less than 1%
That is quite disturbing, that almost 12% of people living in stone age
Re: IE6 Stylesheet
Posted: Fri Jul 31, 2009 1:19 am
by JNeuhoff
I am not one of these 12%, and I feel no sorry if someone else still does and experiences problems with standard-compliant websites.
