Very strange CSS3/JQuery Problem

[alexemorris]

Almost finished designing this website for a charity my mum does some work for.

It can be found at http://www.iicamh.org

Basically, on the homepage and ‘Our Work Abroad’ page, the images appear tiny if viewed on a Webkit based browser with Javascript enabled, but absolutly fine with Javascript disabled or on Firefox/IE, can’t figure out why!

If anyone has any idea why this may be, could they please let me know as I need Javascript enabled as I’m in the process of making a CSS3 lightbox, you can see my progress if you click one of the images in the lower set of images, I’m aware it all shows the same picture, but its not finished yet!

Any feedback on the design etc would be appreciated as well, thanks, Alex

[alexemorris]

doesn’t seem to have worked. It’s really weird, if you inspect the element in safari, every time you uncheck and check a style the pictures get bigger. Its bizarre.

[alexemorris]

Also, I apologize for the mess that is my stylesheet & markup, just trying to get the design down first and then I’ll go through and optimize/tidy it. Just this problem is holding me back!

[alexemorris]

At the moment it scales as you change viewport width which is what I was going for, I could easily set a fixed width and eliminate the problem, but I just can’t see why JQuery would cause this, especially as it works in Firefox/IE.

Probably the first time something actually works in IE and not Chrome/Safari?!

[Senff]

What you seem to have, is an image in an anchor (with no target, so I’m not really sure what the point of that is).

However, the anchor is an inline item. The result is that it won’t wrap around an image, but only get a width based on the image it contains, and a height based on the text size. Now additionally, you also give the image inside it a width of 100% — which is 100% of the anchor width, but that width is based on the image width by itself. So this results in the image being so small; you don’t really define the width of either the anchor or the image, and so the browsers get confused.

The solution is simple: give a anchor display:block;. You could also remove width:100% from the image as well, or both.

You may have to change some additional things (like the max-width of the listitem and such), but at least your images show like they’re supposed to.

[alexemorris]

Thanks, the image is in an actor so I can use a lightbox, although looking back I’m not 100% sure thats absolutely necessary.

I have set display:block on the a tag and it doesn’t seem to have worked, although you have highlighted to me why its happening so I can rework my code to not include anchor tags hopefully

Thanks for everyones help and I’ll get back if I manage to fix it

[alexemorris]

*anchor, not actor.

[alexemorris]

Okay, I’ve just taken the images out of the anchor on the homepage and they are still showing up tiny. I’m on the verge of giving up! This is very, very odd.

Alex

[Senff]

It’s not that odd. Now it’s the LI item that’s acting the same as the anchor: its width is based on its contents (the image), and the size of the image (100%) is based on its container. Vicious circle, really.

You should get rid of the 100% width of the image, and give it a width in pixels. Or, give the container LI a specific width in pixels. Don’t keep the browser guessing what the width of the LI or the image should be.

[Author]

Posts