Page 1 of 7 123 ... LastLast
Results 1 to 10 of 64
  1. #1
    Join Date
    Jan 2006
    Location
    Portland, Oregon
    Posts
    276
    Plugin Contributions
    0

    Internet Explorer 7.0 Released - HELP!

    Okay, so IE7 was officially released today.

    I had originally thought I had about another month or two before this happened.

    So it took me forever to get IE6 and FF to look the same and now IE7 is looking like IE6 used to. uugghhh!

    Basically this is what is happening the main content is sliding up underneath the header.

    follow this link and check it out ( a browser cam capture for IE 7 beta 3)

    http://www.oldwestgames.com/images/b.../explorer7.jpg

    this is how it used to look in IE6.

    So now I have to fix it for IE7

    and I have no idea where to start and I'm sure that it will screw the IE6 and FF views which make up the majority of my browser views (according to analytics).

    But with the release of IE7 and the emails going out worldwide to upgrade I'm going to start seeing massive views and missing sales.

    I really need some help here.

    here's a clip from my stylesheet for wrappers and navigation

    Code:
    /*wrappers - page or section containers*/
    #mainWrapper { background-color: #fff; background-image: url(/includes/templates/future_zen/images/main_bg_snake.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; width: 806px; vertical-align: top; }
    
    #headerWrapper {
    	width:806px;
    	}
    
    #contentMainWrapper {
    	top: 15px;
    	}
    
    #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    	margin: 0em;
    	padding: 0em;
    	}
    
    #logoWrapper { background-color: #ffffff; width:800px; height:85px; background-image:none; background-repeat:no-repeat; background-position:left 50%; }
    
    #logoWrapper {
    	position: relative;
    	top: -8px;
    	}
    
    #navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    	margin: auto;
    	}
    	
    	
    #navColumnOneWrapper, #navColumnTwoWrapper {
    	}
    
    #tagline { padding-top:10px; color:#000000; font-size: 2em; background-position: center 0; text-align : left; vertical-align: middle; }
    
    #sendSpendWrapper {
    	border: 1px solid #cacaca;
    	float: right;
    	margin: 0em 0em 1em 1em;
    	}
    
    .floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
    	margin: 0;
    	width: 47%;
    	}
    
    .wrapperAttribsOptions {
    	margin: 0.3em 0em;
    	}
    
    /*navigation*/
    
    .navSplitPagesResult {}
    .navSplitPagesLinks {}
    .navNextPrevCounter {
    	margin: 0em;
    	font-size: 0.9em;
    	}
    .navNextPrevList {
    	display: inline;
    	white-space: nowrap;
    	margin: 0;
    	padding:  0.5em 0em;
    	list-style-type: none;
    	}
    	
    	#mainWrapper {
    	position: relative; top: 25px;
    	}
    
    #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
    	margin: 0;
    	background-color: #ffffff;
    	font-weight: bold;
    	color: #ffffff;
    	height: 1%;
    	width: 806px;
    	}
    
    #navMain ul, #navSupp ul, #navCatTabs ul  {
    	margin: 0;
    	padding:  0.5em 0em;
    	list-style-type: none;
    	text-align: center;
    	line-height: 1.5em;
    	}
    
    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	white-space: nowrap;
    	}
    
    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    	text-decoration: none;
    	padding: 0 0.5em;
    	margin: 0;
    	color: #900;
    	}
    
    #navEZPagesTOCWrapper {
    	font-weight: bold;
    	float: right;
    	height: 1%;
    	border: 1px solid #000000;
    	}
    
    #navEZPagesTOC ul {
    	margin: 0;
    	padding:  0.5em 0em;
    	list-style-type: none;
    	line-height: 1.5em;
    	}
    
    #navEZPagesTOC ul li {
    	white-space: nowrap;
    	}
    
    #navEZPagesTOC ul li a {
    	padding: 0em 0.5em;
    	margin: 0;
    	}
    	
    #navMainSearch {
    	width: 780px;
    	}	
    
    #navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    	margin: 0.5em;
    	}
    
    #navBreadCrumb { margin-top:16px; font-size: 0.95em; font-weight: bold; background-image: url(/images/mainpage_bg_tr_sm.jpg); background-position: center top; height: 40px; padding: 0.5em 0 0.5em 1.5em; }
    
    #navEZPagesTop {
    	background-image:none;
    	background-repeat:no-repeat;
    	background-position:right bottom;
    	font-size: 0.95em;
    	font-weight: bold;
    	margin: 0;
    	padding: 0.5em 0 0.5em 1.5em;
    	}
    	
    #headerWrapper { position:relative; top:25px; background-color: #ffffff; background-image:none; background-repeat:no-repeat; background-position:left bottom; }
    
    #navColumnOne, #navColumnTwo {
    	background-color: #fff;
    	}
    
    #nav        { color: #fff; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #000; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 800px; height: 15px; border-top: 1px solid #000000; border-bottom: 1px solid #000000   }
    
    #nav ul   { color: #fff; font-size: 10px; line-height: 1px; background-color: #000; text-align: center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1000    }
    
    #nav a  { color: #fff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #000; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto  }
    
    #nav a:link, #nav a:visited, #nav a:active       { color: #fff; background-color: #000; z-index: 1000 }
    
    #nav a:hover, #nav a:focus     { color: #000; background-color: #9A7664; z-index: 1000 }
    
    #nav li    { text-align: left; z-index: 1000; width: 160px; float: left }
    
    #nav li ul          { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    #nav li ul.leftside          { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    #nav li ul.rightside           { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    #nav li ul li   { background-color: #fff; z-index: 1000; width: 159px; border-bottom: 1px solid #000000  }
    
    #nav li ul li a:hover   { z-index: 1000; border-style: none }
    
    #nav li:hover ul, #nav li.sfhover ul     { z-index: 1000; left: auto }
    
    #nav li ul ul      { margin: -16px 0 0 158px; position: absolute; z-index: 1000 }
    
    #nav li ul ul.two_lines      { margin: -31px 0 0 158px; position: absolute; z-index: 1000 }
    
    #nav li ul ul.left_popout     { margin: -31px 0 0 -158px; position: absolute; z-index: 1000 }
    
    #nav li:hover ul ul, #nav li.sfhover ul ul  { z-index: 1000; left: -999em }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul   { z-index: 1000; left: auto }
    
    /* extra positioning rules for limited noscript keyboard accessibility */
    
    #nav li a:focus + ul   { margin-left: 0; z-index: 1000  }
    
    #nav li li a:focus + ul  { margin-left: 200px; z-index: 1000 }
    
    #nav li li a:focus     { color: #9A7664; background: #000; margin-left: 1000em; z-index: 1000 }
    
    #nav li li li a:focus     { color: #9A7664; background: #000; margin-left: 200px; z-index: 1000 }
    
    #nav li:hover a:focus, #nav li.sfhover a.sffocus     { color: #9A7664; background-color: #000; margin-left: 0; z-index: 1000 }
    
    #nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul     { color: #9A7664; background-color: #000; margin-left: 10em; z-index: 1000 }
    
    #content {
    	clear: left;
    	color: #9a7664;
    }
    
    /*The main content classes*/
    #contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    	vertical-align: top;
    	}
    
    /*.content,*/ #productDescription, .shippingEstimatorWrapper {
    	/*font-size: 1.2em;*/
    	background-image: url(/images/mainpage_bg_tr_sm.jpg); background-repeat: repeat-x; background-position: center top; padding: 0.5em; }
    
    .alert {
    	color: #FF0000;
    	margin-left: 0.5em;
    	}
    .advisory {}
    .important {
    	font-weight: bold;
    	}
    .notice {}
    .rating{}
    .gvBal {
    	float: right;
    	}
    
    .centerColumn{
    width: 486px
    }
    .centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
    	padding: 0.8em;
    	}
    
    .smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { color: #900; font-size: 12px; text-decoration: none; }
    Thanks in advance.

    i'll try and give something cool or a donation to anyone who can figure this out.

  2. #2
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Explorer 7.0 Released - HELP!

    From the source "old west games"

    <div id="logoWrapper">



    <script type="text/javascript"><!--//--><![CDATA[//><!--

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (document.all) { //MS IE
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    else { //IE 5.2 Mac does not support attachEvent
    var old = window.onload;
    window.onload = function() { if (old) old(); sfHover(); }
    }
    }


    //--><!]]></script>
    <div> /* close this </div>

  3. #3
    Join Date
    Jan 2006
    Location
    Portland, Oregon
    Posts
    276
    Plugin Contributions
    0

    Default Re: Explorer 7.0 Released - HELP!

    Quote Originally Posted by clydejones View Post
    From the source "old west games"

    <div id="logoWrapper">



    <script type="text/javascript"><!--//--><![CDATA[//><!--

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (document.all) { //MS IE
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    else { //IE 5.2 Mac does not support attachEvent
    var old = window.onload;
    window.onload = function() { if (old) old(); sfHover(); }
    }
    }


    //--><!]]></script>
    <div> /* close this </div>
    thanks, but

    now, even though they look the same but now they look like this...

    http://www.oldwestgames.com/images/ff_ie_afterfix.jpg

    obviously I had to revert back to my other tpl_header file but I need to find out what's causing the new problem...

    more help?

    HERE'S THE WHOLE CSS FILE

    Code:
    /* Edited with EditCSS */
    /**** LINK-tag style sheet stylesheet.css ****/
    
    /**
     * Main CSS Stylesheet
     *
     * @package templateSystem
     * @copyright Copyright 2003-2005 Zen Cart Development Team
     * @copyright Portions Copyright 2003 osCommerce
     * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
     * @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
     */
    
    body { margin: 0; font-size: small; color: #000; font-family: Garamond, "times new roman", "Palatino Linotype"; background-color: #fff; }
    
    a img { border-style: none; border-width: medium; }
    
    a:link, #navEZPagesTOC ul li a { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; text-decoration: none; }
     
    a:visited { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; }
    
    a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; }
    
    a:active { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; }
    
    h1 {
    	font-size: 1.5em;
    	}
    
    h2 {
    	font-size: 12px;
    	}
    
    h3 {
    	font-size: 1.3em;
    	}
    
    h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
    	font-size: 1.1em;
    	}
    
    .choose{
    	 color: #900; font-size: 12pt; font-family: Garamond, "times new roman", "Palatino Linotype"; text-decoration: none; 
    	}
    
    .biggerText {
    	font-size: 1.2em;
    	}
    
    h1, h2, h3, h4, h5, h6 {
    	margin: 0.3em;
    	}
    
    CODE {
    	font-family: arial, verdana, helvetica, sans-serif;
    	font-size: 1em;
    	}
    
    FORM, SELECT, INPUT {
    	display: inline;
    	font-size: 1em;
    	margin: 0.1em;
    	}
    
    TEXTAREA {
    	float: left;
    	margin: auto;
    	display: block;
    	width: 95%;
    	}
    
    input:focus, select:focus, textarea:focus {
    	background: #fff;
    	}
    
    FIELDSET {
    	padding: 0.5em;
    	margin: 0.5em 0em;
    	border: 1px solid #cccccc;
    	}
    
    LEGEND {
    	font-weight: bold;
    	padding: 0.3em;
    	}
    
    LABEL, h4.optionName {
    	line-height: 1.5em;
    	padding: 0.2em;
    	}
    
    LABEL.checkboxLabel, LABEL.radioButtonLabel {
    	margin: 0.5em 0.3em;
    	}
    
    #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    	float: left;
    	}
    	
    #logo {
    	display:none;
    	margin: 40px 0 0 350px;
    }
    
    LABEL.inputLabel {
    	width: 11em;
    	float: left;
    	}
    
    LABEL.inputLabelPayment {
    	width: 15em;
    	float: left;
    	}
    
    LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
    	width: 12em;
    	float: left;
    	}
    
    P, ADDRESS {
    	padding: 0.5em;
    	}
    
    ADDRESS {
    	font-style: normal;
    	}
    
    .clearBoth {
    	clear: both;
    	}
    
    HR {
    	height: 1px;
    	margin-top: 0.5em;
    	border: none;
    	border-bottom: 1px solid #9a9a9a;
    	}
    
    /*warnings, errors, messages*/
    .messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    	line-height: 1.8em;
    	padding: 0.2em;
    	border: 1px solid #000000;
    	}
    
    .messageStackWarning, .messageStackError {
    	background-color: #ff0000;
    	color: #ffffff;
    	}
    
    .messageStackSuccess {
    	background-color: #99FF99;
    	color: #000000;
    	}
    
    .messageStackCaution {
    	background-color: #FFFF66;
    	color: #000000;
    	}
    
    /*wrappers - page or section containers*/
    #mainWrapper { background-color: #fff; background-image: url(/includes/templates/future_zen/images/main_bg_snake.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; width: 806px; vertical-align: top; }
    
    #headerWrapper {
    	width:806px;
    	}
    
    #contentMainWrapper {
    	top: 15px;
    	}
    
    #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    	margin: 0em;
    	padding: 0em;
    	}
    
    #logoWrapper { background-color: #ffffff; width:800px; height:85px; background-image:none; background-repeat:no-repeat; background-position:left 50%; }
    
    #logoWrapper {
    	position: relative;
    	top: -8px;
    	}
    
    #navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    	margin: auto;
    	}
    	
    	
    #navColumnOneWrapper, #navColumnTwoWrapper {
    	}
    
    #tagline { padding-top:10px; color:#000000; font-size: 2em; background-position: center 0; text-align : left; vertical-align: middle; }
    
    #sendSpendWrapper {
    	border: 1px solid #cacaca;
    	float: right;
    	margin: 0em 0em 1em 1em;
    	}
    
    .floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
    	margin: 0;
    	width: 47%;
    	}
    
    .wrapperAttribsOptions {
    	margin: 0.3em 0em;
    	}
    
    /*navigation*/
    
    .navSplitPagesResult {}
    .navSplitPagesLinks {}
    .navNextPrevCounter {
    	margin: 0em;
    	font-size: 0.9em;
    	}
    .navNextPrevList {
    	display: inline;
    	white-space: nowrap;
    	margin: 0;
    	padding:  0.5em 0em;
    	list-style-type: none;
    	}
    	
    	#mainWrapper {
    	position: relative; top: 25px;
    	}
    
    #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
    	margin: 0;
    	background-color: #ffffff;
    	font-weight: bold;
    	color: #ffffff;
    	height: 1%;
    	width: 806px;
    	}
    
    #navMain ul, #navSupp ul, #navCatTabs ul  {
    	margin: 0;
    	padding:  0.5em 0em;
    	list-style-type: none;
    	text-align: center;
    	line-height: 1.5em;
    	}
    
    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	white-space: nowrap;
    	}
    
    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    	text-decoration: none;
    	padding: 0 0.5em;
    	margin: 0;
    	color: #900;
    	}
    
    #navEZPagesTOCWrapper {
    	font-weight: bold;
    	float: right;
    	height: 1%;
    	border: 1px solid #000000;
    	}
    
    #navEZPagesTOC ul {
    	margin: 0;
    	padding:  0.5em 0em;
    	list-style-type: none;
    	line-height: 1.5em;
    	}
    
    #navEZPagesTOC ul li {
    	white-space: nowrap;
    	}
    
    #navEZPagesTOC ul li a {
    	padding: 0em 0.5em;
    	margin: 0;
    	}
    	
    #navMainSearch {
    	width: 780px;
    	}	
    
    #navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    	margin: 0.5em;
    	}
    
    #navBreadCrumb { margin-top:16px; font-size: 0.95em; font-weight: bold; background-image: url(/images/mainpage_bg_tr_sm.jpg); background-position: center top; height: 40px; padding: 0.5em 0 0.5em 1.5em; }
    
    #navEZPagesTop {
    	background-image:none;
    	background-repeat:no-repeat;
    	background-position:right bottom;
    	font-size: 0.95em;
    	font-weight: bold;
    	margin: 0;
    	padding: 0.5em 0 0.5em 1.5em;
    	}
    	
    #headerWrapper { position:relative; top:25px; background-color: #ffffff; background-image:none; background-repeat:no-repeat; background-position:left bottom; }
    
    #navColumnOne, #navColumnTwo {
    	background-color: #fff;
    	}
    
    #nav        { color: #fff; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #000; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 800px; height: 15px; border-top: 1px solid #000000; border-bottom: 1px solid #000000   }
    
    #nav ul   { color: #fff; font-size: 10px; line-height: 1px; background-color: #000; text-align: center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1000    }
    
    #nav a  { color: #fff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #000; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto  }
    
    #nav a:link, #nav a:visited, #nav a:active       { color: #fff; background-color: #000; z-index: 1000 }
    
    #nav a:hover, #nav a:focus     { color: #000; background-color: #9A7664; z-index: 1000 }
    
    #nav li    { text-align: left; z-index: 1000; width: 160px; float: left }
    
    #nav li ul          { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    #nav li ul.leftside          { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    #nav li ul.rightside           { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    #nav li ul li   { background-color: #fff; z-index: 1000; width: 159px; border-bottom: 1px solid #000000  }
    
    #nav li ul li a:hover   { z-index: 1000; border-style: none }
    
    #nav li:hover ul, #nav li.sfhover ul     { z-index: 1000; left: auto }
    
    #nav li ul ul      { margin: -16px 0 0 158px; position: absolute; z-index: 1000 }
    
    #nav li ul ul.two_lines      { margin: -31px 0 0 158px; position: absolute; z-index: 1000 }
    
    #nav li ul ul.left_popout     { margin: -31px 0 0 -158px; position: absolute; z-index: 1000 }
    
    #nav li:hover ul ul, #nav li.sfhover ul ul  { z-index: 1000; left: -999em }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul   { z-index: 1000; left: auto }
    
    /* extra positioning rules for limited noscript keyboard accessibility */
    
    #nav li a:focus + ul   { margin-left: 0; z-index: 1000  }
    
    #nav li li a:focus + ul  { margin-left: 200px; z-index: 1000 }
    
    #nav li li a:focus     { color: #9A7664; background: #000; margin-left: 1000em; z-index: 1000 }
    
    #nav li li li a:focus     { color: #9A7664; background: #000; margin-left: 200px; z-index: 1000 }
    
    #nav li:hover a:focus, #nav li.sfhover a.sffocus     { color: #9A7664; background-color: #000; margin-left: 0; z-index: 1000 }
    
    #nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul     { color: #9A7664; background-color: #000; margin-left: 10em; z-index: 1000 }
    
    #content {
    	clear: left;
    	color: #9a7664;
    }
    
    /*The main content classes*/
    #contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    	vertical-align: top;
    	}
    
    /*.content,*/ #productDescription, .shippingEstimatorWrapper {
    	/*font-size: 1.2em;*/
    	background-image: url(/images/mainpage_bg_tr_sm.jpg); background-repeat: repeat-x; background-position: center top; padding: 0.5em; }
    
    .alert {
    	color: #FF0000;
    	margin-left: 0.5em;
    	}
    .advisory {}
    .important {
    	font-weight: bold;
    	}
    .notice {}
    .rating{}
    .gvBal {
    	float: right;
    	}
    
    .centerColumn{
    width: 486px
    }
    .centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
    	padding: 0.8em;
    	}
    
    .smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { color: #900; font-size: 12px; text-decoration: none; }
    
    /*Shopping Cart Display*/
    #cartAdd {
    	float: right;
    	text-align: center;
    	margin: 1em;
    	border: 1px solid #000000;
    	padding: 1em;
    	}
    
    .tableHeading TH {
    	border-bottom: 1px solid #cccccc;
    	}
    
    .tableHeading, #cartSubTotal {
    	background-color: #e9e9e9;
    	 }
    
    #cartSubTotal {
    	border-top: 1px solid #cccccc;
    	font-weight: bold;
    	text-align: right;
    	line-height: 2.2em;
    	padding-right: 2.5em;
    	}
    
    .tableRow, .tableHeading, #cartSubTotal {
    	height: 2.2em;
    	}
    
    .cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
    	padding: 0.5em 0em;
    	}
    
    .cartUnitDisplay, .cartTotalDisplay {
    	text-align: right;
    	padding-right: 0.2em;
    	}
    
    #scUpdateQuantity {
    	width: 2em;
    	}
    
    .cartQuantity {
    	width: 4.7em;
    	}
    
    .cartNewItem {
    	color: #33CC33;
    	position: relative;  /*do not remove-fixes stupid IEbug*/
    	}
    
    .cartOldItem {
    	color: #660099;
    	position: relative;   /*do not remove-fixes stupid IEbug*/
    	}
    
    .cartBoxTotal {
    	text-align: right;
    	font-weight: bold;
    	}
    
    .cartRemoveItemDisplay {
    	width: 3.5em;
    	}
    
    #cartAttribsList {
    	margin-left: 1em;
    	}
    
    #mediaManager {
    width: 50%; 
    margin: 0.2em;
    padding: 0.5em;
    }
    .normalprice, .productSpecialPriceSale {
    	text-decoration: line-through;
    	}
    
    .productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    	color: #ff0000;
    	}
    
    #cartBoxListWrapper ul, #ezPageBoxList ul {
    	list-style-type: none;
    	}
    
    #cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
    	margin: 0;
    	padding: 0.2em 0em;
    	} 
    
    .totalBox {
    	width: 5.5em;
    	text-align: right;
    	padding: 0.2em;
    	}
    
    .lineTitle, .amount {
    	text-align: right;
    	padding: 0.2em;
    	}
    
    .amount {
    	width: 5.5em;
    	}
    
    /*Image Display*/
    #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
    	margin: 0em 1em 1em 0em ;
    	}
    #productAdditionalImages { display: none; }
    .categoryIcon {}
    #cartImage {
    	margin: 0.5em 1em;
    	}
    
    /*Attributes*/
    .attribImg {
    	width: 20%;
    	margin: 0.3em 0em;
    }
    
    .attributesComments {}
    
    /*list box contents*/
    .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
    	margin: 1em 0em;
    	}
    
    /*sideboxes*/
    .columnLeft {}
    
    h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label { font-size: 12px; color: #fff; background-color: #9a7664; }
    	
    h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{ color: #fff; font-size: 12px; background-color: #9a7664; text-decoration: none; } 
    
    .leftBoxHeading, .rightBoxHeading { font-size: 12px; margin: 0; background-image:none; background-repeat:no-repeat; padding: 0.5em 0.2em; border: solid 2px #000000;}
    
    .centerBoxWrapper { background-color: #fff; margin: 0; background-image:none; background-repeat:no-repeat; background-position:left top; border: solid 2px #9a7664; height: 1%  }
    
    .centerBoxHeading { color: #fff; font-size: 12px; background-color: #000000; margin: 0; height:25px; background-image:none; background-repeat:no-repeat; background-position:right top; padding: 0.5em 0.2em; border-bottom: 2px solid #9a7664; }
    
    .leftBoxContainer, .rightBoxContainer {
    	margin-top: 1.5em;
    	}
    
    .sideBoxContent {
    	background-image:none;
    	background-repeat:no-repeat;
    	background-position:50% bottom;
    	padding: 0.4em;
    	border: solid 2px #000000;
    	border-top: solid 0px;
    	}
    
    .centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    	text-align: center;
    	}
    	
    #siteinfoLegal { color: #9A7664; font-weight: bold; background-color: #ffffff; width:806px; }
    
    #bestsellers .wrapper {
    	margin: 0em 0em 0em 1.5em;
    	}
    
    #bestsellers ol {
    	padding: 0;
    	margin-left: 1.1em;
    	}
    
    #bestsellers li {
    	padding: 0;
    	margin: 0.3em 0em 0.3em 0em;
    	}
    
    #bannerboxHeading {
    	background-color: #9a7664; border: solid 2px #000000;
    }
    
    #upProductsHeading {
    	text-align: left;
    	}
    
    #upDateHeading {
    	text-align: right;
    	}
    
    /*misc*/
    .back {
    	float: left;
    	}
    
    .forward {
    	float: right;
    	}
    
    .bold {
    	font-weight: bold;
    	}
    
    .rowOdd {
    	background-color: #E8E8E8;
    	height: 1.5em;
    	vertical-align: top;
    	}
    
    .rowEven {
    	background-color: #F0F0F0;
    	height: 1.5em;
    	vertical-align: top;
    	}
    
    CAPTION {
    	/*display: none;*/
    	}
    
    #myAccountGen li, #myAccountNotify li {
    	margin: 0;
    	} 
    
    .accountTotalDisplay, .accountTaxDisplay {
    	width: 20%;
    	text-align: right;
    	/*vertical-align: top*/
    	}
    
    .accountQuantityDisplay {
    	width: 10%;
    	vertical-align: top
    	}
    
    TR.tableHeading {
    	background-color: #cacaca;
    	height: 2em;
    	}
    
    #siteMapList {
    	width: 90%;
    	float: right;
    	}
    
    .ratingRow {
    	margin: 1em 0em 1.5em 0em;
    	}
    
    LABEL#textAreaReviews {
    	font-weight: normal;
    	margin: 1em 0em;
    	}
    
    #popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
    	background-color: #ffffff;
    	}
    
    /* Products Listing Adding */
    .productListing-odd {
    background-color: #fff;
    height: 132px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
    padding: 0.2em 0;
    }
    
    .productListing-even {
    background-color: #ebebeb;
    height: 132px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
    padding: 0.2em 0;
    }
    
    .productListing-data {
    padding: 0.5em 0.2em 0.5em 0.2em;
    border: 1px dotted #E6E6E6;
    }
    
    .itemTitle, .listingDescription, {
    padding: 0 1.5em 0 0.6em;
    text-align: left;
    }
    Last edited by mafiasam; 20 Oct 2006 at 06:39 AM.

  4. #4
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Explorer 7.0 Released - HELP!

    Try adjusting the top margin of your logo declaration:

    #logo {
    display:none;
    margin: 40px 0 0 350px;
    }

    You might also want to make the following adjustments by deleting the parts in red and adding the part in green:

    #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
    }

    #logo {
    text-align: center;
    display:none;
    margin: 40px 0 0 350px;
    }

  5. #5
    Join Date
    Jan 2006
    Location
    Portland, Oregon
    Posts
    276
    Plugin Contributions
    0

    Default Re: Explorer 7.0 Released - HELP!

    Quote Originally Posted by clydejones View Post
    Try adjusting the top margin of your logo declaration:

    #logo {
    display:none;
    margin: 40px 0 0 350px;
    }

    You might also want to make the following adjustments by deleting the parts in red and adding the part in green:

    #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
    }

    #logo {
    text-align: center;
    display:none;
    margin: 40px 0 0 350px;
    }

    This is crazy. okay I close the div like you suggested before. then i try the above solutions and nothing happens however if I add a float: right property to the css for the #contentMainWrapper it does move everything that is off center to the right.

    http://www.oldwestgames.com/images/ff_ie_afterfix2.jpg

    So that has to be a clue however I am an amateur at this whole div positioning thing so do you have another plan of attack?

    and thanks for walking me along here...

  6. #6
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Explorer 7.0 Released - HELP!

    Another clue might be in the number of validation errors that this site generates. http://validator.w3.org/check?verbos...westgames.com/ The validator seems rather confused about some of your HTML tags. I image the browsers are too.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  7. #7
    Join Date
    Jan 2006
    Location
    Portland, Oregon
    Posts
    276
    Plugin Contributions
    0

    Default Re: Explorer 7.0 Released - HELP!

    Quote Originally Posted by kuroi View Post
    Another clue might be in the number of validation errors that this site generates. http://validator.w3.org/check?verbos...westgames.com/ The validator seems rather confused about some of your HTML tags. I image the browsers are too.
    Whoa!

    Yeah I needed that desperately. I fixed everything surprisingly.

    Right before you wrote the above reply I had found that the tpl_main_page in the includes/templates/my_template/common/ folder had some empty paragraph tags in it.
    strangely enough I was able to replace them with

    Code:
    <br /><br /><br /><br /><br /><br />
    which the W3C validation service doesn't like at all

    Error Line 152, column 11: document type does not allow element "br" here; missing one of "th", "td" start-tag .

    <tr><br /><br /><br /><br /><br /><br />

    The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

    One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
    however IE7 ate it up and Firefox handled it beautifully.

    Here is my tpl_main_page code if anyone is interested in helping me solve this and please the validator

    Code:
    <?php
    /**
     * Common Template - tpl_main_page.php
     *
     * Governs the overall layout of an entire page<br />
     * Normally consisting of a header, left side column. center column. right side column and footer<br />
     * For customizing, this file can be copied to /templates/your_template_dir/pagename<br />
     * example: to override the privacy page<br />
     * - make a directory /templates/my_template/privacy<br />
     * - copy /templates/templates_defaults/common/tpl_main_page.php to /templates/my_template/privacy/tpl_main_page.php<br />
     * <br />
     * to override the global settings and turn off columns un-comment the lines below for the correct column to turn off<br />
     * to turn off the header and/or footer uncomment the lines below<br />
     * Note: header can be disabled in the tpl_header.php<br />
     * Note: footer can be disabled in the tpl_footer.php<br />
     * <br />
     * $flag_disable_header = true;<br />
     * $flag_disable_left = true;<br />
     * $flag_disable_right = true;<br />
     * $flag_disable_footer = true;<br />
     * <br />
     * // example to not display right column on main page when Always Show Categories is OFF<br />
     * <br />
     * if ($current_page_base == 'index' and $cPath == '') {<br />
     *  $flag_disable_right = true;<br />
     * }<br />
     * <br />
     * example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br />
     * <br />
     * if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br />
     *  $flag_disable_right = true;<br />
     * }<br />
     *
     * @package templateSystem
     * @copyright Copyright 2003-2006 Zen Cart Development Team
     * @copyright Portions Copyright 2003 osCommerce
     * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
     * @version $Id: tpl_main_page.php 3721 2006-06-07 03:19:12Z birdbrain $
     */
    
    // the following IF statement can be duplicated/modified as needed to set additional flags
      if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
        $flag_disable_right = true;
      }
    
    
      $header_template = 'tpl_header.php';
      $footer_template = 'tpl_footer.php';
      $left_column_file = 'column_left.php';
      $right_column_file = 'column_right.php';
      $body_id = str_replace('_', '', $_GET['main_page']);
    ?>
    <body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
    <?php
      if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
        if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?>
    
    <div id="mainWrapper">
    <?php
     /**
      * prepares and displays header output
      *
      */
      require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
      <tr><br /><br /><br /><br /><br /><br />
      
    <?php
    if (COLUMN_LEFT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) {
      // global disable of column_left
      $flag_disable_left = true;
    }
    if (!isset($flag_disable_left) || !$flag_disable_left) {
    ?>
    
     <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
    <?php
     /**
      * prepares and displays left column sideboxes
      *
      */
    ?>
    <div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td>
    <?php
    }
    ?>
    <td valign="top">
    <!-- bof  breadcrumb -->
    <?php if (DEFINE_BREADCRUMB_STATUS == '1') { ?>
        <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
    <?php } ?>
    <!-- eof breadcrumb -->
    
    <?php
      if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
        if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?>
    
    <?php
     /**
      * prepares and displays center column
      *
      */
     require($body_code); ?>
    
    <?php
      if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
        if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?></td>
    
    <?php
    if (COLUMN_RIGHT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) {
      // global disable of column_right
      $flag_disable_right = true;
    }
    if (!isset($flag_disable_right) || !$flag_disable_right) {
    ?>
    <td id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">
    <?php
     /**
      * prepares and displays right column sideboxes
      *
      */
    ?>
    <div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div></td>
    <?php
    }
    ?>
      </tr>
    </table>
    
    <?php
     /**
      * prepares and displays footer output
      *
      */
      require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
    </div>
    <!--bof- parse time display -->
    
    <!--eof- parse time display -->
    <!--bof- banner #6 display -->
    <?php
      if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
        if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?>
    <!--eof- banner #6 display -->
    </body>
    Anyways, it took a while and it was a dirty little fix but all in all it worked and crisis averted.

    thanks for all your help clydejones and kuroi.

  8. #8
    Join Date
    Jan 2006
    Location
    Portland, Oregon
    Posts
    276
    Plugin Contributions
    0

    Default Re: Explorer 7.0 Released - HELP!

    still wondering if anyone might have a solution to my problem. While it looks passable in Firefox and IE7, now there is a crap load of white space under my header in IE6.

    Please is there anyone who has any idea how to make this look homogeneous across those three browsers?

  9. #9
    Join Date
    Nov 2004
    Location
    Glasgow, Scotland
    Posts
    251
    Plugin Contributions
    0

    Default Re: Explorer 7.0 Released - HELP!

    I have experienced a similar problem with a site of mine. I had just upgraded the site that had been running on v 1.2.5. In converting to 1.3.5 I took the opportunity to develop a fluid width, centered layout - at least that's what it is in compliant browsers. I also got rid of all the layout tables so that the layout is all controlled by CSS allowing me to put the main content BEFORE the left and right columns in the document flow. The idea is that search engines get to the main content first and hopefully rank the site higher on content relevance.

    Anyway all of the above is reasonably easy to do for Firefox, Opera etc but with good old IE6 I needed to compromise on the fluid width and introduce some hacks to get the layout perfect and get rid of the peekaboo bug. I just got everything working OK in Firefox, Opera, Netscape and good old IE6, went live with the new version on Tuesday 19th October 2006 and Bill Gates & co, with impeccable timing, released IE7 on Wednesday 20th October 2006!

    In IE7 the header of my beautiful site had dissappered and the left column had dissappeared out left field.

    The problem is that, in their infinite wisdom, MS have fixed the bug that in IE6 allowed us to write hacks that only IE could see using * html to preface any definition we wanted IE6 to see but all other browsers to ignore, but have not fixed the non compliance issues that require the fixes in the first place. The result is that all our precious * html hacks which IE7 needs are completely ignored by IE7.

    So how do we fix this?

    Well since IE5 there has been a perfectly workable work around which seems to have been ignored by most (including me). Any stylesheet link enclosed by the following two pieces of code:

    Code:
    <!--[if IE]>
    and

    Code:
    <![endif]-->
    will be ignored by all browsers except IE5, IE6 and IE7. For example:


    Code:
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/ie_stylesheet.css" />
    <![endif]-->
    here '.../ie_stylesheet.css' will be read by IE5, 6 or 7 but not by any other browser. Any code targeted specifically at IE should therefore be placed in this stylesheet, which in turn should be placed after the main '.../'stylesheet.css' in the document flow.

    What's more the targeting can even be version specific using

    Code:
    <!--[if IE5]>
    to target IE5. Just change '5' to the version number you want to target.

    How does this work in practice? For my own site I had several * html hacks. What I did was this.

    1. I created a new blank stylesheet in the includes/templates/my_template/css folder called 'ie_stylesheet.css' and uploaded this to my server.

    2. I modifed includes/templates/template_default/common/html_header.php

    I found this at lines 44-50:

    Code:
    * load all template-specific stylesheets, named like "style*.css", alphabetically
     */
      $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^style/', '.css');
      while(list ($key, $value) = each($directory_array)) {
        echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
      }
    /**
    I added the following code immedialtely below it at line 51

    Code:
     * load all template-specific stylesheets, named like "ie_*.css", alphabetically
     * for stylesheets targeted at all versions of IE
     */
      $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie_/', '.css');
      while(list ($key, $value) = each($directory_array)) {
        echo '<!--[if IE]>' . "\n";
    	echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />' . "\n";
    	echo '<![endif]-->' . "\n";
      }  
    /**
    I saved the file, uploaded it to my server and navigated to my site and on viewing the source code found the following in the head of the document:

    Code:
    <link rel="stylesheet" type="text/css" href="includes/templates/rcm/my_template/style_imagehover.css" />
    <link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/stylesheet_css_buttons.css" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/ie_stylesheet.css" />
    <![endif]-->
    So I now had a stylesheet that was only visible to IE5, IE6 and IE7.

    I now opened includes/templates/my_template/stylesheet.css and copied all of my * html hacks to my new .../ie_stylesheet.css. I did this by using my editors search facility, searching for '* html', copying the relevant section of code and pasting it into my new ie_stylesheet.css document. Of course I removed '* html' from the code placed in ie_stylesheet.css

    For example I copied

    Code:
    /* IE doesn't understand min and max widths so for IE only set fixed width. */
    * html #mainWrapper {
    	width: 76em;	
    	height: 1%;	
    	}
    in .../stylesheet.css to .../ie_stylesheet.css and removed '* html' so that the code in .../ie_stylesheet.css became:

    Code:
    /* IE doesn't understand min and max widths so for IE only set fixed width. */
    #mainWrapper {
    	width: 76em;	
    	height: 1%;	
    	}
    I then uploaded .../ie_stylesheet.css to my server and tested the result in various browsers including IE7.

    I repeated the above for each * html hack I found in my main stylesheet, uploading and testing after each change. Bit by bit I started to see my site beginning to appear as it should in IE7 while it remained perfect in all other browsers.

    Once I had completed copying all my hacks across to .../ie_stylesheet.css I had a site that continued to display correctly in Firefox, Opera, Netscape and IE6 and now also displayed correctly in IE7.

    I then revisited my .../stylesheet.css and commented out all of my * html hacks. These will now be found by IE in .../ie_stylesheet.css. Just to be sure I re-tested after each * html hack had been commented out.

    So far I have not found a need for code that is specific to a particular version of IE but just in case it is ever needed (what's the betting thet IE7 has some quirks of it's own?) I revisited includes/templates/template_default/common/html_header.php and added the following at line 61 immediately below the code I had added previously as described above.

    Code:
     * load all template-specific stylesheets, named like "ie7*.css", alphabetically
     * for stylesheets targeted at specific versions of IE
     */
      $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[5-9]_/', '.css');
      while(list ($key, $value) = each($directory_array)) {
    	$ver = substr ($value, 2, 1);
        echo '<!--[if IE' . $ver . ']>' . "\n";
    	echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />' . "\n";
    	echo '<![endif]-->' . "\n";
      }  
    /**
    Now if I need to target code at a specific version of IE I would place a new stylesheet in includes/templates/my_template/css folder as folows:

    ie5_stylesheet.css - for IE5
    ie6_stylesheet.css - for IE6
    ie7_stylesheet.css - for IE7

    Similarily for IE8 and IE9 if and when they ever come along.

    If you want to see the above in action have a look here:

    http://www.ritchiechristianmedia.co.uk

    I hope this helps anyone who is finding their sites are not displaying properly in IE7.

    Regards,

    Alan

  10. #10
    Join Date
    Jan 2006
    Location
    Portland, Oregon
    Posts
    276
    Plugin Contributions
    0

    Default Re: Explorer 7.0 Released - HELP!

    Quote Originally Posted by duncanad View Post
    I hope this helps anyone who is finding their sites are not displaying properly in IE7.

    Regards,

    Alan
    Thanks for that Alan. I'm not sure if I can use that for this problem but it's good to know that version specific stylesheets are possible for IE. It's actually quite brilliant. Thanks again. mafiasam

 

 
Page 1 of 7 123 ... LastLast

Similar Threads

  1. Website Help!! Problems with Internet Explorer
    By fashion12 in forum General Questions
    Replies: 7
    Last Post: 25 Sep 2010, 12:53 AM
  2. Help with Internet Explorer
    By tlwolter in forum General Questions
    Replies: 5
    Last Post: 31 Aug 2010, 04:16 PM
  3. Internet Explorer 8 problem...help please
    By maria_b in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 10 Sep 2009, 04:19 PM
  4. Internet explorer!!! help!!!!
    By thebooktrunk.com in forum General Questions
    Replies: 6
    Last Post: 17 Oct 2007, 07:31 PM
  5. Help Internet Explorer 7 Ate My Header!!!
    By BUTTSTTUB in forum Basic Configuration
    Replies: 10
    Last Post: 3 Aug 2007, 07:20 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR