Internet Explorer 7.0 Released - HELP!

[countrycharm]

I have 1 more question. How do I align my logo into the center in Internet Explorer 7. On firefox it is centered no problem. Just don't understand microsoft mess.

[Website Rob]

Here is help for 3 specific errors.

Line 30, Column 371: value of attribute "type" cannot be "search"; must be one of "text", "password", "checkbox", "radio", "submit", "reset", "file", "hidden", "image", "button".

…f0ef69e5d51890" /><input type="search" name="keyword" id="searchTop" size="20

You need to remove type="search" and replace with type="text"

Line 77, Column 56: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

…ltMainContent" class="content"><p><h2><strong>Welcome Back Members! Please <a

As you cannot put (H) Header tags within (P) Paragraph tags, remove one or the other.

Line 303, Column 224: element "MARQUEE" undefined.

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

Either make the word "MARQUEE" all lower case or use CSS coding for doing what the "marquee" tag does.



As to centering images, I have found that using CSS code works very well.

.centerCode { text-align: center }

Although normally used for Text, the above code works most times for images, when used from within a separate CSS file.



The bigger problem you have is the width being too wide. Look at how the "shadow_s.png" image does not go down the right side. Not sure if you noticed but your page looks to be about 1040px wide. What is the width within your CSS file?

[countrycharm]

Hi website Rob. Thank you for your Reply. I don't really know where this file is located.

Line 30, Column 371: value of attribute "type" cannot be "search"; must be one of "text", "password", "checkbox", "radio", "submit", "reset", "file", "hidden", "image", "button".

…f0ef69e5d51890" /><input type="search" name="keyword" id="searchTop" size="20

Or this one.

Line 303, Column 224: element "MARQUEE" undefined.

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

I understand what you are saying about this one here.

Line 77, Column 56: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

…ltMainContent" class="content"><p><h2><strong>Welcome Back Members! Please <a

Here is what my style sheet says about the width of my site.

#nw {
width:80%; /* main site width; if you'd prefer a fixed width site, enter the width in px here. */
max-width:1300px; /* prevents the main content from getting wider than 1300px in sites other than IE */
min-width:1000px; /* this prevents the main content from getting smaller than 1000px in browsers OTHER THAN IE. You can make this as small as 800px, BUT any smaller than that, and the top header menu will break into two lines. Also, if you make this width 800px, you will need to make sure your product image on the product info page is no wider than 190px */
}

