Prestashop 1.4.0.9 Internet Explorer 8 Compatibility issue

[bruce-rez]

Hi,
I need some help please.
My testing website looks ok in Firefox 3.6 and Safari 4.1.3 in Mac OSX platform and all pages are displayed correctly but in Internet Explorer 8 (Windows XP) there is a problem with Right Column and Header in Categories pages. The font are shown extremely big in the Right Column and the Header moves down.
Anybody had this kind of problem with IE8?
I would appreciate it if somebody can help.

Thank you in advance.

[web.geek]

Not being entirely helpful, but your problem also exists in IE 7, although it looks great in FF on Windows.

I pulled up Firebug in Firefox figuring it might be a CSS issue, then I went to http://validator.w3c.org to validate the page. You have several occurrences of <h3> tags that open but never close. For example:

       <!--
New
Colored Gemstones...

       -->


CR165

                                                                                 

These types of things may get cleaned up by a helpful browser, but they lead to unusual results if strictly adhered to. You could end up with font-size multiples. In the above example, you commented out the </h3> tag, so the DOM sees "open a div, open and close an anchor, open a header 3 but don't close it, throw in a paragraph, now close the div." I don't know if this is directly causing your strange output, but it isn't helping.

I would recommend checking your source code against the validator until it is clean or at least acceptable enough to get the results you want for the user. I would at least start by making sure all tags are properly closed in sequence. That might fix the whole issue.

[bruce-rez]

Hi web.geek,
First thank you for taking time to help me,really appreciated.
In FF Windows it looks OK as you mentionned.The problem is with IE8 and IE7, you are right.
I will check again my codes and try to validate by W3C and hopefully I can fix this problem.
I certainly be back to make a report, or ask more questions until I get this done.
Thanks again.

[bruce-rez]

It worked.
I fixed the tag

.
Now I would like to position correctly the header's image (that says: Luxury at affordable price...) in IE8 and IE7.
I know we can fix that with conditional statement in HTML file.
But I do not know where in Prestashop, in what file and where exactly in the file insert the conditional statement.
Any help would be appreciated.

[web.geek]

Not sure how much time I'll have to look at it today, but I wanted to at least give you this feedback. The problem is most likely related to the width, margin, and float CSS values for the header_links, search_block_top, header_user, and/or headerslogan blocks. IE is notorious for issues related to those CSS elements. It looks like the headerslogan block is something you created. Perhaps try putting that inside the header_links div since that one already seems to flow in the right spot.

[bruce-rez]

Not sure how much time I'll have to look at it today, but I wanted to at least give you this feedback. The problem is most likely related to the width, margin, and float CSS values for the header_links, search_block_top, header_user, and/or headerslogan blocks. IE is notorious for issues related to those CSS elements. It looks like the headerslogan block is something you created. Perhaps try putting that inside the header_links div since that one already seems to flow in the right spot.

My "headerslogan" is inside the header div. I tried to move it inside the header div with no luck.
By the way I saw your website, it looks nice.

[web.geek]

Thanks for the compliment. It's part of the reason why I've been short on time. Plus, it's my part-time, non-paying, "my [spam-filter] wants to open a candy store" job; so that comes with its own challenges.

The style isn't a huge departure from the delivered PrestaShop, but I've been tweaking products and little buggy things. Right now I'm trying to tackle UPS shipping, local delivery carrier by zip code, and city sales tax. I guess the best way to learn how a software app works is to try and make it do something it wasn't mean to ;-)

As for your troubles, did you modify any .php or .tpl files to create your headerslogan? If so, can you post a snippet of the code that was there before your change and after? First thing I always try to do when something doesn't look quite right is to take it back out and make sure it goes back to looking like the original.

[bruce-rez]

You're welcome. I wish you the success and prosperity in your familial business.
Thank you also to take your time and looking at my problem,really appreciated.

Regarding my header problem, I did some modification in header.tpl file. I did not touched any php files. I added only the header-slogan.jpg and some css positioning in the header of language,user info and search blocks.
Here is the codes of header.tpl before modification:

<!-- Header -->

{$HOOK_TOP}

This is after modification:

<!-- Header -->

{$HOOK_TOP}
<!--Added by me-->

The tag image source does not display here in the forum correctly! But it's correct in my header.tpl file.
But I do not know why It does not show correctly in my reply. Could be filtered by the Forum.
I hope that make sense.
Thanks.

[web.geek]

Hmmm...the only other idea that comes to mind is to put your code in the block permanent links module template file.

One other thing I tried in Firebug is to remove the div tag you added and simply make your image the background of the ul#header_links element and shorten the width of the div#header_user element. Unfortunately with this debugging approach, I can't see if it fixes the IE problem, but I think it should:

In the blockpermanentlinks.css file:

ul#header_links {
   background: url("http://ftp.brportfolio.com/classyjewelers-new/img/header-slogan.jpg") no-repeat scroll 0 0 transparent;
...
   height: 87px;
   margin: 0 25px;
   width: 300px;
}

In the blockuserinfo.css file:

#header_right #header_user {
...
   width: 235px;
...
}

You probably can make the url path relative.

You are stretching your image as well. It is natively 300px x 75px and you are making it 300px x 87px, so it is distorted.

[bruce-rez]

I corrected the css files and removed the header-slogan.jpg from the header as you mentionned.
It worked for both IE7 and IE8.
Thank you very much for your assistance and your patience.

Other question if you do not mind:
Under each item,in products pages I have "View" element with black background. This "View" element is centered in Firefox Mac OSX but it is not centered in Firefox Windows and IE8 Windows. Unfortunately I do not posses any PC Windows to debug it with Firebug. Could you please debug it with your Firebug in your Windows and let me know what codes can I center this element.
Thank you in advance.