- This topic is empty.
March 1, 2012 at 5:19 pm #36937
Almost finished designing this website for a charity my mum does some work for.
It can be found at http://www.iicamh.org
Any feedback on the design etc would be appreciated as well, thanks, AlexMarch 1, 2012 at 6:46 pm #97872
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.March 1, 2012 at 6:48 pm #97873
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!March 1, 2012 at 7:04 pm #97878
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?!March 1, 2012 at 7:22 pm #97881SenffParticipant
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.March 2, 2012 at 6:38 am #97912
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 itMarch 2, 2012 at 6:38 am #97913
*anchor, not actor.March 2, 2012 at 6:40 am #97914
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.
AlexMarch 2, 2012 at 7:46 am #97919SenffParticipant
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.