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 4 of 4
  1. #1
    Junior Member
    Join Date
    Oct 2008
    Location
    Halmstad, Sweden
    Posts
    2
    Member #
    17532
    I have spent a number of hours trying to make a design that will add a shadow behind a photo. A photo that can be of different size...

    Now I have a solution, if I change the photo to a vertical one or with another size, the shadow follows it nicely. I believe it works in IE and mozilla based. But, how do I center the whole thing? I have tried a couple of different ideas but noone works..
    www.henrikhansen.se/CSStest3

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    First off, let me just say that looks gorgeous

    That said, this is a tough nut to crack. The reason it's tough to center this is because of the reliance on floating. Floats are unique in that they make even block-level elements restrict their size to only what their child elements require. This is why you can use them to snuggly fit your shadows to your image. On the other hand, floats won't respect a lot of placement- and spacing-related instructions, including the centering [minicode]margin: 0 auto;[/minicode]. Wrapping the float in a non-floated div that does have the centering instruction doesn't help, because it expands to the page's size, meaning that the `centering' still leaves the block inside placed normally.

    My fix is a bit super-hackish, and only tested in Firefox, so no guarantees. Here we go:

    * First, wrap your shadow div in yet another wrapping div. Call it `body', `contents', whtaever.
    * Give this div [minicode]display: inline-block;[/minicode]. This will give it the properties of a block (i.e., the ability to contain the elements inside it, etc) while giving it the constricted sizing of a float. It will also flow the div as if it were an inline element, meaning it will be subject to such useful properties as text alignment.
    * Give the body element [minicode]text-align: center;[/minicode]. This should center the previous div since it is an inline element, and that will center its contents because it is also a block element.

  4. #3
    Junior Member
    Join Date
    Oct 2008
    Location
    Halmstad, Sweden
    Posts
    2
    Member #
    17532
    Quote Originally Posted by Shadowfiend
    First off, let me just say that looks gorgeous

    That said, this is a tough nut to crack. The reason it's tough to center this is because of the reliance on floating. Floats are unique in that they make even block-level elements restrict their size to only what their child elements require. This is why you can use them to snuggly fit your shadows to your image. On the other hand, floats won't respect a lot of placement- and spacing-related instructions, including the centering [minicode]margin: 0 auto;[/minicode]. Wrapping the float in a non-floated div that does have the centering instruction doesn't help, because it expands to the page's size, meaning that the `centering' still leaves the block inside placed normally.

    My fix is a bit super-hackish, and only tested in Firefox, so no guarantees. Here we go:

    * First, wrap your shadow div in yet another wrapping div. Call it `body', `contents', whtaever.
    * Give this div [minicode]display: inline-block;[/minicode]. This will give it the properties of a block (i.e., the ability to contain the elements inside it, etc) while giving it the constricted sizing of a float. It will also flow the div as if it were an inline element, meaning it will be subject to such useful properties as text alignment.
    * Give the body element [minicode]text-align: center;[/minicode]. This should center the previous div since it is an inline element, and that will center its contents because it is also a block element.
    Thanks for your thorough response. I've tried it now and guess what... Works! But not in IE...
    Don't know if I bother too much about it, but a hack on the hack to make it IE-compliant would be cool.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hm... That's actually mildly surprising. Some initial research (see http://www.solstice.co.il/examples/h..._width_in_css/) I just did suggests that this fix is usually actually the IE way to fix it, while the more `traditional' way to fix it in other browsers is to use [minicode]display: table;[/minicode] (if I may: ick; please let me keep my inline-block, thank you. If I'm going to be using display: table, I'd better be putting some table-rows and table-columns in there).

    EDIT: Sorry, I didn't answer your question -- I don't know why it isn't working, but see if that other one works. Also, which version of IE? I currently am in Linux, so it's not too easy for me to go IE-bug-hunting, but I might have time later.


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 09:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com