CSS question

[danielcopelandnz56]

On one of my pages, I have a background image with an empty <div> over the top of it; the empty <div> is a partly-transparent white background for the text <div>. I can't put the text inside the empty <div>, because then the text is partly transparent as well.
The problem I'm having is that, although the text and background <div>s have exactly the same positioning and size CSS, the text sticks out of the white background on the right-hand side. Here is the code:

#whitebox {
    position : absolute;
    width : 83.333%;
    left : 8.333%;
    height : 100%;
    background-color : #ffffff;
    opacity : 0.66667;
    filter : Alpha(opacity=66.667);
}

#content {
    position : absolute;
    width : 83.333%;
    left : 8.333%;
    height : 100%;
    padding : 1em;
}

And, to be clear, the <div id='content'> is outside the <div id='whitebox'> and comes after it on the webpage.
The problem occurs in Firefox. It did not occur in IE until I put a doctype declaration on the HTML page -- but now it does.
I've had this problem a few times. In the past I've quietly changed the design so as not to have to worry about it, but this is no longer an option.

 

[essellar]

When you use width and height properties in "standards mode", you are sizing the content-box. The content-box is just the content -- the padding, border and margin are all outside of the content-box. Since "whitebox" and "content" have the same size, but "whitebox" has no padding, "content" is actually larger by the amount of the padding (2em in either direction).

That's fixable using the CSS3 box-sizing: border-box; declaration, which makes the browser work in the sensible way that "quirks mode" Internet Explorer works -- but box-sizing isn't supported in all browsers. (Ironically, Internet Explorer -- at least versions before 9 -- is the problem; it can't be forced to act like its old self while there's a valid doctype in place.)

You can always use a tiled semitransparent white PNG for the content background image as a work-around, or use an RGBa background-color (which includes an opacity value) for modern browsers and a filter for Internet Explorer. That will let you dispense with "whitebox" altogether. See this post at DaltonLP.com for details. You will still have to deal with the padding width on the box, but you won't have to absolutely position anything, so you can use "auto" for the margins.

 

[danielcopelandnz56]

Thanks for the reply; it was very helpful. I'm afraid I didn't do what you suggested, because I'm not in a position to assume that users will be using CSS3-compliant browsers; but I was able to solve the problem in a different way with the information you gave me.
Now I have another problem. My design specifications require that I put some pages in double columns. Because I can't assume CSS3 capability, and also have to make it work in IE, the columns: property and its variants and derivatives are no use. I've tried several other fixes I've found, and none of them are working; the top of the right-hand column sits level with the bottom of the left-hand one. Here's the CSS I'm currently using:

.doublecol {
    width : 821px;
    margin : 0 auto;
}

.leftcol {
    position : relative;
    margin-left : 0;
    float : left;
    width : 402px;
}

.rightcol {
    position : relative;
    margin-left : 419px;
    float : right;
    width : 402px;
}

And here's the HTML to go with that:

<div class='doublecol'>
                <div class='leftcol'>
                                <p>
                                                Integer nisi mi, congue ultricies porta auctor, lacinia eu neque...<br />
                                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                                </p>
                </div>
                <div class='rightcol'>
                                <p>
                                                Aenean tortor diam, lacinia ut condimentum vitae, iaculis sit amet urna...<br />
                                                Sed semper, orci eu pulvinar sagittis, metus arcu congue lorem, vitae feugiat velit leo at est.
                                </p>
                </div>
</div>

 

[essellar]

The margin is considered part of the block for floating purposes, so the right-hand column is floating as high as it's allowed to. You don't need the margin-left if you're floating right -- the block will position itself according to the right-hand side position (the right-hand edge of the block will be moved as far to the right as it can go within the container, and the left-hand edge will be determined by the width you've declared).

That may still leave you with a staggered arrangement in some browsers, so adding a clear: right; to your right-floated elements should prevent them from clearing anything that is floated left.

 

[danielcopelandnz56]

Problem solved! Many thanks.

 

[danielcopelandnz56]

Yet another CSS problem. I can't get my content centred horizontally. The solution people give to this, in web forum after web forum, is:

#container {
	width : 1024px;
	margin-left : auto;
	margin-right : auto;
}

...which is what I have, but isn't working. I have tried several changes to my DOCTYPE declaration, and none of them so far has made it work either.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-- left-aligned in Firefox and IE;

<DOCTYPE html PUBLIC "http://www.w3.org/1999/xhtml">

-- left-aligned in Firefox, right-aligned in IE;

<!DOCTYPE html PUBLIC "http://www.w3.org/1999/xhtml">

-- left-aligned in Firefox, right-aligned in IE;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/1999/xhtml">

-- left-aligned in Firefox and IE. Need help rather urgently.
[EDIT: Putting

	display : block;

in the CSS declaration didn't work either.]
[EDIT: Nor did setting the text-align for the <body> to "center" and the text-align for the <div id='container'> to "left".]

 

[essellar]

The auto-margins part is right (explaining why you see it everywhere) which means that what you're applying it to must be wrong -- or at least not what you think it is. If you insist on using XHTML 1.0 Transitional,* then your first doctype declaration is the "rightest" of the bunch. (The third is missing the URL to the DTD, so browsers will go into "quirks mode". Firefox stays pretty close to the standard, but IE's rendering is very different -- it acts like IE5.x.)

We'd need to see a minimal example of your markup (all of the divs/containers, but you can sort of gloss over the content with some dummy text or comments) to help you find the problem.

___________________
* I've been fighting XHTML as a concept since it first reared its ugly head. HTML is a subspecies of SGML, which is intended as a text document markup language. XML is a "mimic" language that is not actually related; it only bears an external resemblance to SGML and HTML because it uses the same "alphabet" (the tagging schema and DTDs). Did you know that there is no reason why sibling paragraphs should come in any particular order on the displayed page in XHTML, or that your "ordered" lists can be in any order? The only thing keeping user agents from rendering, say, the shortest paragraphs first is convention -- the rules of XML (and XHTML is an XML document type) don't include ordering precedence among siblings in a hierarchy. A serial reading of the document (as with SAX) will always get the order right, but a tree view (DOM) doesn't have to if the document is XHTML. I'm glad it's gone.

 

[danielcopelandnz56]

Here's my content HTML:

<body>
	<div id='backgroundbody'>
 		<div id='whitebox'></div>
 		<div id='content'>
 			<div id='heading'><img src='TITLEIMAGE.gif' /></div>
 			<div id='contactdetails'>[address and phone number]<br />
				[e-mail]
 			</div><hr />
 			<div id='topmenu'>
 				<div class='menuitem'>&nbsp;</div>
 				<div class='menuitem'>&nbsp;</div>
 				<div class='menuitem'><span class='highlight'>HOME</span></div>
 				<div class='menuitem'><a href='[page 1 url]'>PAGE 1</a></div>
 				<div class='menuitem'><a href='[page 2 url]'>PAGE 2</a></div>
				<div class='menuitem'><a href=''[page 3 url]'>PAGE 3</a></div>
 			</div><br />
 			<hr class='spaceunder' />
 			<hr class='spaceunder' />
 			<div id='maintext'>
 				<span class='intro'>[front-page text goes here, but I don't think this is the issue as it's happening on all the pages]</span>
 			</div>
 			<div id='illustration'><img src='[front-page illustration here]' /></div>
			<br />
 			<hr />
 			<div id='copyrightinfo'>[copyright notice]</div>
 		</div>
 	</div> 
</body>

Please help!

 

[essellar]

I see you've used "backgroundbody" rather than the more conventional "container" as the id for your outermost div. Are you using #backgroundbody or #container in your CSS?

 

[danielcopelandnz56]

#backgroundbody. I did check and double-check for mistyped IDs.

---------- Post added at 12:33 AM ---------- Previous post was at 12:29 AM ----------

Actually, here's the full CSS as well. I can't find any errors; maybe you can.

