Yeah Paul, and then just now I used your image (1000 x 5000) with my code and the rounding error occurred at 2 zoom out levels (not 3 like my image). Again, this probably just mimics a larger res/screen settings. So “probably”, I DON’T see a rounding error at my resolution with your or my code. You DO see a rounding error with my code at your screen resolution. Billy Bob and Sarah Jane WILL possibly see a rounding error with either your or my code at X-value resolution. I think this is just the same old FX rounding error problem with a different name. Or maybe I’m wrong? I’m getting a Samson 24 inch (1920 x 1200 Res) for Christmas so I should have more testing options at that time (thank God!).
I’m getting a Samson 24 inch (1920 x 1200 Res) for Christmas so I should have more testing options at that time (thank God!)I’m getting a Samson 24 inch (1920 x 1200 Res) for Christmas so I should have more testing options at that time (thank God!).
I have the samsung 22" which I bought last year and it’s a great monitor.
[ot]I’ve just ordered myself the 27" imac for Christmas as I keep getting asked to test layouts on a mac.
[/ot]
ooohh - that’s nice - luuucky! Someday when I can piece together an extra two grand I’ll be getting a mac too. Although, with my third child on the way that could be awhile. However, I see you finance it - hmmm…
Although, with my third child on the way that could be awhile
3 - That’s just plain greedy 
Congratulations.
My two are both grown up and moved out luckily (but I’m going to be granddad next month!!).
Congradulations Grandpa!
Congrats :). All that’s left for the guru image of Paul to be finished is a nice long beard ;).
Off Topic:
Your children inherit your CSS skills :D?
It is interesting that I found this thread because over the past few days I’ve tried two of the three techniques discussed. It would have saved me a lot of time if I would have found this thread first. I have resigned myself to the fact that I am never going to be good at this stuff. I can’t wrap my mind around it. Some people have it, some don’t.
I first tried the “Big John” method. The problem I had with that was it created space around the shadow that I could not figure out how to get rid of. It was almost like there was a margin around the box. But there wasn’t.
Then I spent a few hours looking at Paul O’B’s method. I made a custom shadow of 1500 x 5000px outer width, 1480 x 4980 inner width. Doing that created a gap between the border and the shadow using his code. I was able to eliminate the gap on the top and left sides, but I screwed everything up royally on the right and bottom sides. Another issue I had was with the use of empty <b> tags. I wonder if div tags could be used instead?
Looking at this thread I saw EricWatson’s version at visibilityinherit.com. Interestingly, I did not look at that method until I found this thread even though I had it bookmarked. 
I obviously found it before. That method appears to be the most elegant and most simple. The problem with that method is that the width has to be applied to the outer shadow, causing the border shadow to not dynamically match the content. It isn’t exactly fluid. But it is nice.
I applied a float: left and a clear: both to the shadow box so it would not expand the full width of the screen.
Also, putting a 1px border on the inner “wrap” div leaves 1px of white space between the border and the shadow. I changed the values of 22px to 20px and the values of 11px to 10px and got rid of the unwanted white space.
I am certainly leaning to the version on visibilityinherit.com. I’ll upload my shadow image and paste in the code. There is a problem with IE7: An additional border appears when the screen is scrolled. This has to be an IE bug with a float, I assume. So, how do I get rid of it? Does anyone know?
I would also like to get the boxes flush left. Right now there is a margin or a padding pushing them off the left side. Anyone have any ideas how to get the border shadow flush with the left side? I tried changing padding-top and padding-left on shadow to 15px. That made it flush left, but it screwed up the border shadow a little bit.
If anyone knows how to do what I want to do, please let me know.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shadow</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.shadow { /* move width and margins from #wrap to #shadow */
float: left;
clear: both;
/* margin:30px auto 0; */
position:relative;
padding-top:20px;
padding-left:20px;
}
.shadow .a {
position:absolute;
right:0;
top:0;
width:20px;
height:20px;
background:url(shadow.png) right top no-repeat;
}
.shadow .b {
position:absolute;
left:0;
bottom:0;
width:20px;
height:20px;
background:url(shadow.png) left bottom no-repeat;
}
.shadow .c {
background:url(shadow.png) right bottom no-repeat;
}
.shadow .d {
position:relative;
left:-20px;
top:-20px;
background:url(shadow.png) left top no-repeat;
}
.shadow .e {
position:relative;
left:10px;
top:10px;
}
.wrap {
border: 1px solid black;
padding: 10px;
}
* html .shadow .a, * html .shadow .b, * html .shadow .c, * html .shadow .d {
background:none;
}
</style>
</head>
<body>
<!-- From http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow.php -->
<div class="shadow"><div class="a"></div><div class="b"></div><div class="c"><div class="d"><div class="e">
<div class="wrap">
....
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
Here is some content <br/><br/>
</div>
</div></div></div></div>
<div class="shadow"><div class="a"></div><div class="b"></div><div class="c"><div class="d"><div class="e">
<div class="wrap">
....
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
Here is some content that is wider than the other content yeah baby!<br/><br/>
</div>
</div></div></div></div>
</body>
</html>
Time for bed. Thanks to anyone who helps.
It’s just a matter of applying the correct offsets and negative margins etc but can be tricky. My example works perfectly as you can see and is pretty straight forward (well as straight forward as it can be ;)).
Another issue I had was with the use of empty <b> tags. I wonder if div tags could be used instead?
What’s wrong with the b element. It’s used for decoration only and almost perfectly fits the use of a non semantic element. If you don’t want to use the b element use a span instead but that means you will have to add a class to it to differentiate the other span in use.
Eric Meyer says:
What about semantic purity?” you may ask. In my view, b and span have the same semantic value, which is to say basically none.
I’ll let Eric Watson answer questions on his layout
b all the way! You don’t need a width on the outer shadow. It is only there for demo purposes. However, I’m glad you brought this up. Because know that I have a wide screen monitor, I can see I had the max-width incorrect. I neglected to consider the padding. I updated it.
Without a width, the shadow extends the full width of the screen regardless of the content inside. Your method requires a limiting width on the outer shadow. Now, if I can figure out a way to get the shadow to shrink or expand to fit the content and work in IE7 and up, this method would be perfect. You could just drop whatever content inside of it and the shadow would fit it (within the bounds of the shadow image).
I have attached a screenshot of your demo method with the width removed and only a small amount of text. I used your code and your image with the only change being the removal of the width and max-width on the shadow. The shadow extends the full width of the screen just about. I would like it to fit only the content inside. The screenshot is from Firefox 3.6.2.
Thanks for your attention to this. Just to let you know, the CSS in your demo does not match the CSS in [URL=“http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow.php”]your explanation of it. Some people will certainly be confused by it.
Your example does work pretty well. It isn’t intuitive in that you can look at it and immediately figure out what is going on (unless you are a advanced at CSS, which I am not). As for your <b> tags, figuring out why you were applying a height and width to a text formatting element through me for a loop.
I’ll keep plugging away at EricWaton’s method and see if I can get the shadow to fit the content inside. Maybe I can blend Paul’s and Eric’s together to get what I’m after.
Thanks for looking at this.
By the way, does anyone know how mobile devices handle these single shadow images? I get a lot of visitors on iPhones and other mobile devices.
Yeah thats what a divs do. If you want it to shrink wrap it’s content then either float the outer shadow or AP it. Both work.
Yes, I’m aware. I do not code/cater for people that would be confused by that. It’s merely a simplified version void of frills.
I just looked at my demo on my mac Iphone emulator and the shadows don’t seem to show. The page looks fine but the shadows seem to be missing. Might be something to do with the way that the iphone scales all pages to fit.