Erratic outcomes on IE9

keychange · Post by **keychange** » Tue Aug 21, 2012 9:24 am

Here is the site I am working on http://www.peachhomeloans.com.au/

The top menu looks completely different in IE9 (looks lousy ) than it does in EBMM or Chrome or Firefox - I have had to change it many times as colours just don't display as selected ie: grey becomes green - or black etc.
Update I had menu layering problem but figured that out but the width calculation is different for IE and so if I get word wraps in IE and not in others so I have to manually adjust HTML to make more room for the menu and then it looks crap in Chrome and Firefox

keychange · Post by **keychange** » Tue Aug 21, 2012 12:09 pm

What a disaster I just can't get a satisfactory outcome on IE 9 after about 4 hours of edits.

Trying to use a top menu and a side menu

I use includes for the top menus on all but the index.htm page - everything perfect in Chrome and Firefox.
But the only way to get it sort of working is to copy both of the EBMM css files into the main site style sheet peach.css - that gets it working but but the outcome is so erratic in colours and behaviour - while on the index page it looks fine but on all other pages left menu is green and top menu loses all gradients/

Post by **Aivars** » Tue Aug 21, 2012 5:32 pm

Hmm, indeed, there are some problems.

First of all, the reason why initially IE was making a mess of all but the main page is because the first page has a doctype specified but other pages don't. You should add <!DOCTYPE HTML> as the topmost line to all of the pages.

Secondly, it seems like you've overwritten one menu's gradient image with other menu's gradient background. FF and Chrome use native CSS gradients, they don't need the background image, that's why you only see this in IE. To be absolutely sure that this does not happen, store all menu files in separate folders such as /topmenu/ and /sidemenu/. Please read this article to make sure your menus work even in pages in subfolders: http://kb.blumentals.net/kb/index.php?V ... ntryID=134

My suggestion is to remove current menus and related css and regenerate them in separate folders, that should do the trick as long as page doctype is set. And that way you don't need to copy them to a common css file manually.

If you have more trouble, let me know or contact customer support, we'll help you.

keychange · Post by **keychange** » Wed Aug 22, 2012 2:00 am

Aivars

I have changed some of the doctypes they were all HTML 4.01 transitional but I changed these to see what the outcome would be - the vast majority of pages have a valid doctype and makes no difference

The side menu and top menu were created in different folders and I used unique identifier for the top - I have copied the files into root and copied the css into the main css in desperation but they performed no better in unique folders.

I have regenerated several times already and I have had enough!

It's a shame because I am trying to make an ipad friendly look and your menus work so well in Chrome

keychange · Post by **keychange** » Wed Aug 22, 2012 2:49 am

Button gradients for top is buttonbg gradient_button gradient37 and side is buttonbg gradient_button gradient35

Using <!DOCTYPE HTML> in index.htm works fine but using in other pages makes top bar go black where as using <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> makes the top bar acceptable but not correct -

keychange · Post by **keychange** » Wed Aug 22, 2012 3:05 am

It has to be something to do with the ssi includes - if I cut and paste entire head from index.htm it still renders incorrectly on other pages

keychange · Post by **keychange** » Wed Aug 22, 2012 3:12 am

OK got it figured out IE9 does not resolve SSI link to relative paths - therefore completely contrary to your instructions all the files have to be saved into the root directory - and with <!DOCTYPE HTML> it works.

keychange · Post by **keychange** » Wed Aug 22, 2012 3:43 am

except the gradients aren't working if I use a single css - so I have to edit every page to add the individual css - so answer is when using IE9 with SSI

must be <!DOCTYPE HTML>
all files including image and css must be in root

Post by **Aivars** » Wed Aug 22, 2012 10:35 am

It seems to me that IE is correctly loading the files from the side_files and top_menu_files folders. See http://kaitnieks.com/images/peach_images.png

Anyway, your site seems to work now, and that's the main thing.

keychange · Post by **keychange** » Thu Aug 30, 2012 12:44 pm

I am having same problem (without includes) on http://www.keychange.com.au - perfect in Chrome - useless in IE(
I have tried every form of publish - I have placed files in root and in sub folder - the css link obvioulsy works but the images refuse to render

Post by **Aivars** » Thu Aug 30, 2012 2:42 pm

It's a different problem in your case. Try opening http://www.keychange.com.au/keymenu_fil ... per_bg.png which IE uses since it doesn't support native CSS gradients - you'll see that the image has been damaged, probably during upload.

Here is the same image after publishing menu compared to the one on your server:
http://kaitnieks.com/images/diff_bg.png
As you see, something has removed bytes "OD", which correspond to newlines in text files.

keychange · Post by **keychange** » Fri Aug 31, 2012 2:57 am

Thanks Aivars

I should have thought of that - I was working on some non-standard text uploads and had manually set transfer to ASCII

All good now - thanks

Andrew

Blumentals Software Community

Erratic outcomes on IE9

Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9

Re: Erratic outcomes on IE9