Home/ Questions/Q 4044732
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T13:19:41+00:00

In the following HTML/CSS code I’m having two issues: The result class boxes have

  • 0

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

  1. The result class boxes have double sized outlines on the top, left, and bottom.
  2. 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 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         |
       +------+------------------------------------------------------------+
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0