ending block elements on the same vertical line; fixing double outlines_问答_开发者

ending block elements on the same vertical line; fixing double outlines

开发者 https://www.devze.com 2023-02-15 03:07 出处：网络

In the following HTML/CSS code I\'m having two issues: The result class boxes have double sized outlines on the top, left, and bottom.

相关专题：css

In the following HTML/CSS code I'm having two issues:

The result class boxes have double sized outlines on the top, left, and bottom.
The group class 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 &#xFE3E</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.