Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mozilla images and css

    Hello everyone,

    I'm having trouble creating a good layout using css. I've used it quite a bit but I still think I'm a newbie so this might seem a bit silly to some.

    The problem is I want to create an image gallery, each item is inside a containing div, each gallery image is contained inside this with its own div and a div below containing text. I want this to give me a fixed height for the whole box so the page looks uniform (like a table) and the text below the image always appears in the same place. This works fine in IE but mozilla is broken (I'm sure its the other way round but not to worry). It seems so simple. If it had been done in tables I would have finished ages ago but it seems css wants to hurt me

    The image in mozilla seems to float above the div (I dont have any float elements set) The div doesnt want to stretch to fill for its contents. Where am I going wrong - have I missed something major? can it be fixed at all? am I just stupid? its driving me nuts!

    If I set the height I'm losing the option to make it bigger depending on the size of the image. Is there anything that can be done?

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    A link and code would definitely be helpful in tracking down this problem.

    In general though, Mozilla has a really good implementation of the CSS spec so if you're seeing problems in FF more than likely the problem is in your code.

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Yeah, it would be nice to have some example code, mate, or even better, a hot-link to the page itself. From what I can tell, though, you have set margins or padding incorrectly. Also, I think you probably should use floats to accomplish what you want.

    My School Portfolio uses a float, and this isn't exactly what you explained, it seems close enough. I can't give any more help than that without some code to look at. My school requires homework to be live, and they wanted it set up as a portfolio, but I would never claim any of that stuff... it is a bunch of crap...

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by jlhaslip View Post
    That page looks fine for me on FF 2.0.0.7. What browser are you seeing this behavior on?

    Also, it's worth noting that your interpretation of what overflow should do is incorrect. According to the CSS spec, when an element has a firm width and content extends outside of its boundary, the content is supposed to flow out of the box without affecting the container's dimensions. This behavior can be modified by different overflow settings (hidden, scroll, etc.), but it is incorrect behavior for container elements to expand their width to accommodate the overflown content.

    IE incorrectly expands the size of the parent blocks to accommodate overflown content. This really is annoying as it can often break float-based layouts, but that's the hand Microsoft dealt us.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I also see no problems. FF 2.0.0 and 2.0.0.7

    I will suggest one more thing. You seem to have a bit of divitis.

    As for your image problem I don' see anything going wrong...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •