page shows differently on chrome to IE9

[Moults]

Hi

I have been updating my website even though I am a newbie and learning as I go. I have a strange problem that when i updated some pages including my home page they are showing up differently on different browsers. Chrome shows the changes fine but for some reason IE9 has updated half a page which I cannot get my head around. My website is www.fmproducts.net and any help would save me going even greyer!

Thanks

[ralph.m]

Hi Moults. Welcome to the forums.

It looks pretty much the same in Chrome and IE9 to me, so I suspect what's needed is that you just refresh your browser and/or clear the browser cache. Sometimes the browser will use the old styles it previously cached until you take either of the above actions.

Or if I'm missing something subtle, see if you can point out what bits aren't working in IE9.

[Moults]

Many thanks for your prompt response.

I have tried flushing the cache but I still appear to have the problem. When I look at the home page on Chrome I have 3 new items of stock at the top which are One Piece Collars, Site Cases, and PVC Tape (which is correct) but under IE9 I have one of the older images of cable ties and no pipe collars. I also used to have an animated union jack in the top right which appears to be missing from the chrome version?

[ralph.m]

OK, I see. There is some pretty weird, presumably IE-only code in that page that is hiddin in Chrome but which IE is happy to display:

<!--[if gte vml 1]><v:shape id="Picture_x0020_6"
         o:spid="_x0000_s1056" type="#_x0000_t75"
         href="cable%20ties%20and%20mounts.htm" style='position:absolute;
         margin-left:0;margin-top:-.35pt;width:342pt;height:298.95pt;z-index:4;
         visibility:visible;mso-wrap-style:square;mso-wrap-distance-left:0;
         mso-wrap-distance-top:0;mso-wrap-distance-right:0;
         mso-wrap-distance-bottom:0;mso-position-horizontal:left;
         mso-position-horizontal-relative:text;mso-position-vertical:absolute;
         mso-position-vertical-relative:line' o:allowoverlap="f" o:button="t">
         <v:imagedata src="images/main/Website%20Cable%20Tie%202.jpg"/>
         <w:wrap type="square" anchory="line"/>
        </v:shape><![endif]-->
<!--[if !vml]-->

I'd say just get rid of stuff like that.

[Moults]

Brilliant, I got rid of the text and it removed the old image etc, you are a star. For some reason although in Dreamweaver the 3 images are in a line as can be seen in chrome the tapes show up below in IE9 any ideas?

Also any idea how I can get the animated gif of the union jack to appear in chrome?

Sorry to take up so much of your time

[spikeZ]

Hi Moults,
Did you write this in Office first before moving to Dreamweaver?
There is a HUGE amount of totally redundant code that seems to be specifically for IE that you really dont need.
You could probably halve the size of the page code and achieve a cross browser result.
Now I'm not saying bin this and start again as that would be folly but bear in mind for any future developments that developing in regular HTML would be a big step in the right direction.

Now then - the flag.
You have in your header table the following code:

<!--[if gte vml 1]><v:shape id="Picture_x0020_3" o:spid="_x0000_s1058"
     type="#_x0000_t75" style='position:absolute;margin-left:67.25pt;
     margin-top:0;width:107.25pt;height:48.75pt;z-index:2;visibility:visible;
     mso-wrap-style:square;mso-wrap-distance-left:0;mso-wrap-distance-top:0;
     mso-wrap-distance-right:0;mso-wrap-distance-bottom:0;
     mso-position-horizontal:right;mso-position-horizontal-relative:text;
     mso-position-vertical:absolute;mso-position-vertical-relative:line'
     o:allowoverlap="f">
     <v:imagedata src="images/main/animated%2520union%2520javk.gif"/>
     <w:wrap type="square" anchory="line"/>
    </v:shape><![endif]-->

Replace that with

<img src="images/main/animated%2520union%2520javk.gif" alt="Union Jack" />

You might have to play with the placing of it as it will render your table cell much bigger than before.

You could wrap it in a DIV eg:

<div class="unionJack">
    <img src="images/main/animated%2520union%2520javk.gif" alt="Union Jack" />
</div>

and in your CSS file add the following:

.unionJack {
    position:absolute;
    margin-left:67.25pt;
    margin-top:0;
    width:107.25pt;
    height:48.75pt;
    z-index:2;
    visibility:visible;
}

See if that helps

[Moults]

Hi SpikeZ

You are right I did use office at one stage as guided but realised very early my mistakes. We had the website built by a friend who then decided to emigrate and has lost interest in anything web related?? I took ownership and started to update using office until I was pointed in the right direction.

Your help is great and I will try and get the union jack to work but I am a complete novice so fingers crossed. I was really chuffed when i managed to put new pages and link them etc so at least I am going in the right direction.

Out of interest do you have any idea how long it would take to clean up the files or indeed how much it would cost to get someone to do it for me?