Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Invalid css style during zooming in calendar

Tags:

html

css

I have an HTML code with event calendar.
The calendar looks as follows: calendar

I have some problem, because when I'm trying zooming this calendar with Ctrl + scroll mouse, then with zooming there is a problem. For instance, with zooming 150% (and in other cases also) in Google Chrome and Mozilla Firefox, there is an additional column with little width. This can be seen in the figure here:

zooming calendar

body {
  background-color: #789;
  font-family: georgia, serif;
  font-size: 13px;
}

#content {
  display: block;
  width: 812px;
  margin: 40px auto 10px;
  padding: 10px;
  background-color: #FFF;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 2px solid black;
  -moz-box-shadow: 0 0 14px #123;
  -webkit-box-shadow: 0 0 14px #123;
  box-shadow: 0 0 14px #123;
}

h2,
p {
  margin: 0 auto 14px;
  text-align: center;
}

ul {
  display: block;
  clear: left;
  height: 82px;
  width: 812px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: #FFF;
  text-align: center;
  border: 1px solid black;
  border-top: 0;
  border-bottom: 2px solid black;
}

li {
  position: relative;
  float: left;
  margin: 0;
  padding: 20px 2px 2px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 110px;
  height: 60px;
  overflow: hidden;
  background-color: white;
}

li:hover {
  background-color: #FCB;
  z-index: 1;
  -moz-box-shadow: 0 0 10px #789;
  -webkit-box-shadow: 0 0 10px #789;
  box-shadow: 0 0 10px #789;
}

.weekdays {
  height: 20px;
  border-top: 2px solid black;
}

.weekdays li {
  height: 16px;
  padding: 2px 2px;
  background-color: #BCF;
}

.fill {
  background-color: #BCD;
}

.weekdays li:hover,
li.fill:hover {
  background-color: #BCD;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.weekdays li:hover,
.today {
  background-color: #BCF;
}

li strong {
  position: absolute;
  top: 2px;
  right: 2px;
}

li a {
  position: relative;
  display: block;
  border: 1px dotted black;
  margin: 2px;
  padding: 2px;
  font-size: 11px;
  background-color: #DEF;
  text-align: left;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  z-index: 1;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-style: italic;
}

li a:hover {
  background-color: #BCF;
  z-index: 2;
  -moz-box-shadow: 0 0 6px #789;
  -webkit-box-shadow: 0 0 6px #789;
  box-shadow: 0 0 6px #789;
}
<div id="content">
  <h2>January 2016</h2>
  <ul class="weekdays">
    <li>Sun
    </li>
    <li>Mon
    </li>
    <li>Tue
    </li>
    <li>Wed
    </li>
    <li>Thu
    </li>
    <li>Fri
    </li>
    <li>Sat
    </li>
  </ul>
  <ul>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="">
      <strong>01</strong>
      <a href="view.php?event_id=1">New Year's Day</a>
    </li>
    <li class="">
      <strong>02</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>03</strong>
    </li>
    <li class="">
      <strong>04</strong>
    </li>
    <li class="">
      <strong>05</strong>
    </li>
    <li class="">
      <strong>06</strong>
    </li>
    <li class="">
      <strong>07</strong>
    </li>
    <li class="">
      <strong>08</strong>
    </li>
    <li class="">
      <strong>09</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>10</strong>
    </li>
    <li class="">
      <strong>11</strong>
    </li>
    <li class="">
      <strong>12</strong>
    </li>
    <li class="">
      <strong>13</strong>
    </li>
    <li class="">
      <strong>14</strong>
    </li>
    <li class="">
      <strong>15</strong>
    </li>
    <li class="">
      <strong>16</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>17</strong>
    </li>
    <li class="">
      <strong>18</strong>
    </li>
    <li class="">
      <strong>19</strong>
    </li>
    <li class="">
      <strong>20</strong>
    </li>
    <li class="">
      <strong>21</strong>
    </li>
    <li class="">
      <strong>22</strong>
    </li>
    <li class="">
      <strong>23</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>24</strong>
    </li>
    <li class="">
      <strong>25</strong>
    </li>
    <li class="">
      <strong>26</strong>
    </li>
    <li class="">
      <strong>27</strong>
    </li>
    <li class="">
      <strong>28</strong>
    </li>
    <li class="">
      <strong>29</strong>
    </li>
    <li class="">
      <strong>30</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>31</strong>
      <a href="view.php?event_id=2">Last Day of January</a>
    </li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
  </ul>

How to avoid this problem?

like image 789
Krzysztof Michalski Avatar asked Sep 21 '16 13:09

Krzysztof Michalski

People also ask

How do I stop a CSS layout from distorting when zooming out?

To fix the problem with zooming in, try adding the min-width attribute to your outer countainer ( #container or #navbar ?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px).

What is * Zoom in CSS?

The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn't recommended for production sites. .zoom { zoom: 150%; }

1 Answers

Could you check this...

body {
	background-color: #789;
	font-family: georgia, serif;
	font-size: 13px;
}
#content {
	display: block;
	width: 812px;
	margin: 40px auto 10px;
	padding: 10px;
	background-color: #FFF;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border:2px solid black;
	-moz-box-shadow: 0 0 14px #123;
	-webkit-box-shadow: 0 0 14px #123;
	box-shadow: 0 0 14px #123;
}
h2, p {
	margin: 0 auto 14px;
	text-align: center;
}
ul {
	display: block;
	clear: left;
	height: 80px;
	width: 812px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background-color: #FFF;
	text-align: center;
	border: 1px solid black;
	border-top: 0;
	border-bottom: 2px solid black;
}
li {
	position: relative;
	float: left;
	margin: 0;
	padding: 20px 0px 0px;
	width: 14.28571428571429%;
	height: 60px;
	overflow: hidden;
	background-color: white;
}
li:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width: 1px;
	background-color:#000;
}
li:after {
	content:'';
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width: 1px;
	background-color:#000;
}
li:hover {
	background-color: #FCB;
	z-index: 1;
	-moz-box-shadow: 0 0 10px #789;
	-webkit-box-shadow: 0 0 10px #789;
	box-shadow: 0 0 10px #789;
}
.weekdays {
	height: 20px;
	border-top: 2px solid black;
}
.weekdays li {
	height: 20px;
	padding: 0;
	background-color: #BCF;
	line-height:20px;
}
.fill {
	background-color: #BCD;
}
.weekdays li:hover, li.fill:hover {
	background-color: #BCD;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.weekdays li:hover, .today {
	background-color: #BCF;
}
li strong {
	position: absolute;
	top: 2px;
	right: 2px;
}
li a {
	position: relative;
	display: block;
	border: 1px dotted black;
	margin: 2px;
	padding: 2px;
	font-size: 11px;
	background-color: #DEF;
	text-align: left;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	z-index: 1;
	text-decoration: none;
	color: black;
	font-weight: bold;
	font-style: italic;
}
li a:hover {
	background-color: #BCF;
	z-index: 2;
	-moz-box-shadow: 0 0 6px #789;
	-webkit-box-shadow: 0 0 6px #789;
	box-shadow: 0 0 6px #789;
}
<ul class="weekdays">
  <li>Sun </li>
  <li>Mon </li>
  <li>Tue </li>
  <li>Wed </li>
  <li>Thu </li>
  <li>Fri </li>
  <li>Sat </li>
