Hello,
I am trying to design a new layout and then when I viewed it in chrome it was just a blank page. By chance i commented out the Doctype and it is displays fine in chrome now.
Does anyone have any idea why this is happening? Meaning, I want have a Doctype, but I want the page to look like it should too.
Thanks in Advance!
The doctype isn’t hte issue. When you have no doctype the browser incorrectly bases percentage heights. Percentage heights should base their height off a parent. In your example, you don’t have a parent height set thus BOTH boxes height should be 0. Now, if you have no doctype the browser gets that wrong.
However, if you do hav a doctype, in order for it to work you need to, first of all, DECLARE a height for the parent :). The html/body need it set.
html,body{height:100%;}
The doctype is not to blame here.
oh okay. i knew the doctype couldn’t be the problem because that didn’t make sense. Thank you for explaining it to me.
So, in review, am I correct to say that in using percentage values for height and width, the parent element (if there is one) must have some declaration of a height and width?
I declared a 100% height and width and it works just as i hoped! 
Thank you!
Every element has SOME sort of parent.
The only exception to the rule is AP elements. They get their percent heights shown no matter what.
You’re welcome :).
ah okay.
Unfortunately, i am now having one more issue i was hoping you could help me with.
I am trying to add some placeholder content, but, as it should, its appearing on top when I want all of it to be over / in front of the two divs. The two divs were just to split the body’s background into two colours.
Do you have any suggestions on how to get the content on over of a 2-colour-split bg?
Well the problem is is that the top/bottom divs you have there are part of the main flow…which means other content will run on top of it.
I’d honestly not make a page with a 2 colour split, however if you were going to do like…a fading from one color to then next (gradient)…I’d place that on a wrapper div.
Can you show me what overall you’d like your page to look like? A quick mockup in photoshop or paint will suffice. I’d not go for a straight 2 different color design…I imagine it’d look bad.
I didn’t do a psd for this idea. The colour split idea however was inspired by bam.com.au and I think it looks nice there
Here is a quick sketch of what i am thinking about in my head, would you be willing to help me to bring this layout to reality?
The bam site… open your favourite browser’s developer toolbar/whatever. Find “container” and you’ll see everyone is sitting centered inside that container.
The divide is made by an image: http://www.bam.com.au/art/homeglow.jpg which sits in #glow, who’s just a parent wrapping #container. When the page is taller than that image, the rest of the dark grey comes from the body’s background. They also have a green repeated 1px thing so you keep getting the same amount of green if your screen is really really wide, on #wrap. I suppose they did that with an image so that #wrap could grow with its content without covering up the grey of the body. So in your case you’d have a purple/indigo image doing the same thing, but be aware your image will be limited in px (not % as you were hoping to use). The other option might be complicated: a box with a set height and forcibly allowing the content inside to spill out, and have that content have its own bg image/colour or something. Because of how IE deals with floats, you can’t take advantage of how floats who are unenclosed to have a float hanging out.
BTW don’t use their retarded push div technology, that was silly when it was new, and it’s sillier now. They’re doing a sticky footer. You’ve prolly seen Paul’s floating around here somewhere before.
thank you for explaining that.
the bam site…
I’m assuming this means that you have some strong dislike for it?
The limit of the px in the indigo/purple image’s height is the reason why i didn’t try that what bam did at first. So are you saying that what I am trying to achieve without using images for the bg is impossible?
Also what is push div technology? And, yes, i have seen paul’s sticky footer example.
Speaking of @Paul_O_B maybe he can verify if my idea for this layout is possible with %'s and bg colours? instead of images like bam did.
Hm, no? That’s the url, bam. I didn’t actually read the site, just looked at the code and the colours : )
I wondered. Earlier I saw this thread and thought, an image is stuck in px…
I don’t want to say that. I keep thinking it probably can be done, but it shouldn’t be brittle.
There’s some CSS3 stuff coming out like background-position which can do more than the old background-position, and the gradients have start and stop properties which can be set in %s. In fact, now that I think of it, I’ve seen Lea Verou do % background colours by taking CSS gradients and stopping them in a severe way, so that it’s not really a gradient but a line. I forget now what exactly she did, but I can dig it up. She uses it to make the CSS patterns on her site. Of course, this is CSS3 so we’ll need to think of something else too. What’s cool about the gradients is, they are applied onto “background-image” so you can start with a real image for non-supporting browsers and then override with the gradients. Browsers who support the gradients won’t use the image.
*Edit I was thinking of stuff like this http://lea.verou.me/css3patterns/ but I notice they’re making px-sized gradients and repeating them like images
The bam site is using a div called “push” which is a popular sticky-footer solution floating around on the web. I forget already what the div does, but Paul’s various sticky footers don’t require the extra element. I also notice they had a clearing div too. Tsk tsk.
Oh, okay. I just thought by … you were somehow representing, never-mind i was over-thinking
Ah, yes I have seen her patterns. I am excited to try this way if there isn’t another way, but the only issue, as you said i believe, is support. I’ll tweet her asking about % stopping points.
So much for building a better web 
I’ll tweet her asking about % stopping points.
My terminology isn’t very good there are things called colour stops but it’s some graphics term I’m using incorrectly. I’ve always sucked at math
i’m sure she’ll at least somewhat understand what were talking about
@Stomme_poes: I spoke with Lea on twitter and she said the best way to do that in CSS would be:
body{
background:-webkit-gradient(linear, left top, left bottom, from(#444444 55%), to(#999999 45%)); /* Saf4+, Chrome */
background:-webkit-linear-gradient(top, #444444 55%, #999999 45%); /* Chrome 10+, Saf5.1+, iOS 5+ */
background:-moz-linear-gradient(top, #444444 55%, #999999 45%); /* FF3.6 */
background:-ms-linear-gradient(top, #444444 55%, #999999 45%); /* IE10 */
background:-o-linear-gradient(top, #444444 55%, #999999 45%); /* Opera 11.10+ */
background:linear-gradient(to bottom, #444444 55%, #999999 45%);
}
Those aren’t the right colours, but that would be the syntax.
Aha, the numbers overlap because you start with the start (55%) and then end with higher up the page (45%). Cool.
If you set it as background-image: you can first use an image for non-supporting browsers, then let the gradients override in newer ones.
If you just want a 50/50 split of the background then position:fix the top half and let the body do the rest.
e.g.
<!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>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
body { background:#333; }
#outer {
width:960px;
margin:20px auto;
background:#fff;
border:5px solid #f0f0f0;
position:relative;
z-index:2;
}
.bg {
position:fixed;
left:0;
top:0;
width:100%;
height:50%;
background:#9faecd;
z-index:1;
}
</style>
</head>
<body>
<div class="bg"></div>
<div id="outer">
<h1>Test</h1>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
<p>Lorem impsum text</p>
</div>
</body>
</html>
It needs the one empty div but you can even lose that if you don’t want ie8 and under support and instead use body:after rules to supply the fixed positioned background at the top (IE8 actually supports :after and :before but won’t apply position fixed to the element).
oh okay. wow that is not at all as complicated as I thought it would be. Thank you. Especially for posting this so late, I appreciate you dedication
I would do the second option, but I have just dropped / am starting to drop IE6 support and I think it may be too soon to do it for ie8.
Anyway one can get rid of the vertical scroll bar without just setting overflow-y / overflow to hidden?
Meaning, eventually if there is enough content a scrollbar would be needed, but I was wondering if there was a way to hide the scrollbar while its not needed.
Are you talking about the browser scroll bar or just a regular elements scrollbars?
If you have it set to overflow:auto, as apposed to overflow:scroll, the “auto” will only have scrollbars once the elements dimensions are reached, and “scroll” will show it anyway.
If it’s browser scrollbars, at least in IE8 for IETester, no scrollbars appear to begin with…
I thought i saw a browser-scrollbar in chrome, but the second time i opened it wasn’t there O_o
Anyway here is a link to it, what do you guys think? http://dl.dropbox.com/u/270523/help/layout.html
Do you like it? The design, the colours, the logo? Would you make any changes?
Also, one more question, I tried to get the red-box to be in the bottom-right-hand corner of #container. Any ideas on how to put it there?
Thank you all again!