Hmm. No reset, px metric fonts declared on body (/FAIL/ right out of the gate), everything shmooshed onto one line making it difficult to debug…
… though as mentioned the ‘problem’ is margin collapse. Solution? use padding instead of margin.
If I were to code the same thing, the CSS would be something like this:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
padding-top:30px;
text-align:center; /* center #wrapper IE 5.x */
/* DYNAMIC FONTS -- USE THEM!!! */
font:normal 85%/140% arial,helvetica,sans-serif;
color:#666;
}
p {
padding:0.6em 0;
}
#pageWrapper {
position:relative;
width:900px;
margin:0 auto;
text-align:left;
}
.overlayHome {
position:absolute;
top:0;
width:420px;
color:#EEE;
opacity:0.90;
-moz-opacity:0.90;
filter:alpha(opacity=90);
}
#survey {
left:0;
}
#thankYou {
left:450px;
}
.borderTop,
.borderBottom {
height:8px;
font-size:1px; /* prevent IE height bug */
background:url(images/borders.png) 0 0 no-repeat;
}
.borderBottom {
background-position:-420px 0;
}
.borderMiddle {
padding:0 20px;
/* added bgcolor for when images are disabled! */
background:#4C4C4C url(images/borders.png) -840px 0 repeat-y;
}
#thankYou .borderMiddle {
border:1px solid #F00;
}
With this for markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Overlay Demo
</title>
</head><body>
<div id="pageWrapper">
<div id="survey" class="overlayHome">
<div class="borderTop"></div>
<div class="borderMiddle">
<p>
Lorem ipsum nam reque delicatissimi id, expetenda gubergren prodesset cum ne, sed putent forensibus complectitur ex. Ei idque adversarium theophrastus vel, ad pri vocibus volutpat, quidam indoctum conclusionemque has cu. Vix impedit ceteros atomorum in. At vim decore altera diceret, te semper aliquip intellegat nam, quo ei lorem tation urbanitas. Has iisque dissentiet ea, antiopam postulant facilisis eum ea.
</p><p>
Quem harum liberavisse ad sit, vocent tritani vis et. Qui primis accusata laboramus ex, mei ei brute dolore mediocrem, ius ad denique rationibus adipiscing. Est novum audiam ullamcorper eu. Vix causae similique constituam te, erant mucius saperet te ius. Te ceteros ponderum deterruisset ius, sit inimicus expetendis ei.
</p>
<!-- .borderMiddle --></div>
<div class="borderBottom"></div>
<!-- #survey.overlayHome --></div>
<div id="thankYou" class="overlayHome">
<div class="borderTop"></div>
<div class="borderMiddle">
<p>
Lorem ipsum nam reque delicatissimi id, expetenda gubergren prodesset cum ne, sed putent forensibus complectitur ex. Ei idque adversarium theophrastus vel, ad pri vocibus volutpat, quidam indoctum conclusionemque has cu. Lorem ipsum nam reque delicatissimi id, expetenda gubergren prodesset cum ne, sed putent forensibus complectitur ex. Ei idque adversarium theophrastus vel,
</p>
<!-- .borderMiddle --></div>
<div class="borderBottom"></div>
<!-- #survey.overlayHome --></div>
<p>
Lorem ipsum nam reque delicatissimi id, expetenda gubergren prodesset cum ne, sed putent forensibus complectitur ex. Ei idque adversarium theophrastus vel, ad pri vocibus volutpat, quidam indoctum conclusionemque has cu. Vix impedit ceteros atomorum in. At vim decore altera diceret, te semper aliquip intellegat nam, quo ei lorem tation urbanitas. Has iisque dissentiet ea, antiopam postulant facilisis eum ea.
</p><p>
Quem harum liberavisse ad sit, vocent tritani vis et. Qui primis accusata laboramus ex, mei ei brute dolore mediocrem, ius ad denique rationibus adipiscing. Est novum audiam ullamcorper eu. Vix causae similique constituam te, erant mucius saperet te ius. Te ceteros ponderum deterruisset ius, sit inimicus expetendis ei.
</p><p>
Has delicata adolescens comprehensam et, ei duo accommodare theophrastus, mei ea kasd utamur accommodare. Has id quot augue ocurreret, alienum legendos eu mea, esse errem cu vix. Ex pro mundi viderer consulatu, mei in movet partiendo assueverit. Wisi graece everti eum eu. Per clita gloriatur posidonium ea, vivendo salutatus rationibus cu sed. Deleniti luptatum dissentiet in per, quo veri voluptua singulis te.
</p><p>
Autem partem interpretaris usu ut, pri posse quaeque gloriatur no. Nusquam commune pericula ad qui, saepe iudicabit nec et, at facer commune dissentias eam. Veniam aliquando scripserit no has, no mei inani eirmod scaevola. Nec alia tollit meliore ex, no vim insolens vituperata adversarium, noster doctus molestiae vel et. Mea indoctum dissentiet ne, sint tamquam iuvaret per no. Ei puto fugit sadipscing eos, tollit legere vocent eos te, te has veniam commune referrentur.
</p><p>
Cu sea illud iracundia ullamcorper, vim kasd aliquyam voluptatum at, usu et fugit fabulas alienum. Tritani verterem voluptatum sit te, eu eam audiam eruditi. Has in putent eligendi. Aperiam takimata disputationi quo ne, ex qui quis sanctus imperdiet, mei ea magna dolorum ancillae. Ex sonet corrumpit ullamcorper pro, an ipsum consequuntur eum, his eu dolorem officiis. Id vitae alienum nam, hinc affert causae eu his.
</p><p>
Duo suas facete tractatos et, ei ius enim nonumy. Id mea modus graeco, no numquam platonem electram pro, cum partem sanctus fabulas at. An has iudico facilis accumsan, animal utroque aliquando no nam. Reque fabellas scribentur at sea.
</p><p>
Nam quidam regione vivendum id, has eu mazim affert fabellas. Inermis invenire liberavisse duo ne, id sea noster dolores. Eam te justo perpetua. Vis assum ullamcorper voluptatibus in. Fuisset oporteat eloquentiam ei per, nec natum singulis democritum id. Et eos stet ancillae intellegebat, mei et atqui mnesarchum efficiantur.
</p>
<!-- #pageWrapper --></div>
</body></html>
I tossed a copy up live on my server here:
http://www.cutcodedown.com/for_others/maya90/template.html
with the directory unlocked for ease of access to the bits and pieces:
http://www.cutcodedown.com/for_others/maya90
You’ll notice I combined the images down to a single file and did “CSS sprites” with them:
http://www.cutcodedown.com/for_others/maya90/images/borders.png
So two less handshakes and as a optimized .png we can get rid of the jpeg artifacting and have a fifth the file size. I also used tweakpng to strip the GAMA line so IE won’t have color matching issues, and added a background color to bordermiddle so that images off the layout will still look good.
Tested working in IE 5.01, 5,5, 6, 7 & 8, Opera 10.62, FF 2 & 3.53, and the latest flavors each of Safari and Chrome.
Some tips – margins are a pain in the ass, so use them sparingly. You are usually better off with padding wherever possible. Likewise, I avoid declaring width or height the same time as padding or border becuase it just screws things up too much on legacy browsers. It’s easy enough to avoid doing
I also suggest avoiding declaring width whenever possible – where you put ‘width’ and ‘margin:auto’ on the innerDIV (which you’ll notice I took an axe to since it seemed to be a useless element) when you simply could have padded either the paragraphs, or it’s parent, the borderMiddle. Likewise rather than have two separate ID for applying the border, you’ll see I just inherit off the parent ID.
Instead of margin bottom, I set padding on both sides of the P - this way the padding ‘stacks’ between them for the 1.2 desired EM (notice I switched it to dynamic fonts so lf/120dpi users like myself won’t ***** you out about it) while at the beginning and end of .borderMiddle it gets the same spacing.
Hope this helps. I’d also consider adding inner DIV to borderTop and borderBottom to make that a sliding doors effect, though the opacity could be problematic on that. That way you could make one image and use it for every concievable width your layout might want to use that effect instead of having to make a custom image for each and every occurance.
