Problems with calendar

[ladans37]

I have had this really weird issue with my calendar for a while now. Whenever the months change, the border extends out beyond the calendar’s size. With some months it’s fine though. Is there anything I can do? I added this border cause I did not like the calendar’s original blending in with it, the white background shows up under the border. I didn’t want that.

Here’s the one I made:

<div class="pageborder"></div>

.pageborder {
   border:5px double #333;
   width:286.5px;
   height:336.35px;
   position:absolute;
   left:-5px;
   top:0px;
   z-index:0;
}

And here is the original that came with the calendar

table {
  clear:both;
  width:208px;
  height:100px;
  border:0px double #000;
  border-radius:0px;
  border-collapse:collapse;
  color:#000;
  font-family:Open Sans, Trebuchet MS, Verdana, Overpass, Segoe UI, Lucida Sans;
  background:transparent;
  position:absolute;
    top:0px;
    left:0px;
  cursor:text;
  z-index:0;
  
}

var html = '<table>';

It’s part of its JS as you can see. So what I am wondering is, how can I make the border auto adjust its height whenever the calendar changes its months, rather than me manually doing so every time?

[ladans37]

Update - just figured. background-clip:padding-box helped

[ladans37]

Helped in the CodePen calendar example, but not on my blog

Guessing because of the animated background. I don’t know…

[PaulOB]

@ladans37

.pageborder {
   border:5px double #333;
   width:286.5px;
   height:336.35px;

Why are you giving it a height if the table changes size depending on month displayed? Obviously the table or border will not match. (The table element treats height as min-height and will expand if content makes it taller anyway.)

And why are you still using half pixels when there is no such thing as half a pixel (apart from bleeding edge cases). I have never used a fraction of a pixel in the last 20 years.

@ladans37

Helped in the CodePen calendar example, but not on my blog

That codepen seems to work ok but doesn’t use the code you are talking about unless I misunderstand the reason for posting it

[ladans37]

@PaulOB so if I remove the height,it will fix the problem?

[PaulOB]

@ladans37

so if I remove the height,it will fix the problem?

Without seeing the full demo it’s hard to say but you don’t need a height to wrap a border around an element (assuming there are no margins on the element).

[ladans37]

@PaulOB ok. I removed the height.

I was using my own because I did not want the calendar’s white background bleeding through the border as it shows here

The code that has the white is this :

tbody {

   width:208px;
   height:100px;
   background:white;
   background-image:none;
   background-size:100%;
   background-repeat:no-repeat;
   z-index:9999;
   background-clip:padding-box;

}

Not the table. My mistake.

[PaulOB]

@ladans37

I was using my own

I’d need to see your full code but I suspect that you are still absolutely positioning things and trying to match them up with different absolutely placed things which as I have said many times now is futile

If you do it correctly from the start then things become much easier.

If the table is absolutely placed into position then you need to wrap the table in a div and absolutely place the div and not the table. Then you will need no height on the parent div.

[ladans37]

It’s already in the calendar’s wrapper

**<div class="calendar-wrapper">**
<div class="spiralbound2"></div>
<div class="spiralbound3"></div>
<div class="spiralbound4"></div>
<div class="spiralbound5"></div>
<div class="spiralbound6"></div>
<div class="spiralbound7"></div>

<div class="ringhole1"></div>
<div class="ringhole2"></div>
<div class="ringhole3"></div>
<div class="ringhole4"></div>
<div class="ringhole5"></div>
<div class="ringhole6"></div>
<div class="calendarholes"></div>
<div class="tableinnershadow"></div>

  <button id="btnPrev" type="button">&#10210;</button>
	  <button id="btnNext" type="button">&#10211;</button>
  <div id="divCal"></div>
**</div>**

.calendar-wrapper {
  width:208px;
  height:100px;
  margin:3em auto;
  margin-left:20px;
  padding:2em;
  border:0px solid black;
  border-radius:5px;
  background:none;
  position:absolute;
    top:-34px;
    left:20px;
  cursor:text;
  
}

[PaulOB]

@ladans37

The code that has the white is this :

Try adding the border to the tbody element and not the table.

[ladans37]

Ok, so still looks like this

And here is the tbody element with border :

tbody {
   border-left: 5px double #333;
   border-right: 5px double #333;
   border-bottom: 5px double #333;
   width:208px;
   background:white;
   background-image:none;
   background-size:100%;
   background-repeat:no-repeat;
   background-clip:padding-box;
   z-index:9999;

}

I even have background-clip:padding-box in there, but still no help.

[PaulOB]

Did you remove the border from the table itself?

A link to the table would help greatly

[ladans37]

Yep sure did. Ok, sorry bout that lol

table {
  clear:both;
  width:208px;
  border:none;
  border-radius:0px;
  border-collapse:collapse;
  color:#000;
  font-family:Open Sans, Trebuchet MS, Verdana, Overpass, Segoe UI, Lucida Sans;
  background:transparent;
  position:absolute;
    top:0px;
    left:0px;
  cursor:text;
  z-index:0;
  
}

[ladans37]

Maybe border-collapse has to do with it?

[ladans37]

@PaulOB I think I found a way out. Will share soon.

[ladans37]

Ok so I now have this :

tbody {
   border-left: 5px double #333;
   border-right: 5px double #333;
   border-bottom: 5px double #333;
   width:208px;
   background:none;
   background-image:url(https://i.ibb.co/qJH48G1/1080x1920-white-solid-color-background.jpg);
   background-size:289px 244px;
   background-repeat:no-repeat;
   background-clip:padding-box;
   background-position:0.5px 0px;
   z-index:9999;

}

But now I’m thinking, if it would affect the problem of the background extending past the bottom border

[PaulOB]

AsI said I’d need to see your code but that codepen can easily be changed to have a background and border.

[ladans37]

@PaulOB true, but when you have double borders, the background to the calendar shows through them. Big problem there.

[PaulOB]

@ladans37

but when you have double borders, the background t

If you show the full code or put up a demo I guarantee it can be fixed in seconds:)

It’s hard to hit a moving and invisible target although I usually get pretty close

[ladans37]

Okie hang on. Will do my best