From: semicodin on
Hi folks, this is nôôb attempt at CSS so I'm hoping the fix is a
simple one. You can view the result at
http://sites.google.com/site/semicodin/ohTHAT/bracket/semi99999.html
but I can summarize the 3 issues I'm having:

1.__________
My CONTENT container is overshooting its border, and that in turn is
affecting the appearing of the border itself. The right edge of LOGO
is probably where the inside edge of the border should be, although
I'm guessing (?). The point is, the right side of CONTENT needs to
both mirror and line up just as on the left side, with the solid
border of LOGO sitting _on top of_ the dashed border of CONTENT.

2.__________
I'm uncertain how to get some vertical space between the LOGO box and
the first line of LOREM IPSUM, which is currently shoved directly
beneath it.

3.__________
In Explorer 6 the border is just completely f'd up: entire portions of
it just drop off. No idea what's going on here; it doesn't happen in
Firefox tsk.

Thanks for any help; the code appears below (4.01 Transitional).

semicodin
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

<style type="text/css">

body {margin: 0; background-image: url(http://sites.google.com/site/
semicodin/ohTHAT/bracket/TILE.jpg);
background-color: #CDCDC1;}

body,td,th {font-family: Arial; font-size: medium; color: #000000;}
h1,h2,h3,h4,h5,h6 {font-family: Arial;}
a:link {color: #009900; text-decoration: none;}
a:visited {color: #009900; text-decoration: none; color: #000000;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

#CONTENT {float: center; margin-top: 6em; width: 80%; margin-left:
10%; margin-right: 10%;}
#CONTENT div img {width: 100%;}

#LOGO {float: left; width: 100%;}
#LOGO div img {width: 80%;}


</style>
</head>

<body>

<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="CONTENT">
<div style="border: 30px solid #CDCDC1;">

<div id="LOGO">
<div style="background-color: #FFFFFF; padding: 2%; border: 3px solid
#000000; text-align: left;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket"
target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/
GRAPHIC1.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></
a>
</div>
</div>


<div style="width: 86%; background-color: #F3F1E5; padding: 7%;
border: 3px dashed #000000; text-align: left;">
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
<br>
<br>
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket"
target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/
GRAPHIC2.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></
a>
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
</div>
</div>
</div>
<!-- Closing CONTENT -->