ending block elements on the same vertical line; fixing double outlines
In the following HTML/CSS code I'm having two issues:
- The
resultclass boxes have double sized outlines on the top, left, and bottom. - The
groupclass elements stretch off past the right side of the screen.
What can I change to make all the block elements end cleanly on the right-side of the screen开发者_Go百科 and give them all 1px outlines?
Thanks, PaulH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.result
{
border: 1px solid #FFFFFF;
outline: 1px solid #98BF21;
color: #FFFFFF;
background-color: #98BF21;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
width: 70px;
display: inline-block;
}
.group
{
border: 1px solid #98BF21;
background-color: #EEFFCC;
position:relative;
left: 72px;
}
.summary
{
outline: 1px solid #98BF21;
color: #333333;
background-color: #EEFFCC;
font-size: 15px;
font-family: "Lucida Console","courier new";
line-height: 25px;
}
.summary p
{
padding-left: 7px;
margin: 0px;
display: inline;
vertical-align: middle;
}
.detail
{
font-size: 13px;
font-family: "Lucida Console","courier new";
}
.detail p
{
padding-left: 7px;
margin: 5px 0px;
white-space: pre;
}
</style>
</head>
<body>
<div class="summary"><span class="result">esse ︾</span><p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p></div>
<div class="group">
<span class="detail">
<p>labore et dolore magna aliqua</p>
</span>
<div class="summary"><span class="result">esse »</span><p>Ut enim ad minim veniam, quis nostrud exercitation</p></div>
</div>
</body>
</html>
Edit: I'm using Firefox 4.0B12. For whatever reason IE8 doesn't show the double outlines.
Edit2: The desired output would be something like this. Single, non-overlapping outlines all ending at the same point on the right-side of the screen.
+------+-------------------------------------------------------------------+
| esse | consectetur adipisicing elit, sed do eiusmod tempor incididunt ut |
+------+-------------------------------------------------------------------+
| labore et dolore magna aliqua |
+------+------------------------------------------------------------+
| esse | Ut enim ad minim veniam, quis nostrud exercitation |
+------+------------------------------------------------------------+
change: left: 72px; to: margin-left: 72px;
Can you provide more details about the lines, or maybe an image of what you want it to look like.
加载中,请稍侯......
精彩评论