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