</ul>
<ul>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class=""> <strong>01</strong> <a href="view.php?event_id=1">New Year's Day</a> </li>
  <li class=""> <strong>02</strong> </li>
</ul>
<ul>
  <li class=""> <strong>03</strong> </li>
  <li class=""> <strong>04</strong> </li>
  <li class=""> <strong>05</strong> </li>
  <li class=""> <strong>06</strong> </li>
  <li class=""> <strong>07</strong> </li>
  <li class=""> <strong>08</strong> </li>
  <li class=""> <strong>09</strong> </li>
</ul>
<ul>
  <li class=""> <strong>10</strong> </li>
  <li class=""> <strong>11</strong> </li>
  <li class=""> <strong>12</strong> </li>
  <li class=""> <strong>13</strong> </li>
  <li class=""> <strong>14</strong> </li>
  <li class=""> <strong>15</strong> </li>
  <li class=""> <strong>16</strong> </li>
</ul>
<ul>
  <li class=""> <strong>17</strong> </li>
  <li class=""> <strong>18</strong> </li>
  <li class=""> <strong>19</strong> </li>
  <li class=""> <strong>20</strong> </li>
  <li class=""> <strong>21</strong> </li>
  <li class=""> <strong>22</strong> </li>
  <li class=""> <strong>23</strong> </li>
</ul>
<ul>
  <li class=""> <strong>24</strong> </li>
  <li class=""> <strong>25</strong> </li>
  <li class=""> <strong>26</strong> </li>
  <li class=""> <strong>27</strong> </li>
  <li class=""> <strong>28</strong> </li>
  <li class=""> <strong>29</strong> </li>
  <li class=""> <strong>30</strong> </li>
</ul>
<ul>
  <li class=""> <strong>31</strong> <a href="view.php?event_id=2">Last Day of January</a> </li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
</ul>
like image 183
Nehemiah Avatar answered Sep 20 '22 05:09

Nehemiah
Sign in to Comment

Related questions

jQuery code affecting my HTML image links?
Position absolute not working inside position fixed
Automatically locate a user's geographical location in PHP
Using querySelector exclude elements whose id's include a specific string
How to make a button with an obtuse angle?
Load JSON file using AngularJS
disable a menu item in Angular uib-dropdown
How to include padding as part of a div that can be clicked to trigger event
Mask div using CSS
Flexbox - fluid column with "no wrap" text
Making an Image Hyperlink in R Shiny header
How to prevent redirection that occurs when pressing enter key in an input field?
how can we manage multiple conditions in a simple condition using ng-show and ng-hide
Mac VoiceOver reads list items twice
Is there anyway to freeze or lock the DOM of a page?
Minify JS embedded into .html file
Changing the color of checkbox if checked [duplicate]
How to resize the div when the span inside div is wrapped?
Change css style depend on real day and night time
Confirm Before Form Submission

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!