Great article. Of course I went to try it out and it works fabulously. I have an image in the <div id=“header”> that floats to the left when the css for #header {text-align: center;}.
In Safari I found I could alter the <div class=“img-shadow > and the image and drop shadows would take on the positioning of #header and be centered. Unfortunately this doesn’t work on Camino, Firefox or OW 4.5. All show a left floated image with frame and a drop shadow that floats to the right.
What am I doing wrong or is this some quick to the mozilla browsers? You can see what I’m seeing at http://fragencosmeticsurgery.com
Andy: when a block element is created, by default it assumes all available horizontal space. That is what you’re seeing (with the shadow going all the way to the right). The float, in this case, is very necessary. The element can be floated to left or right, it doesn’t matter, but it does have to be floated. Thus, positioning of the image must be done through fiddlement of the margin values.
If you want to center the image you’ll have to enclose it in another div and center that.
I’m working on some improvements of the technique, so there may be more to talk about later =)
Andy, I think that is not properly centered. There is an interesting discussion on how to center a div (one would think this would be simpler, right?) at Andy Budd’s site here:
Copy & paste the code below to embed this comment.
Andy Fragen
Sergio,
You’re my hero. Andy Budd’s page worked. It only took me 30 min to figure it out though. I added 2 divs around the object to be centered with the following css
Andy’s width of 600px didn’t seem to center the image for me but using a smaller width of 250px and a min width depending upon how narrow you’re willing to let your browser window collapse seems to work great.
Thanks. Now can’t there be a simpler way?
The only problem I see is in Camino 0.7 I loose part of the drop shadow. :-(
and have that show up in any format you want. 9 images vertically, 3 by 3, some other format including all the styles in iPhoto all only by changing the CSS.
Who do we have to influence to get this thing done right?
For those Safari users, once you update your OS to 10.3.4 (which brings Safari 1.2.2 I guess, or at least updates it), you will notice that your dropshadows (using the technique in this article) are aligned all the way left, so there’s no right-side shadow and it cuts off with the picture edge on the left.
Anybody have a quick fix for this? Is it a problem with Safari’s CSS rendering? It still works in other Mac browsers (IE, NS). Should I submit a report to Apple?
82 Reader Comments
Back to the ArticleAndy Fragen
Sergio,
Great article. Of course I went to try it out and it works fabulously. I have an image in the <div id=“header”> that floats to the left when the css for #header {text-align: center;}.
In Safari I found I could alter the <div class=“img-shadow > and the image and drop shadows would take on the positioning of #header and be centered. Unfortunately this doesn’t work on Camino, Firefox or OW 4.5. All show a left floated image with frame and a drop shadow that floats to the right.
What am I doing wrong or is this some quick to the mozilla browsers? You can see what I’m seeing at http://fragencosmeticsurgery.com
sergio
Andy: when a block element is created, by default it assumes all available horizontal space. That is what you’re seeing (with the shadow going all the way to the right). The float, in this case, is very necessary. The element can be floated to left or right, it doesn’t matter, but it does have to be floated. Thus, positioning of the image must be done through fiddlement of the margin values.
If you want to center the image you’ll have to enclose it in another div and center that.
I’m working on some improvements of the technique, so there may be more to talk about later =)
Andy Fragen
Sergio,
Thanks for the reply. I took out the style=“float:none;” from the div and wrapped the img-shadow div like so.
<div >
<div class=“img-shadow”>
<img….>
</div>
</div>
And the image does not center. It floats to the left. Am I not centering the enclosing div properly?
I look forward to improvements in the drop shadow technique because it’s great.
Andy
sergio
Andy, I think that is not properly centered. There is an interesting discussion on how to center a div (one would think this would be simpler, right?) at Andy Budd’s site here:
http://www.andybudd.com/blog/archives/000150.html
Good luck!
Andy Fragen
Sergio,
You’re my hero. Andy Budd’s page worked. It only took me 30 min to figure it out though. I added 2 divs around the object to be centered with the following css
.centerWrap
{
min-width: 400px;
text-align: center;
}
.center
{
margin: 0 auto;
text-align: left;
width: 250px;
}
Andy’s width of 600px didn’t seem to center the image for me but using a smaller width of 250px and a min width depending upon how narrow you’re willing to let your browser window collapse seems to work great.
Thanks. Now can’t there be a simpler way?
The only problem I see is in Camino 0.7 I loose part of the drop shadow. :-(
Andy
Marat
Very interesting. But It looks to have very limited usage.
GMan
I really think you guys are doing a great job coming up with solutions in CSS.
I really which that CSS actually separated content from presentation though. If CSS really worked than all you should need in the HTML is
<img class=“myshadowcssclass”>
Anything more just shows that CSS needs another iteration or two before it really delivers the promise of separating content from presentation.
To take it even further, if CSS really worked then using only image tags all with the same class you could be able to format a gallery as in
img1.jpg
img2.jpg
img3.jpg
img4.jpg
img5.jpg
img6.jpg
img7.jpg
img8.jpg
img9.jpg
and have that show up in any format you want. 9 images vertically, 3 by 3, some other format including all the styles in iPhoto all only by changing the CSS.
Who do we have to influence to get this thing done right?
Steve
This effect really spruces up a gallery of previously flat images on a page. Makes for a much nicer display:
http://www.larimer.org/photos/
Liaw Hong Zhi Vincent
hello everyone…
i’ve tested this script. it works fine when its in the <body></body> tag.
but when its within another <div></div> tag.. it looks very weird!
anyone experienced this before?
cheers,
vincent
Dante-Cubed
CSS3 has a box-shadow property just for this but no browser supports it yet.
1beb
Thanks for the excellent write up.
Patrick
For those Safari users, once you update your OS to 10.3.4 (which brings Safari 1.2.2 I guess, or at least updates it), you will notice that your dropshadows (using the technique in this article) are aligned all the way left, so there’s no right-side shadow and it cuts off with the picture edge on the left.
Anybody have a quick fix for this? Is it a problem with Safari’s CSS rendering? It still works in other Mac browsers (IE, NS). Should I submit a report to Apple?