Some problems with IEs

HTML & CSS
1

Hi I am finishing off this site http://bit.ly/mlSg7C but am having some IE problems which I’d like to find a solution for.

For reference the version that is working correctly can be seen on Firefox or Chrome.

IE8:
There are 3 boxes on the home page with rotating food images. Within each of these boxes there is a linked image (weddings, corporate, outside catering). There is a gold line a bit further down which should not be there. How can I remove it?

A bit further down on the right there is an image of a cake, but there appears to be two images overlaying each other. I would like to remove the misplaced one. The same problem also happens during the transition of the venues box.

Finally links in gold have an underline which is too close to the text, I would like to push that underline further down.

IE7:

Same problem as in IE8 with the overlaying images.

Any help appreciated. Thanks.

2

I don’t see any gold line in IE8 that isn’t in FF. Could post a screen shot?

A bit further down on the right there is an image of a cake, but there appears to be two images overlaying each other.

Weird, but it may be caused by the filter you have on there. Try removing it.

Finally links in gold have an underline which is too close to the text, I would like to push that underline further down.

That’s the default underline style for this font, so I don’t think you can do anything about that.

3

I’ve uploaded a screenshot of IE8 showing the problem here:

ImageShack® - Online Photo and Video Hosting

AS regards to the underlines I wonder why they are so ugly on this particular browser version when they look fine in other versions.

4

The line under those pictures is coming from here:

.ie8 .boxes .wrap div a { 
	text-decoration: none;
	border-bottom: 1px solid #a08f63;
}
5

Thanks, I also found a small problem with the dropdowns in Chrome on Mac, there is a small grey part appearing which doesn’t show on Chrome on Windows.

I am including a screenshot of the Mac version:

ImageShack® - Online Photo and Video Hosting

6

Not for me. Using version 12.

7

Looks ok to me also.

8

The only problem remaining is the image overlays issue, cant really find a solution to that.

9

This is the url to view the site: bit.ly/k5G2J0

10

Looks like you are running into the jquery opacity bug mentioned in this thread.

Try the solutions mentioned in the thread such as giving the image IE a background colour to match the background but you of course then lose the transparency.

Funnily enough I only see a problem in IE8 using ietester where you get a black flash as the image animates. In my IE8 (real version) I don;t see a problem.

11

Looks like you already had the answer to this in another thread also.

12

I am not referring to the transition issue though, it’s for static images when there is an overlaid second image appearing in IE8, on IETester and on real IE8.

13

Can you post a screenshot - I’m not sure what I’m looking for?

14

Here you go,

I can see the problem showing up on IE9

15

Hello,

The problem seams to come from script.js line 100:

document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
16

Yes, if I take that off however I will have blackened images during png transitions :S

17

It’s probably because the filter image is applied to the background to the img tag but as you are adding 3px padding to images then the image is scaled to fit the width and height and thus the overlap.

Try removing the padding from #container img{} and see if that cures the problem. If it does cure the problem then make the 3px space with margins or padding on a parent instead.

18

Thanks will try that, also on this page I have a scrollbar in the textbox when I view it on IE9, can I remove that vertical scrollbar?

Link

19

Try adding overflow:auto to the textarea.