Jesus Vasquez
Jesus Vasquez

Reputation: 47

Troubleshooting CSS border on Divs

I am currently building a grid layout web page as you can see here in this livelink. However I can not work out why the border is not showing up on my 'special offer' square and on my 'portfolio' square. I have tried everything! It is obviously a CSS issue but it works on every other square apart from these two. Could somebody please take a look at the livelink above and view the source code to try to work out why the border isn't working.

HTML OF ONE OF THE DIVS EFFECTED

<div class="trigger">
<div tabindex="0" class="testimony maincontent static"><div class="slider2">
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide1.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide2.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide3.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide4.png" height="200" width="200" /></div>
</div></div>
</div>

HTML OF OTHER DIV EFFECTED

<div class="trigger large">
        <div tabindex="0" class="testimonywide maincontent staticlarge"><div class="slider">
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide1.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide2.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide3.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide4.png" height="200" width="400" /></div>
</div></div>
    </div>
</div>

Upvotes: 0

Views: 101

Answers (4)

Nitesh Phadatare
Nitesh Phadatare

Reputation: 325

Problem is width and height of that div is more because of which its getting hidden. Just look after them, you will be able to see the border.

To be more specific, reduce the height of .sssprev, .sssnext and .staticlarge elements. This will solve your problem. I have tested it on the link provided by you.

I tried with 150px of width and I was able to see the border.

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272156

  • .trigger.large has a width of 400px.
  • .staticlarge (which is a child of the above) has a width of 400px plus 1px border. Its outer width is thus 402px.
  • .trigger has overflow: hidden so it clips the overflowing 2px.

Solution is to remove hard-coded width of 400px on the child. If you must specify a width then specify one of these:

  • 398px
  • width: 100% + box-sizing: border-box
  • width: calc(100% - 2px)

Upvotes: 0

deepak
deepak

Reputation: 133

If you want to order border to the html just write

<div class="just_text" style="border-style: solid"><div class="caption-box">Special Offer</div><img src="slide4.png" height="200" width="400" /></div>
</div></div>

The style attribute gives border

style="border-style: solid"

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4599

you need to remove the overflow: hidden; from .trigger div and need to adjust the div accordingly .

Hope this will solve your issue.

Upvotes: 0

Related Questions