/* IE only. Controls Width of Site and Main Content*/
* html #nw {
width:expression((d=document.compatMode=="CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1300? "1300px" : d.clientWidth > 1048? "80%" : d.clientWidth < 1048? "1000px" : "80%")); /* this prevents the site from getting smaller than 1000px or wider than 1300px in IE */
}
/* end IE only */


/* end site and main content width section */

It should adjust it self , but again I don't know.

Thank you again.

[countrycharm]

Well I have found out way this is like it is.

Line 30, Column 371: value of attribute "type" cannot be "search"; must be one of "text", "password", "checkbox", "radio", "submit", "reset", "file", "hidden", "image", "button".

…f0ef69e5d51890" /><input type="search" name="keyword" id="searchTop" size="20

The guy who made the template say's

It can be ignored, in order to get the rounded search bar in Safari, I had to use type="search" for the search box.

This one I'm still not sure how to fix it. I know you told me but I don't know what file the error is pointing to.

Line 303, Column 224: element "MARQUEE" undefined.

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

[scitrenbaum]

Hi there. I have used the IE stylesheet override, and it works wonderfully for most of my site. However in some cases I have separate stylesheets for certain product pages (named p_180.css, p_211.css, etc). How can I create an IE only stylesheet for these individual product pages?

Here is a sample page that has a separate stylesheet

http://www.scentimentalprints.com/ca...roducts_id=190

Any help at all would be greatly appreciated!

[scitrenbaum]

I have added some addition buttons (with links) to be tpl_header.php file. I then used css to style the buttons. For some reason though, the buttons show up in Firefox, but they won't show up in IE. Does Zen Cart have a problem when you add stuff into the header in IE?

Here is a sample page

http://www.scentimentalprints.com/ca...e6dc0cf4376325

And here is the code I stuck into the tpl_header.php file...

<a id="birth" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=65"> </a>
<a id="invites" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=69"> </a>
<a id="thanks" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=66"> </a>
<a id="scent" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=70"> </a>

Any help at all would be greatly appreciated!

[kuroi]

I have added some addition buttons (with links) to be tpl_header.php file. I then used css to style the buttons. For some reason though, the buttons show up in Firefox, but they won't show up in IE. Does Zen Cart have a problem when you add stuff into the header in IE?

Here is a sample page

http://www.scentimentalprints.com/ca...e6dc0cf4376325

And here is the code I stuck into the tpl_header.php file...

<a id="birth" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=65"> </a>
<a id="invites" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=69"> </a>
<a id="thanks" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=66"> </a>
<a id="scent" href="http://www.scentimentalprints.com/catalog/index.php?main_page=index&cPath=70"> </a>

Any help at all would be greatly appreciated!

There are two problems with these links, either of which may be causing Internet Explorer problems.

Firstly they are empty. Whitespace doesn't count. I would put at least a non-breaking space (&nbsp;) in them, and better still, for accessibility and search engines, real-text, which you can then shift out of the way with css (e.g. a.birth {text-indent:-9999px}

There is a big clue to second problem in that they don't validate (always worth validating your code when there's a problem - I do it even when I can't see any, just to make sure). The issue is that you haven't properly formed the ampersands in your links. They should read &amp;cPath=65 as the ampersand is a special character in HTML and you need to use the literal form to tell browsers that this is a real ampersand and not the special HTML on. Better still would be to form your links using php as follows:

<a id="birth" href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=65'); ?>">&nbsp;</a>

[scitrenbaum]

I have gotten most of my pages to work in Firefox, IE6 and IE7. However there are a few pages that have separate stylesheets and are doing funky things in IE7. Any suggestions as to what is going on?

Here is a sample page that is funky in IE7

http://www.scentimentalprints.com/ca...roducts_id=336

Any help at all would be greatly appreciated!

[duncanad]

scitrenbaum,

Here is how to do what you want to do:

Firstly there is a minor flaw in my original solution which requires to be corrected before we can proceed.

The only file that you need to modify is:

includes/templates/your_template/common/html_header.php

at about line 54 you will find:

  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie_/', '.css');

replace this with:

  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie_style/', '.css');

and at about line 64 find:

  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[5-9]_/', '.css');

replace this with

  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[5-9]_style/', '.css');

The problem with my original solution is that any stylesheet prefixed by 'ie_' or 'ie?_' (where ? is the version number) will be loaded for every page which isn't exactly what it says on the tin and will mess things up when we apply the additional functionality to target IE specific stylesheets to specific pages. The above amendments mean that stylesheets prefixed 'ie_style' or 'ie?_style' will be loaded for every page, which was the original intention anyway.

Now for the IE targeted per-page stylesheets. At about line 71 find:

/**
 * load stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by Juxi Zoza.
 */
  $manufacturers_id = (isset($_GET['manufacturers_id'])) ? $_GET['manufacturers_id'] : '';
  $tmp_products_id = (isset($_GET['products_id'])) ? (int)$_GET['products_id'] : '';
  $tmp_pagename = ($this_is_home_page) ? 'index_home' : $current_page_base;
  $sheets_array = array('/' . $_SESSION['language'] . '_stylesheet', 
                        '/' . $tmp_pagename, 
                        '/' . $_SESSION['language'] . '_' . $tmp_pagename, 
                        '/c_' . $cPath,
                        '/' . $_SESSION['language'] . '_c_' . $cPath,
                        '/m_' . $manufacturers_id,
                        '/' . $_SESSION['language'] . '_m_' . (int)$manufacturers_id, 
                        '/p_' . $tmp_products_id,
                        '/' . $_SESSION['language'] . '_p_' . $tmp_products_id
                        );
  while(list ($key, $value) = each($sheets_array)) {
    //echo "<!--looking for: $value-->\n";
    $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '.css';
    if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
  }

and replace it with this

/**
 * load stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by Juxi Zoza.
 */
  $manufacturers_id = (isset($_GET['manufacturers_id'])) ? $_GET['manufacturers_id'] : '';
  $tmp_products_id = (isset($_GET['products_id'])) ? (int)$_GET['products_id'] : '';
  $tmp_pagename = ($this_is_home_page) ? 'index_home' : $current_page_base;
  $sheets_array = array($_SESSION['language'] . '_stylesheet', 
                        $tmp_pagename, 
                        $_SESSION['language'] . '_' . $tmp_pagename, 
                        'c_' . $cPath,
                        $_SESSION['language'] . '_c_' . $cPath,
                        'm_' . $manufacturers_id,
                        $_SESSION['language'] . '_m_' . (int)$manufacturers_id, 
                        'p_' . $tmp_products_id,
                        $_SESSION['language'] . '_p_' . $tmp_products_id
                        );
  while(list ($key, $value) = each($sheets_array)) {
    //echo "<!--looking for: $value-->\n";
    $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $value . '.css';
    if (file_exists($perpagefile)) 
		echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
// load per-page etc stylesheets targeted to all versions of IE
    $perpagefile_ie_all = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/ie_' . $value . '.css';
    if (file_exists($perpagefile_ie_all)) {
		echo '<!--[if IE]>' . "\n";
		echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile_ie_all .'" />'."\n";
		echo '<![endif]-->' . "\n";
	}
// load per-page etc stylesheets targeted at specific versions of IE
	$ver = 5;
	while ($ver <= 9) {
    	$perpagefile_ie_ver = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/ie' . $ver . '_' . $value . '.css';
    	if (file_exists($perpagefile_ie_ver)) {
    		echo '<!--[if IE ' . $ver . ']>' . "\n";
			echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile_ie_ver .'" />'."\n";
			echo '<![endif]-->' . "\n";
		}
	$ver++;
	}
 }

That's it!

The following is an amended list taken from the readme fill in the 'css' folder and hopefully explains what the above changes achieve

style*.css - are always loaded and at least ONE should contain site-wide properties.

ie_style* - are always loaded and should contain only css changes and additions targeted at all versions of IE.

ie?_style* - are always loaded and should contain only css changes and additions targeted at specific versions of IE.

language_stylesheet.css - are loaded for all pages where the current language is used and should contain only css additions and changes for the current language.

ie_language_stylesheet.css - are loaded for all pages where a specific language is used and should contain only css changes and additions for that specific language targeted at all versions of IE.

ie?_language_stylesheet.css - are loaded for all pages where a specific language is used and should contain only css changes and additions for that specific language targeted at specific versions of IE.

page_name.css - are loaded for a specific page only and should contain only css additions and changes for that specific page

ie_page_name.css - are loaded for a specific page only and should contain only css additions and changes for that specific page targeted at all versions of IE.

ie?_page_name.css - are loaded for a specific page only and should contain only css additions and changes for that specific page targeted at specific versions of IE.

language_page_name.css - are loaded for a specific page only when a specific language is used and should contain only css additions and changes for that specific page and language.

ie_language_page_name.css - are loaded for a specific page only when a specific language is used and should contain only css additions and changes for that specific page and language targeted at all versions of IE.

ie?_language_page_name.css - are loaded for a specific page only when a specific language is used and should contain only css additions and changes for that specific page and language targeted at specific versions of IE.

c_??_??.css - are loaded for all info pages in a specific category only and should contain only css additions and changes for that specific category.

ie_c_??_??.css - are loaded for all info pages in a specific category only and should contain only css additions and changes for that specific category targeted at all versions of IE.

ie?_c_??_??.css - are loaded for all info pages in a specific category only and should contain only css additions and changes for that specific category targeted at specific versions of IE.

language_c_??_??.css - are loaded for all info pages in a specific category only when a specific language is used and should contain only css additions and changes for that specific category and language.

ie_language_c_??_??.css - are loaded for all info pages in a specific category only when a specific language is used and should contain only css additions and changes for that specific category and language targeted at all versions of IE.

ie?_language_c_??_??.css - are loaded for all info pages in a specific category only when a specific language is used and should contain only css additions and changes for that specific category and language targeted at specific versions of IE.

c_m_??.css - are loaded for a specific manufacturer's listing page only and should contain only css additions and changes for that specific manufacturer.

ie_m_??.css - are loaded for a specific manufacturer's listing page only and should contain only css additions and changes for that specific manufacturer targeted at all versions of IE.

ie?_m_??.css - are loaded for a specific manufacturer's listing page only only and should contain only css additions and changes for that specific manufacturer targeted at specific versions of IE.

language_m_??.css - are loaded for a specific manufacturer's listing page only when a specific language is used and should contain only css additions and changes for that specific manufacturer and language.

ie_language_m_??.css - are loaded for a specific manufacturer's listing page only when a specific language is used and should contain only css additions and changes for that specific manufacturer and language targeted at all versions of IE.

ie?_language_m_??.css - are loaded for a specific manufacturer's listing page only when a specific language is used and should contain only css additions and changes for that specific manufacturer and language targeted at specific versions of IE.

p_??.css - are loaded for a specific product's info page only and should contain only css additions and changes for that specific product.

ie_p_??.css - are loaded for a specific product's info page only and should contain only css additions and changes for that specific product targeted at all versions of IE.

ie?_p_??.css - are loaded for a specific product's info page only and should contain only css additions and changes for that specific product targeted at specific versions of IE.

language_p_??.css - are loaded for a specific product's info page only when a specific language is used and should contain only css additions and changes for that specific product and language.

ie_language_p_??.css - are loaded for a specific product's info page only when a specific language is used and should contain only css additions and changes for that specific product and language targeted at all versions of IE.

ie?_language_p_??.css - are loaded for a specific product's info page only when a specific language is used and should contain only css additions and changes for that specific product and language targeted at specific versions of IE.

I haven't fully tested absolutely every variation of the above so the usual caveats regarding backup and not testing in a live environmenet etc apply.

I hope this proves useful.

Alan

[francocauter]

Hi There Alan
I tried to name the stylesheet all sorts of ways. If I call it stylesheet_?.css it loads it all the time, if I call it style_?.css it does not load it.

I want to assign a different background to this page: http://www.livemk.co.uk/a_business/i...Path=5_154_147

how do I name the stylesheet so it gets loaded only when this page is viewed?
Thanks I'd appreciate you help
Regards
Franco