[CSS] Box shadow w nowej kolumnie

MaxGaming · 23 Maja 2018

Siemanko,

mam taki problem, że dolna część box shadow przechodzi mi do nowej kolumny. Co ciekawe błąd występuje w Google Chrome a w Mozilla FIrefox jest wporządku. Niebieską strzałką oznaczyłem co jest nie tak.

Ma ktoś pojęcie jak ten problem rozwiązać?

Tutaj kod CSS tej strony(problem występuje w #About_us):

html{
				margin: 0;
				padding: 0;
			}
			body{
				margin: 0;
				padding: 0;
				height: 400vh;

				font-family: 'Raleway', sans-serif;
				font-size: 2.2vh;
				width: 100%;			

				/* background-image: url('big_picture01.jpg');
				background-size: 100vw 100vh; 
				background-repeat: no-repeat; */

				background-color: rgb(218, 218, 218);
			}

			#Start
			{
				width: 100%;
				min-height: Calc(100vh - 20vh); /* 100vh - top_panel */
				background-image: url("big_picture01.jpg");
				background-size: 100% 100vh;
				background-repeat: no-repeat;
				background-attachment: fixed;
			}
				#Start > #top_panel{	
					position: fixed;							
					top: 0px;
					width: 100vw;
					background-color: rgba(0, 0, 0, 0.5);
				}					
					#Start > #top_panel .top_panel_fullsize{
						height: 20vh;						
					}
					#Start > #top_panel .top_panel_compact{
						height: 10vh;
					}
					#Start > .top_panel_fullsize > .middle_container{				
						transition-timing-function: linear;
						transition-duration: 200ms; 
						transition-property: all;

						line-height: 20vh;
					}
					#Start > .top_panel_compact > .middle_container{
						transition-timing-function: linear;
						transition-duration: 200ms; 
						transition-property: all;
					
						line-height: 10vh;
					}
						#Start > #top_panel > .middle_container > .logo{
							display: block;
							float: left;

							width: 20vw; /* 30vw - paddings */

							padding-left: 5vw;
							padding-right: 5vw;
							
							text-align: center;

							font-size: 2vmax;
							text-transform: uppercase;
							color: white;
						}
						#Start > #top_panel > .middle_container > nav > .menu{
							display: inline-block;
							margin: 0;
							padding: 0;

							width: 70vw; /* 70vw - paddings */
							
							text-align: center;

							font-size: 2vmax;
							text-transform: uppercase;
							color: white;
						}
							#Start > .top_panel_fullsize > .middle_container >  nav > .menu > .element{								
								display: inline-block;
								white-space: nowrap;
								
								padding-top: Calc(10vh - 0.75vmax); /* 1/2 middle_container - 1/2 line_height - 3x borde_bottom */
								padding-bottom: Calc(10vh - 0.75vmax); /* 1/2 middle_container - 1/2 line_height - 3x borde_bottom */	
								padding-left: 1vw;
								padding-right: 1vw;						

								border-style: none;
								
								text-align: center;

								font-size: 1.5vmax;
								line-height: 1.5vmax;
								text-transform: uppercase;
								color: white;
							}		
							#Start > .top_panel_compact > .middle_container >  nav > .menu > .element{								
								display: inline;
								white-space: nowrap;
								
								padding-top: Calc(5vh - 0.75vmax); /* 1/2 middle_container - 1/2 line_height - 3x borde_bottom */
								padding-bottom: Calc(5vh - 0.75vmax); /* 1/2 middle_container - 1/2 line_height - 3x borde_bottom */	
								padding-left: 1vw;
								padding-right: 1vw;						

								border-style: none;
								
								text-align: center;

								font-size: 1.5vmax;
								line-height: 1.5vmax;
								text-transform: uppercase;
								color: white;
							}						
								#Start > .top_panel_fullsize > .middle_container >  nav > .menu > .element:hover{
									padding-top: Calc(10vh - 0.75vmax - 1.0vh); /* 1/2 middle_container - 1/2 line_height - 2x borde_bottom */
									padding-bottom: Calc(10vh - 0.75vmax - 1.0vh); /* 1/2 middle_container - 1/2 line_height - 2x borde_bottom */							
									border-bottom: 0.5vh solid rgb(255, 255, 255);
								}
								#Start > .top_panel_compact > .middle_container >  nav > .menu > .element:hover{
									padding-top: Calc(5vh - 0.75vmax - 1.0vh); /* 1/2 middle_container - 1/2 line_height - 2x borde_bottom */
									padding-bottom: Calc(5vh - 0.75vmax - 1.0vh); /* 1/2 middle_container - 1/2 line_height - 2x borde_bottom */

									border-bottom: 0.5vh solid rgb(255, 255, 255);
								}
								#Start > #top_panel > .middle_container >  nav > .menu > .element > a{									
									color: white;
									text-decoration: none;
								}
				.top_panel_padding{
					display: block;
					width: 100%;
					height: 20vh;
				}

				#first_page_content{
					width: 100%;
					height: Calc(100vh - 20vh);
				}
					#first_page_content > .middlebox{
						display: block;
						color: white;
						height: 18vh; /* header height + subheader height */
						padding-top: Calc((100vh - 18vh - 20vh) / 2 - 10vh); /* 100vh - suma height elementów wenątrz - 1/2 top_panel*/
						padding-bottom: Calc((100vh - 18vh - 20vh) / 2 + 10vh); /* 100vh - suma height elementów wenątrz + 1/2 top_panel */
						text-align: center;
					}
						#first_page_content > .middlebox > .header{
							display: block;
							text-shadow: 0 0 5px #000; /* horizontal-offset vertical-offset 'blur' colour */
							font-weight: normal;
							text-transform: uppercase;
							padding: 0;
							margin: 0;
							font-size: 12vh;
							line-height: 12vh;							
						}
						#first_page_content > .middlebox > .subheader{
							display: block;
							text-shadow: 0 0 5px #000; /* horizontal-offset vertical-offset 'blur' colour */
							font-weight: normal;
							text-transform: uppercase;
							padding: 0;
							margin: 0;
							font-size: 6vh;
							line-height: 6vh;						
						}
						#first_page_content > .middlebox > .box{
							display: block;
							margin-top: 3vh;
							height: 5vh;				
						}
							#first_page_content > .middlebox > .box > .button{
								display: inline-block;
								color: #fff;
								font-size: 1.4vw;
								height: Calc(5vh - 2vh - 0.2vmin); /* height - button paddings - 2x border */								

								padding-top: 1vh;
								padding-bottom: 1vh;
								padding-left: 1vw;
								padding-right: 1vw;

								margin-left: 1vw;
								margin-right: 1vw;

								line-height: 3vh;								
								text-transform: uppercase;

								border-radius: 0.6vmin;
								border: 0.1vmin solid rgba(255, 255, 255, 0.7);
								background-color: rgba(255, 255, 255, 0.1);
							}
								#first_page_content > .middlebox > .box > #button_more.button{

								}
								#first_page_content > .middlebox > .box > #button_buy.button{

								}
			#About_us{
				width: Calc(100% - 4vw); /* 100% - paddingi */
				min-height: Calc(100vh - 9.5vh - 6vh); /* 100vh - menu height - padding przyciskow po hover - paddingi*/
				background-color: #fefefe; /*#464646;*/

				display: block;
				color: black;

				padding-left: 2vw;
				padding-right: 2vw;
				padding-top: 3vh;
				padding-bottom: 3vh;
			}
				#About_us > .header{
					display: block;
					font-weight: normal;
					text-transform: uppercase;
					padding: 0;					
					margin: 0;					
					font-size: 5vh;
					text-align: center;
					text-align: justify;
				}
				#About_us .block{
					display: block;

					margin-top: 3vh;
					border: 0.1vmin solid #cbcbcb;
					padding: 10vmin;

					box-shadow: 1vw 0.7vh 1vh 0 rgba(0,0,0,0.2);

					-webkit-column-break-inside: avoid;
          			page-break-inside: avoid;
              		break-inside: avoid;
				}
				#About_us .multi-block{
					column-count: 2;
					-webkit-column-count: 2;
 					-moz-column-count: 2;
				}
					#About_us .multi-block .block{
						margin-top: 0;
					}								
				#About_us .block > .subheader{
					display: block;
					font-weight: normal;
					text-transform: uppercase;
					padding: 0;
					margin: 0;				
					text-align: justify;		
					font-size: 3vh;
				}					
				#About_us .block > .paragraph{
					display: block;
					font-weight: normal;
					text-align: justify;
					padding: 0;
					margin: 0;
					margin-top: 2vh;
					font-size: 2.2vh;
				}
				#About_us .block > .subparagraph{
					display: block;
					font-style: italic;
					font-weight: normal;
					text-align: left;
					padding: 0;
					margin: 0;
					margin-left: 1vw;
					margin-right: 1vw;
					margin-top: 0.6vh;
					font-size: 2vh;
					text-align: justify;
				}

Ale z tego co jest mi wiadomo ten błąd jest znany bo coś tam wyszukiwał mi google o tym, ale albo nie było rozwiązania albo nie rozumiałem go :/

Wygląda mi to na błąd firefox ale widziałem o tym posty z 2016 więc wątpię że jeśli nawet to naprawią to szybko...

@e: a IE to wgl przenosi kawałek tabeli XD

@e2: Co ciekawe między te bloki jak wstawiłem span z X to jest to samo mimo że pomiędzy jest X(w załączniku obrazek)... Wygląda mi to na bug chrome albo czegoś nie kumam...

gnysek · 24 Maja 2018

Wrzuć kod na JS Fiddle, będzie łatwiej testować. https://jsfiddle.net/

Zaloguj się

[CSS] Box shadow w nowej kolumnie

Rekomendowane odpowiedzi

MaxGaming

Odnośnik do komentarza

Udostępnij na innych stronach

gnysek

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Przeglądaj

GMCLAN.ORG

Cała aktywność

Ranking

Discord