14 replies [Last post]
xdnns
xdnns's picture
Offline
newbie
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2010-09-09
Posts: 4
Points: 5

Hey,

I've got four different, shadow-like images that are supposed to be on top, left, right and bottom of my web page. This is my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</head>
	<body>
		<img id="t" src="img/top.png">
		<img id="b" src="img/bottom.png">
		<img id="l" src="img/left.png">
		<img id="r" src="img/right.png">
	</body>
</html>

This is the corresponding CSS:

html, body {
	min-height: 100%;
}
 
#t, #b, #l, #r {
	position: absolute;
}
 
#t {
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
}
 
#b {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
}
 
#l {
	top: 0;
	left: 0;
	height: 100%;
	width: 20px;
}
 
#r {
	top: 0;
	right: 0;
	height: 100%;
	width: 20px;
}

The shadow on top works fine. The one on the bottom works fine as long as the content of the web page doesn't exceed the viewport. If it does, the bottom shadow is in line with the bottom of the viewport, but the content of the page goes straight over that shadow, breaking my layout. Same problem with left and right shadows. Sorry for my english. Hope you get what I'm asking for.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Use CSS3.

Use CSS3.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

xdnns
xdnns's picture
Offline
newbie
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2010-09-09
Posts: 4
Points: 5

Sure, i could use CSS3, but

Sure, i could use CSS3, but it isn't well supported yet. Also, it would be nice to understand why my solution doesn't work, because I can't find my mistake.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

What browser doesn't support

What browser doesn't support it? IE6? IE7? Use CSS3Pie.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

xdnns
xdnns's picture
Offline
newbie
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2010-09-09
Posts: 4
Points: 5

Thank you, but still it would

Thank you, but still it would be really nice for me to understand where my mistake is.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Code is bad

Your code is bad.

According to the HTML specs, the body element cannot have inlines as direct children. Images are inlines, even if you turn them into blocks in the CSS (which position: absolute does).

So, a good idea is to have a div that represents your page, instead of having the body do it.

Then, understand how absolute positioning works.

Quote:

The one on the bottom works fine as long as the content of the web page doesn't exceed the viewport. If it does, the bottom shadow is in line with the bottom of the viewport, but the content of the page goes straight over that shadow, breaking my layout.

Sounds correct.
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

If you do not have a "positioned ancestor" (an ancestor element with position: absolute or position: relative), the coordinates for absolute are taken from the viewport (as you see in your case when the page is larger than the viewport).

So wrap those images in a div, set that div to position: relative, and now the images should be positioned relative to that div (and as the div contains all of the page, as the page content grows, so does the div, and therefore the position of the bottom images).
You might want to set a z-index on the bottom two images, since content of the page appears after them... otherwise, you can move them in the HTML to right before the #page div's closing tag.

BTW the alt attribute is required... since these are decorative images, leave it as an empty string.

	<body>
            <div id="page">
		<img id="t" src="img/top.png" alt="">
		<img id="b" src="img/bottom.png" alt="">
		<img id="l" src="img/left.png" alt="">
		<img id="r" src="img/right.png" alt="">
            </div>
	</body>
</html>

#page {
  position: relative;
}
 
img code here....

*random notes*
Go ahead and change your doctype from transitional to Strict. This allows the w3c validator to tell you ALL your code errors, instead of only some of them.

Also, get a meta tag with your content-type and charset. Set it first, before title or anything else. Browsers are supposed to use the headers sent by the server, and will choose those over your page meta if the server is different, but if the server doesn't send one at all, the browsers guess.

Set a language attribute on your HTML element. lang="en" if it's English, for example. Don't make screen readers guess the language, because they will start out in whatever language their user has set as default... which may not be the language your page is in.

(Seriously, CSS3 is a cute toy and all, but as with HTML5, needing Javascript as a crutch to ensure anything works in IE is bogus. At least for real sites in the real world... I'm not talking about cutesy web designer pages viewed only by other web designers, who don't surf in retarded browsers like IE.)

