Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    joz
    joz is offline
    Member joz's Avatar
    Join Date
    May 2005
    Location
    bxl
    Posts
    36
    Member #
    10035
    Hi,
    here I come with a css problem again

    I have a list of images which I want do be displyed inline. Have a look : http://www.treibgut.be
    Each image is inside a span with the following attributes:

    span.document
    {
    position:relative;
    width:88px; height:88px;
    _width:92px; _height:92px;
    padding:0; margin:1px;
    border:1px solid #080476;
    display: inline;
    background-color:#fff;
    overflow:hidden;
    }

    and the image:

    span.document img
    {
    margin:auto 0;
    padding:0;
    }

    the image's size is defined in the html file (I'm using a cms)
    now my problem : the span's dimensions are not followed and the background is not white (it works in IE thou, for once).
    If I change the display to "block" the dimensions would be all right, but of course the images then are displayed one under the other, it's a vicious circle..
    any ideas to help me out of it?

    joz
    <>

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Generally speaking those problems are taken care of by floating all of the block-level elements left or right and then putting something that clears both right under them. So in your case you could put the img tags in divs, float all the divs left (which would make them show up next to each other), and then put a div right after them that has `clear: both;' or `clear: left;' on it.

  4. #3
    joz
    joz is offline
    Member joz's Avatar
    Join Date
    May 2005
    Location
    bxl
    Posts
    36
    Member #
    10035
    thanks Shadowfiend, that helped
    why do I always forget the float ??

    but there is still the opacity question left:
    why does span.document take the opacity values of it's containing block? Even if I add "opacity: 1;" it stays like it is.

    and another thing : it there a way to align my images vertically ?

    joz
    <>

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, this is because of the way opacity works in the conceptual computer sense. If you add a filter to make something transparent, it's very difficult to overlay some other filter that makes it opaque again. So the behavior of opacity is probably done that way to ease technical implementation.

  6. #5
    joz
    joz is offline
    Member joz's Avatar
    Join Date
    May 2005
    Location
    bxl
    Posts
    36
    Member #
    10035
    is it difficult or impossible to make it opaque again?
    <>

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    It's programmatically difficult, which means the implementation probably makes it impossible for the web developer. I can't say for sure though.

    According to this link it's not possible to override opacity in child elements.

  8. #7
    joz
    joz is offline
    Member joz's Avatar
    Join Date
    May 2005
    Location
    bxl
    Posts
    36
    Member #
    10035
    sigh -- pitty
    anyhow thanks a lot for your help shadowfiend
    <>

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    No problem. Sorry the outcome wasn't more favorable :-/


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:06 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com