body {
	margin : 0;
	border : 0;
	padding : 0;
	color : #908f8d;
	font-family : "Adobe Garamond", "Adobe Garamond Pro", "Garamond", "Palatino Linotype", "Perpetua", "Times New Roman", serif;
	font-size : 16px;
	font-weight : 450;
	text-align : center;
}

body a:link {
	color : #161719;
	text-decoration : none;
}

body a:visited {
	color : #161719;
	text-decoration : none;
}

body a:hover {
	color : #ecc196;
	text-decoration : none;
}

body a:active {
	color : #ecc196;
	text-decoration : none;
}

#backgroundbody {
	position : absolute;
	width : 1024px;
	margin-left : auto;
	margin-right : auto;
	height : 100%;
	background-color : #a3a3a3;
	background-image : url('[background image URL]');
	background-attachment : fixed;
	background-repeat : no-repeat;
	background-position : -200px 0px; 
	padding : 0;
	border : 0;
	text-align : left;
}

#whitebox {
	position : absolute;
	width : 821px;
	left : 85px;
	height : 100%;
	padding : 16px;
	background-color : #ffffff;
	opacity : 0.66667;
	filter : Alpha(opacity=66.667);
}

#content {
	position : absolute;
	width : 821px;
	left : 85px;
	height : 100%;
	padding : 16px;
}

#content hr {
	color : #908f8d;
	clear : both;
}

.spaceunder {
	margin-bottom : 25px;
}

#heading {
	margin-top : 25px;
	margin-bottom : 8px;
	font-family : "Engravers MT", "Wide Latin", serif;
	font-size : 40px;
	color : #161719;
}

#contactdetails {
	font-size : 14px;
}

#topmenu {
	margin-top : 30px;
	font-family : "Avenir 55 Roman", "Calibri", "Gautami", "Helvetica", "Arial", sans-serif;
	font-size : 15px;
	font-weight : 900;
}

.menuitem {
	position : relative;
	float : left;
	width : 16.667%;
	text-align : right;
}

.highlight {
	color : #ecc196;
}

#maintext p {
	color : #44566a;
}

.intro, .contactintro {
	font-size : 24px;
	color : #161719;
}

.doublecol {
	width : 821px;
	margin : 0 auto;
}

.leftcol, .contactintro {
	position : relative;
	margin-left : 0;
	float : left;
	width : 402px;
}

.rightcol {
	position : relative;
	float : right;
	width : 402px;
}

#illustration {
	margin-top : 24px;
}

#mapimage {
	position : relative;
	float : right;
	width : 402px;
}

#copyrightinfo {
	font-size : 12px;
}

 

[essellar]

You have position:absolute; for #backgroundbody -- that will default to top and left values of 0 if you don't set values for them (or for bottom or right, as desired), which makes your auto margins useless.

If you are setting a position value to make sure that the objects inside can be absolutely positioned, then use position: relative; instead. Relative positioning allows the element to take its normal place in the document flow, but it also gives an "anchor" for child elements to hang onto.

 

[danielcopelandnz56]

Er... partial thanks. That fixes my centring, but my background has disappeared.

 

[essellar]

That's probably because all of the content is absolute-positioned, which means that the element has zero height.

Really, absolute positioning is something you should find yourself using rarely, and then only for overlays or elements that are being moved. Elements that are absolutely positioned are not part of the document layout flow -- it's as if they don't exist as far as the rest of the page is concerned.

A height value of 100% is meaningless for all intents and purposes (it almost always means "100% of the height of the content of the element", and that only includes content that is part of the document flow), so it can't be used to stretch an element to fit its absolutely-positioned content. The only things that are going to be at least 100% of the height of the viewport when you set a background are the body and the html elements -- everything else depends on the rendered size of the box.

There are non-standard (so far) components of CSS3 that will fix this little mess, but none of them are really safe to use in production at the moment. Until then, floats and clears are your friends (although with friends like that...). Unless you need to put two things in the same place at different z-indexes, stay away from absolute positioning.