I'm no expert, but I fake one on teh Internets

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Stomme poes

Stomme poes wrote:

(Seriously, CSS3 is a cute toy and all, but as with HTML5, needing Javascript as a crutch to ensure anything works in IE is bogus. At least for real sites in the real world... I'm not talking about cutesy web designer pages viewed only by other web designers, who don't surf in retarded browsers like IE.)

That's your personal opinion and one I don't share. I've used CSS3 with js enhancement for IE on sites that aren't only viewed by other web designers and they've worked out fine. If js isn't enabled on a machine with IE, those people simply get a less aesthetically pleasing layout, no functionality is impaired or content made inacessible. Don't push your prejudices onto everyone else.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: If js isn't enabled on

Quote:

If js isn't enabled on a machine with IE, those people simply get a less aesthetically pleasing layout, no functionality is impaired or content made inacessible.

I've already seen a website in the wild relying on text-shadow to make white text on light grey background readable.
Yes, that's the fault of the developer and not of CSS3 itself but I'm bracing myself for more and more and more of it, because developers get this shiny cute toy and break things with it (because they think they can always rely on Javascript to save their butts if they do it wrong).

I use CSS3 (for silliness and fun) on production sites, but I let it degrade for IE entirely. There's no way I can do such a stupid screwup as the page I mentioned earlier because then I (and everyone else) would see it.

Certainly, telling someone who obviously needs to still get the basics of HTML and CSS down to use CSS3 and Javascript is a recipe for just this sort of problem.

Quote:

Don't push your prejudices onto everyone else.

It's what I do, man.

I'm no expert, but I fake one on teh Internets

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Stomme poes wrote: Certainly,

Stomme poes wrote:

Certainly, telling someone who obviously needs to still get the basics of HTML and CSS down to use CSS3 and Javascript is a recipe for just this sort of problem.

I disagree. We're not talking about text shadow here, we're talking about decoration framing a layout that won't have any impact on the legibility of the content. You can't automatically assume that talking about one particular feature of CSS3 or HTML (or Ruby or Python or anything else) is automatically going to be extrapolated out by a newcomer to coding into areas that could prove harmful. If you take that attitude you'd never recommend anything because at some point, the newbie might come up with a technique that you consider 'harmful'.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

True

Taken like that, I see your point, and yes for page corner decorations I don't think anyone can break anything either way. Now who would stop at rounded shadow corners if they already use CSS3 and rely on PIE (or Modernizer or whatever)?
(offtopic jQuery has finally been entered into one of our sites (for AJAX management originally), and what do you know? We suddenly need image sliders and new fancy form controls and all sorts of stuff that we didn't need before, but hey, we've already got jQuery beign called, right? I wish management had never heard of jQuery)

