I am having some display issues in MS IE 6.0
I attach a screen capture: msie-6.0-windows-2000.png (taken from browsershots.org - I don't have IE as I'm on linux/mac)
It looks fine in FF2+, Opera, Safari, IE7+
3 major issues in IE6 that can be seen in the image:
1) The rounded top background image for the right side content is pushed way to the right
2) The left side has some bits missing (white areas)
3) The bottom of the centre content is screwed up (orange "up" image shows left and right and also grey background image is pushed down.
Below is my NCleanBlue template code:
Code: Select all
</__body>
<div id="ncleanblue">
<div id="pagewrapper" class="core-wrap-960 core-center">
{* start accessibility skip links *}
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Navigation' accesskey='n' text='Navigation'}</li>
<li>{anchor anchor='main' title='Content' accesskey='s' text='Content'}</li>
</ul>
{* end accessibility skip links *}
<hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}
{* Start Header, with logo image that links to the default start page *}
<div id="header" class="util-clearfix">
{* logo image that links to the default start page. Logo image is changed in the style sheet "Layout: NCleanBlue" *}
<div id="logo" class="core-float-left">
{cms_selflink dir="start" text="$sitename ホームへ戻る"}
</div>
<!--
{* Start Search, the input "Submit" is using an image, CSS: div#search input.search-button *}
{* <div id="search" class="core-float-right">
{search search_method="post"}
</div> *}
{* End Search *}
-->
<span class="util-clearb"> </span>
{* Start Navigation, style sheet "Layout: NCleanBlue", starting at Menu ROOT *}
<h2 class="accessibility util-clearb">Navigation</h2>
{* anything class="accessibility" is hidden for visual browsers by CSS *}
<div class="page-menu util-clearfix">
{menu template='cssmenu_ulshadow.tpl'}
</div>
<hr class="accessibility util-clearb" />
{* End Navigation *}
</div>
{* End Header *}
{* Start Content (Navigation and Content columns) *}
<div id="content" class="util-clearfix">
{* Start Bar *}
<div id="bar" class="util-clearfix">
{* Start Breadcrumbs *}
<div class="breadcrumbs core-float-left">
{breadcrumbs starttext='現在のページ ' root='Home' delimiter='»'}
</div>
{* End Breadcrumbs *}
{* Start TextSize *}
{global_content name='textsize'}
{* End TextSize *}
<hr class="accessibility util-clearb" />
</div>
{* End Bar *}
{* Start left side *}
<div id="left" class="core-float-left">
{* Start Sub Navigation, stylesheet "Navigation: Simple - Vertical" *}
{global_content name='subnav'}
{* End Sub Navigation *}
<span class="sbar-bottom"> </span>
{* Start News *}
{global_content name='news'}
{* End News *}
<span class="sbar-bottom"> </span>
{* Start help info *}
{global_content name='tejun'}
{* End order info *}
<span class="sbar-bottom"> </span>
{* Start basket *}
{global_content name='kago'}
{* End basket *}
<span class="sbar-bottom"> </span>
</div>
{* End left side *}
{* Start Content Area, right side *}
<div id="main" class="core-float-right">
{* main top, holds top image and print image *}
<div class="main-top">
{* <div class="print core-float-right">
{print showbutton=false}
</div>
*} </div>
{* main content *}
<div class="main-main util-clearfix">
<h1 class="title">{title}</h1>
{content}
</div>
{* Start main bottom and relational links *}
<div class="main-bottom">
<div class="right49 core-float-right">
{anchor anchor='main' text='^ 上へ'}
</div>
<div class="left49 core-float-left">
<span>
{cms_selflink dir="previous" label="前のページ： "}
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "次のページ" *}
</span>
<span>
{cms_selflink dir="next" label="次のページ： "}
</span>
</div>
{* End relational links *}
<hr class="accessibility" />
</div>
{* End main bottom *}
</div>
{* End Content Area, right side *}
</div>
{* End Content *}
</div>
{* end pagewrapper *}
<span class="util-clearb"> </span>
{* Start Footer *}
<div id="footer-wrapper">
<div id="footer" class="core-float-left">
{* edit the footer in the Global Content Block called "footer" *}
<div class="block cms core-float-left">
{global_content name='footer'}
</div>
<span class="util-clearb"> </span>
</div>
</div>
{* End Footer *}
</div>
{* End Div *}
<__body>
1) Hidden the search and print areas
2) Moved the breadcrumbs to the left
3) Added submenu, help and basket area to the left side
Also attached is my main css (NCleanBlue.css). Menu and content styling not included.
Changes to the css
1) changed the width of the central area from 690px to 734px (I also modded the background image to take account of this)
2) Removed background image from header and footer and replaced with background colour.
Does anyone have any ideas how to correct the appearance in IE 6?
Around 25% of users in Japan are on IE6, so I'd like to med it if possible.
Any ideas welcome.
Many thanks.
Ben
