Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Very strange CSS3/JQuery Problem

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #36937
    alexemorris
    Participant

    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

    #97872
    alexemorris
    Participant

    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.

    #97873
    alexemorris
    Participant

    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!

    #97878
    alexemorris
    Participant

    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?!

    #97881
    Senff
    Participant

    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.

    #97912
    alexemorris
    Participant

    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

    #97913
    alexemorris
    Participant

    *anchor, not actor.

    #97914
    alexemorris
    Participant

    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

    #97919
    Senff
    Participant

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.