'issue with border on top of divs inside of another div all displaying at very top
On my asp.net mvc application there is a view that displays a report with a lot of graphics and text. On one part of the view I have a div which contains some inner divs. I set the top border to 1px solid #999 when it displays on the page the very top div has a 3px border and none of the other dives show the border.
Here is what the code looks like on the view
<div class="page" style="border: 1px solid #50c7f4; padding:5px 35px">
@if (ViewBag.ScoreSheet)
{
ViewData["ReportSectionName"] = "Scoresheet";
@Html.Partial("NewHeader");
<section class="Scoresheet">
@if (ViewBag.MentalAptitudes)
{
<div class="ss-area">
<div class="ss-left">
<div class="ss-section">Mental Aptitudes</div>
<div class="ss-icon"><img src="~/Images/ReportGraphics/Icons/mental_aptitude_icon.png" alt="" /></div>
<div class="decription"><p>Lorem ipsum dolor </p></div>
</div>
<div class="ss-right">
@for (int i = 1; i < 8; i++)
{
if (DimensionUsed[i])
{
z++;
<div class="row ss-row">
<div class="names"><img src="~/Images/ReportGraphics/Scoresheet/Text/@DimensionNameImage[i]" alt="" /></div>
<div class="ss-scores">
@for (int j = 1; j < 10; j++)
{
int hi = Convert.ToInt16(HiPattern[i].ToString());
int lo = Convert.ToInt16(LoPattern[i].ToString());
int st = Convert.ToInt16(Stanine[i]);
if (j < lo | j > hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_c@(j.ToString()).png" alt="" />
}
}
if (j >= lo && j <= hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/blue_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/green_@(j.ToString()).png" alt="" />
}
}
}
</div>
</div>
<div class="row ss-desc">
<div class="names"><img src="~/Images/ReportGraphics/spacer.gif" alt="" /></div>
<div class="ss-scores">
<div class="low-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionLowImage[i]" alt="" />
</div>
<div class="high-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionHighImage[i]" alt="" />
</div>
</div>
</div>
}
}
</div>
</div>
}
@if (ViewBag.Personality)
{
<div class="ss-area">
<div class="ss-left">
<div class="ss-section">Personality Dimensions</div>
<div class="ss-icon"><img src="~/Images/ReportGraphics/Icons/personality_icon.png" alt="" /></div>
<div class="decription"><p>Lorem ipsum dolor</p></div>
</div>
<div class="ss-right">
@for (int i = 8; i < 18; i++)
{
if (DimensionUsed[i])
{
<div class="row ss-row">
<div class="names"><img src="~/Images/ReportGraphics/Scoresheet/Text/@DimensionNameImage[i]" alt="" /></div>
<div class="ss-scores">
@for (int j = 1; j < 10; j++)
{
int hi = Convert.ToInt16(HiPattern[i].ToString());
int lo = Convert.ToInt16(LoPattern[i].ToString());
int st = Convert.ToInt16(Stanine[i]);
if (j < lo | j > hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_c@(j.ToString()).png" alt="" />
}
}
if (j >= lo && j <= hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/blue_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/green_@(j.ToString()).png" alt="" />
}
}
}
</div>
</div>
<div class="row ss-desc">
<div class="names"><img src="~/Images/ReportGraphics/spacer.gif" alt="" /></div>
<div class="ss-scores">
<div class="low-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionLowImage[i]" alt="" />
</div>
<div class="high-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionHighImage[i]" alt="" />
</div>
</div>
</div>
}
}
</div>
</div>
}
@if (ViewBag.Validity)
{
<div class="ss-area">
<div class="ss-left">
<div class="ss-section">Validity Scales</div>
<div class="ss-icon"><img src="~/Images/ReportGraphics/Icons/validity_icon.png" alt="" /></div>
<div class="decription"><p>Lorem ipsum dolor </p></div>
</div>
<div class="ss-right">
@for (int i = 18; i < 20; i++)
{
if (DimensionUsed[i])
{
<div class="row ss-row">
<div class="names"><img src="~/Images/ReportGraphics/Scoresheet/Text/@DimensionNameImage[i]" alt="" /></div>
<div class="ss-scores">
@for (int j = 1; j < 10; j++)
{
int hi = Convert.ToInt16(HiPattern[i].ToString());
int lo = Convert.ToInt16(LoPattern[i].ToString());
int st = Convert.ToInt16(Stanine[i]);
if (j < lo | j > hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_c@(j.ToString()).png" alt="" />
}
}
if (j >= lo && j <= hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/blue_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/green_@(j.ToString()).png" alt="" />
}
}
}
</div>
</div>
<div class="row ss-desc">
<div class="names"><img src="~/Images/ReportGraphics/spacer.gif" alt="" /></div>
<div class="ss-scores">
<div class="low-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionLowImage[i]" alt="" />
</div>
<div class="high-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionHighImage[i]" alt="" />
</div>
</div>
</div>
}
}
</div>
</div>
}
</section>
}
@Html.Raw(copy)
</div>
the CSS for that code
.page {
width: 963px;
margin: 0 auto;
page-break-before: always;
}
.page:after {
clear: both;
}
img{
padding:0px;
margin:0px;
}
.Scoresheet {
/*margin-top: -40px;*/
width: 100%;
/* border: 1px solid gold;*/
}
.ss-area{
width: 100%;
display: block;
border-top: 1px solid #999;
/* border: 1px solid black;*/
}
.ss-left {
float: left;
width: 183px;
/* border: 1px solid green;*/
}
.ss-right {
float: left;
width: 770px;
/* border: 1px solid red;*/
}
.ss-section {
width: 100%;
padding-top:5px;
padding-left: 10px;
padding-right: 24px;
padding-bottom: 10px;
border-left: 1px solid #666;
color: #075BA8;
font-weight: 500;
font-size: 20px;
line-height: 24px;
}
.ss-icon {
width: 75px;
margin-right: auto;
margin-left: auto;
padding:10px;
/* border: 1px solid blue;*/
}
.ss-scores {
margin-bottom: -2px;
float: left;
width: 638px;
/* border: 1px solid navy;*/
}
.ss-desc{
position:relative;
top: -10px;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.names {
float: left;
width: 140px;
/* border: 1px solid pink;*/
}
.low-score-text {
float: left;
}
.high-score-text{
float:right;
}
.description {
border-radius: 25px;
border: 1px solid #666;
width: 200px;
}
.Clr{
clear:both;
}
Why does the part that says Mental Aptitudes have 3 different top borders instead of having one border at the top?
If while the code is inside the if statement, that looks for the viewbag values, I add a counter. Then increment each time DimensionUsed[i] = true, I can then go outside the for loop for that portion (MentalAptitudes, Personality, or Validity) and outside of the closing div tag add a for loop like so
@if (ViewBag.MentalAptitudes)
{
<div class="ss-area">
<div class="ss-left">
<div class="ss-section">Mental Aptitudes</div>
<div class="ss-icon"><img src="~/Images/ReportGraphics/Icons/mental_aptitude_icon.png" alt="" /></div>
<div class="decription"><p> </p><p> </p></div>
</div>
<div class="ss-right">
@for (int i = 1; i < 8; i++)
{
if (DimensionUsed[i])
{
z++;
<div class="row ss-row">
<div class="names"><img src="~/Images/ReportGraphics/Scoresheet/Text/@DimensionNameImage[i]" alt="" title="hola" /></div>
<div class="ss-scores">
@for (int j = 1; j < 10; j++)
{
int hi = Convert.ToInt16(HiPattern[i].ToString());
int lo = Convert.ToInt16(LoPattern[i].ToString());
int st = Convert.ToInt16(Stanine[i]);
if (j < lo | j > hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/gray_c@(j.ToString()).png" alt="" />
}
}
if (j >= lo && j <= hi)
{
if (j != st)
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/blue_@(j.ToString()).png" alt="" />
}
else
{
<img src="~/Images/ReportGraphics/Scoresheet/Scores/green_@(j.ToString()).png" alt="" />
}
}
}
</div>
</div>
<div class="row ss-desc">
<div class="names"><img src="~/Images/ReportGraphics/spacer.gif" alt="" /></div>
<div class="ss-scores">
<div class="low-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionLowImage[i]" alt="" />
</div>
<div class="high-score-text">
<img src="~/Images/ReportGraphics/Scoresheet/Desc/@DimensionHighImage[i]" alt="" />
</div>
</div>
</div>
}
}
</div>
@for (int i = 0; i < z; i++)
{<p style="padding:7px 0px;"> </p>}
</div>
}
that will move the top border down for the next section but that is not a perfect cheat as it leaves a gap.
Without that, It is almost like it is seeing it all as a single large div instead of 3 different divs. Any help will be appreciated,
this is what it looks like
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|