Skocz do zawartości

[CSS] Box shadow w nowej kolumnie


Rekomendowane odpowiedzi

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.

firefox_vs_chrome_box_shadow.png

 

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...

cccc.png

Odnośnik do komentarza
Udostępnij na innych stronach

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

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...