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


in following html/css code i'm having 2 issues:

  1. the result class boxes have double sized outlines on top, left, , bottom.
  2. the group class elements stretch off past right side of screen.

what can change make block elements end cleanly on right-side of screen , give them 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 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. whatever reason ie8 doesn't show double outlines.

edit2: desired output this. single, non-overlapping outlines ending @ same point on right-side of screen.

+------+-------------------------------------------------------------------+ | esse | consectetur adipisicing elit, sed 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 provide more details lines, or maybe image of want like.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -