[SOLVED] Local WAMP site looking perfect in IE 9, but once uploaded it's looking weir

mafgirl · #1 Aug 10, 2011, 02:53 AM

Hello everyone,

I've just finished part of the design for a client on my local WAMP site and it was all looking as it was supposed to. To update the client and show him my progress, I uploaded it to my live site last night and was pleased to see it was still all looking good and working, UNTIL I double checked it in Internet Explorer (9) where it looks all over the place..
I use a plugin called Job Manager to create a job board for my recruitment client, in which I have styled the jobs into a div and a fieldset, which on hover changes colour and slightly changes position with a shadow effect.

This all looks and works as expected in Mozilla, Safari and hopefully other browsers too. But not IE.
The weird thing is that is IS working as it should on my local WAMP site in the same IE browser, on the same computer... I checked the live site on a different computer with IE 8 and it almost looks as it should, but on hover it looks wrong again.
The differences:

on the local WAMP site in IE the fieldset is straight, with a white background within the lines, on hover it has a grey background within the lines, that slightly changes position with a shadow effect.

on the live site in IE, the fieldset borders overlap, with a white background that is not within the lines. on hover, it has a grey background that is not within the lines, that does not slightly change position, without a shadow effect

Just to emphasize: it does work on the live site in other browsers, it is only in that darn IE where it doesn't...

It is worth mentioning that I created a splash screen for this site (only the first design, not finished yet) which also has the hover/shadow effect. I made this by creating a new page, setting this as the front page and creating a page template for it in Dreamweaver. Initially the shadow effect did not work in any browser on my local WAMP site and after doing some research, the solution was to put

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

in the

HTML Code:

<head>

section..
When I encountered my recent IE problems, I did attempt to put the above code into the ATO/add HTML/CSS in the head section, but this did not make a change in IE. The hover effect on the splash page is also not working in IE on the live site, but it is in other browsers..

Am I missing something? the local and live site are identical, the only difference it has is different apache/php and MySQL versions...
To clarify I'm using:

Local site :
Apache Version : 2.2.17
PHP Version : 5.3.4
MySQL Version : 5.1.53

Live site:
Apache version 1.3.42
PHP version 5.2.17
MySQL client version: 5.0.92

for both WAMP locally and live server I am using:
WordPress 3.1.3
Atahualpa 3.6.7

I have uploaded the site again last night and made sure all files were there and were identical to the local site, made sure the database was correctly imported with 'site' and 'home' in wp-options table changed to the live site. everything is as it should be and it is still not working in IE... HELP

Does anyone know the answer? Let me know if you need any more information...

Cheers!!

Marjolijn

juggledad · #2 Aug 10, 2011, 05:33 AM

here is a quick test to see if it is the Apache/php versions. I viewed the page, copied the source and uploaded it to my server. check your PM to see the link to the page. The site is running Apache 2.0.52 and php version 5.2.13

I don't have a machine with IE9

mafgirl · #3 Aug 10, 2011, 05:52 AM

Hey Juggledad,

Thanks for your quick reply and making the effort to copy the code onto your server! Awesome

It actually looks great on your link - apart from the background colour and a few other things, but the hover behaviour, the fieldset background colours and everything is behaving as it should on IE...

Does that mean I ought to ask my host to upgrade their php/apache?
The only weird thing is, I have been uploaded the site on my live server before, in order to keep my client upated and the fieldset backgrounds/hover behaviour was working before.. I forgot to mention that...
It wasn't until I uploaded everything including the new splash page last night when it stopped working in IE...
What does my live site look like in your version of IE? does it look ok..?

juggledad · #4 Aug 10, 2011, 06:01 AM

I would venture to guess that it has something to do with the Apache/php versions. The site looks fine in Safari on my mac.

is the splash page index.html?

your splash page is missing the </body> and has no <html> or </html>

lmilesw · #5 Aug 10, 2011, 06:35 AM

You site looks ok me in IE9

mafgirl · #6 Aug 10, 2011, 06:45 AM

Hello Juggledad AND Larry

Thanks to you both for looking..

JD: My splashpage is a template which is corrigan-bentley-splash-page-template.php I have added the tags you said are missing, but unfortunately this does not make a difference in IE...

Larry: Thanks for looking in your IE 9, so if it looks fine in yours.. could it be my IE? Do the hover effects with shadow work for you too? Maybe I will delete IE and re-install, although I tried to do that yesterday and could not find it in my Control Panel!

lmilesw · #7 Aug 10, 2011, 07:28 AM

Yes the hover effects work for me although I find them distracting and make the words less readable. How about just have white boxes with all the text inside and no hover... only shadow?

mafgirl · #8 Aug 24, 2011, 05:02 AM

Hi Larry,

I agree with you, but it is how the customer wanted it....

Thanks for all your help, its all working great now (and have moved it back to my local server to work on it)