For just these corners, using purely CSS3 could be a bandwidth savings compared to the original code, though then downloading scripts to make it work defeats it for me (I'd still let IE languish).
My original comment is indeed about CSS3 in general. It's cute. It's shiny. It doesn't work on the most popular browser on the planet (until maybe spring next year or so?) without scripting crutches. I wouldn't tell someone like the OP "use CSS3" as a solution to this problem as presented.

As a side note, the OP is awesome for asking why the original code is broken. This person may become someone who will correctly use stuff like CSS3 when the time comes.

I'm no expert, but I fake one on teh Internets

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Stomme poes wrote: using

Stomme poes wrote:

using purely CSS3 could be a bandwidth savings compared to the original code, though then downloading scripts to make it work defeats it for me (I'd still let IE languish).

Use conditional comments and then only those browsers that don't support CSS3 natively will need to download the extra file.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If we don't continue pushing

If we don't continue pushing forward then we'll be stagnant with no new technology to rely on. You may not like jQuery, rounded corners, Ajax, HTML5, and the likes, but without such things, we wouldn't have applications like Google Docs.

And yes, with things like shadows, rounded corners, etc - these are just aesthetics and in no way make the content easier or harder to read (or at least they shouldn't, if you manage to make something impossible to read like using text shadow just to see a word on a similar color background then you're an idiot). If a browser fails to support these things, either by lack of built in support or styles/scripts turned off then they simply get squared corners and no shadows.

This not only eliminates the nightmarish barrage of images needed to be used, but the additional non-meaningful markup, as well as the extraneous CSS. CSS3, while in it's current form, has to rely on a separate line for each browser (which is annoying to say the least) it won't always be that way. As long as we continue to move forward, so will the browsers, and one day we will be able to write one line of code to create something that needed 4-8 images, 10-20 lines of HTML, and 30-50 lines of CSS. (Note: we'll probably still need an IE6 hack... I mean seriously MOVE ON PEOPLE!!! UPGRADE ALREADY!!!).

/rant

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oh yeah we'd be lost without

Oh yeah we'd be lost without those Google docs Party Tongue

Now can every one lighten up please, anyone would think any of this means owt

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

xdnns
xdnns's picture
Offline
newbie
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2010-09-09
Posts: 4
Points: 5

Thanks, Stomme poes, you have

Thanks, Stomme poes, you have been a great help. I managed to get that working, but now I have another similar problem, which is why I'm posting in the same thread.

This time I have different decorative borders, one is supposed to be in the top left, the other one in the bottom right corner.

<!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=iso-8859-1">
        <!-- please note I'm leaving some meta data out here -->
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="page">
                <div class="box topbox">
                    Some text goes here.
                </div>
                <div class="box">
                    Some more here.
                </div>
                <div class="box bottombox">
                    Some more here.
                </div>
        </div>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
}
 
html, body {
    min-height: 100%;
}
 
body {
    background: #fff;
    font-family: Georgia, serif;
    font-size: 14px;
    color: #000;
    background-color: #fff;
    background: url(images/bottomright.png) bottom right no-repeat;
}
 
#page {
    background: url(images/topleft.png) top left no-repeat;
    min-height: 400px; /* for testing purposes */
}
 
.box {
    background-color: rgb(230,230,230);
    padding: 18px;
    width: 70%;
    margin: 5px auto;
}
 
.topbox {
    margin-top: 30px;
}
 
.bottombox {
    margin-bottom: 30px;
}

Now topleft.png is not actually in the top left corner of the page, but it has a white space of 30px above it which it somehow gets from the .topbox div's margin-top of 30px, although that one is nested inside the #page div. What makes it even more strange is that everything works fine as soon as I give the #page div a border (e.g. 1px solid #000). Ugly border, but no more white space on top.

(I found a workaround for this, but again, it would be nice to understand why this solution doesn't work, so thanks in advance.)

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Margin collapse

Quote:

which it somehow gets from the .topbox div's margin-top of 30px, although that one is nested inside the #page div.

Margin collapse does two weird things that were invented to screw with our heads:
Makes margins that meet vanish, and makes margins on inner elements get seemingly transferred to an outer element.
Yes, it's considered a feature. One that is unintuitive and makes us work harder to do things that should be simple.

http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/ especially section called "Margins on Inner Element Only"

Margin collapse vanishes if just 1px of padding or border is added to the element, as you've seen.

You can either
pad the outer element instead of margining the inner element (visually looks the same)
or
use an invisible border (but to be invisible in IE6 you have to use a non-solid border: border: 1px dashed transparent; or something).
If the two elements don't have different background colours, 1px padding (on the side you wanted the margin) is easier and just as invisible.

I tend to pad the outer element except when I can't.

Slightly related and you'll run into it eventually: http://www.search-this.com/2007/09/05/lets-be-clear-about-this/
IE deals with margins on floats differently. Floats and absolutely positioned boxes are supposed to always be immune to margin collapse, but not in IE. Figures.

I'm no expert, but I fake one on teh Internets