I would blame it on faulty sitebuilding techniques… specifically attempting to use fixed height elements to build your background – which is automatically rubbish when it comes to making dynamic content. You’re trying to build with floats what should be done with wrapping and padding – you’re trying to use fixed heights when fixed widths one atop the other would be better suited to the job – you’re trying to use sibling elements when wrapping with padding would avoid most if not all your headaches.
… and of course fixing the width isn’t all that great an idea either – the combination of fixed height with fixed width with images sliced in that manner add up to what I’ve come to call “But I can do it in photoshop” nonsense.
The approach I’d use for that is my own “eight corners under one roof” or a similar take on said method. Since you don’t use transparencies that could be done much simpler.
Let’s see… first let’s drag it kicking and screaming out of 1998 and into a modern code spec… lose the outdated methodologies like clearing div…
<!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=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
MODALS - TEST
</title>
</head><body>
<div id="modal">
<a href="#" class="close">close</a>
<div class="borderTop"><div></div></div>
<div class="borderFirstSide"><div class="borderSecondSide">
<h2>HERE GOES MODAL TITLE</h2>
<p class="standout">
Nam sagittis scelerisque odio quis aliquam. Vivamus libero neque, dapibus non venenatis sit amet, suscipit id nisi. Duis egestas tempus erat eu fermentum.
</p>
<div class="subSection">
<h3>OPTION ONE</h3>
<p>
Donec euismod facilisis purus cursus scelerisque. Mauris in congue ante. Morbi varius, urna at tincidunt suscipit, mauris nisi egestas ipsum, faucibus congue tortor elit sed justo. Sed vulputate urna in diam fermentum eleifend. In hac habitasse platea dictumst. Maecenas nulla enim, scelerisque ut vehicula in, tempus a orci. In nec lorem vitae dui viverra lacinia at vel nisl. Donec at odio enim, sit amet luctus nulla. Vivamus non scelerisque metus. Nunc nisi quam, facilisis feugiat hendrerit nec, ultrices vitae augue. Nam neque lorem, fringilla id sagittis nec, varius id elit.
</p>
<!-- .subSection --></div>
<div class="subSection">
<h3>OPTION TWO</h3>
<p>
Donec euismod facilisis purus cursus scelerisque. Mauris in congue ante. Morbi varius, urna at tincidunt suscipit, mauris nisi egestas ipsum, faucibus congue tortor elit sed justo. Sed vulputate urna in diam fermentum eleifend. In hac habitasse platea dictumst. Maecenas nulla enim, scelerisque ut vehicula in, tempus a orci. In nec lorem vitae dui viverra lacinia at vel nisl. Donec at odio enim, sit amet luctus nulla. Vivamus non scelerisque metus. Nunc nisi quam, facilisis feugiat hendrerit nec, ultrices vitae augue. Nam neque lorem, fringilla id sagittis nec, varius id elit.
</p>
<!-- .subSection --></div>
<div class="subSection lastSubSection">
<h3>OPTION THREE</h3>
<p>
Donec euismod facilisis purus cursus scelerisque. Mauris in congue ante. Morbi varius, urna at tincidunt suscipit, mauris nisi egestas ipsum, faucibus congue tortor elit sed justo. Sed vulputate urna in diam fermentum eleifend. In hac habitasse platea dictumst. Maecenas nulla enim, scelerisque ut vehicula in, tempus a orci. In nec lorem vitae dui viverra lacinia at vel nisl. Donec at odio enim, sit amet luctus nulla. Vivamus non scelerisque metus. Nunc nisi quam, facilisis feugiat hendrerit nec, ultrices vitae augue. Nam neque lorem, fringilla id sagittis nec, varius id elit.
</p>
<!-- .subSection --></div>
<!-- .borderSecondSide, .borderFirstSide --></div></div>
<div class="borderBottom"><div></div></div>
<!-- #modal --></div>
</body></html>
I’m assuming the red and green lines in your existing version are outlines to show the layout.
Gimme a few minutes to stuff my face, then I’ll belt out the CSS I’d be using with that, as well as a new image.
