css3

How to make repeating-linear-gradient for a table continue seamlessly over multiple cells?

由 落花浮王杯 提交于 2020-01-03 08:42:33
问题 I'm having trouble with repeating-linear-gradient with tables. Basically, I can't make it look nice with tables, especially on Chrome. Even though I apply said rule to a tr element, it looks like td elements inherit it and instead of having a continuous stripes, I get 'jagged' ones (=stripes do not continue over cell borders). .striped { background: repeating-linear-gradient( 45deg, #FFFFFF, #FFFFFF 10px, #DDDDDD 10px, #DDDDDD 20px )} Here's a Codepen illustrating the issue: http://codepen.io

Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console

由 左心房为你撑大大i 提交于 2020-01-03 08:35:24
问题 At first this seems to be duplicate question answered here but there is more that need to be figured out. How can I resolve below given [Violation] warning in google chrome console? [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. Here is the code snippet that works but with the above mentioned [Violation] warning. $.fn.isolatedScroll = function() { this.on('mousewheel

Chrome/WebKit creating a solid bar when using background, border-radius, and top/bottom borders

由 你离开我真会死。 提交于 2020-01-03 08:07:10
问题 Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here's the evidence and code to reproduce: http://jsfiddle.net/6ADtd/4/ <div></div>​ div { background:blue; border-top:10px solid red; border-bottom:10px solid red; border-radius:20px 20px 0 0; height:100px; /* border-right:1px solid transparent; */ } The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you

Display tooltip when container overflow is hidden

由 故事扮演 提交于 2020-01-03 07:42:51
问题 Is there a way, preferably without js, to position and display a tooltip above a container, when the container must have overflow:hidden , without the tooltip be affected and clipped by the container? Here is an example to illustrate this problem: .container { overflow: hidden; position: relative; margin: auto; width: 50%; border: 3px solid green; padding: 10px; height: 70px; background: lightblue; text-align: center; } a.tooltips { position: relative; display: inline; } a.tooltips span {

setting the top margin of the h1 element in the header does not work as expected

由 别来无恙 提交于 2020-01-03 07:31:08
问题 I have made use of the html5 header tag and an h1 tag within it. After setting up the top margin property of the h1 element in my header to 0px, i manage to remove the top margin of the header, but i want the h1 element inside my header to have a top margin of around 15px. Now when i try setting the top margin of the h1 element, it also creates a top margin for the header which i don't want. Can someone help me out with this...? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

Can I use a media query in internal CSS, and will it avoid loading the background images I define?

由 余生长醉 提交于 2020-01-03 06:48:13
问题 I'm working on a responsive site where each page will have a large hero image, defined in the CMS. I'd like to avoid having to download that background image on mobiles. The only way I can think to do it is to have some inline CSS in the head of the page like so: <style type="text/css"> @media only screen and (min-width: 680px) { .hero-image { background-image: url(../images/image.jpg); } } </style> First, can I use media queries in inline CSS? Second, will this avoid downloading the image on

CSS how to use pseudo-class :not with :nth-child

由 ⅰ亾dé卋堺 提交于 2020-01-03 06:44:09
问题 Is is possible to use :not() with nth-child ? I tried something like this without any luck : td:not(:nth-child(4n)){ text-align:center; } However this seems to work : td:not(:first-child){ text-align:center; } What I am trying is to center align all table columns except 2nd and 4th column. The columns are dynamically generated to add a custom class to these column . 回答1: :not(:nth-child(4n)) will get you anything that isn't :nth-child(4n) , i.e. anything that isn't the 4th, 8th and so on. It

Change y-axis (horizontal) scrollbar styles

由 微笑、不失礼 提交于 2020-01-03 06:15:07
问题 I want to change the horizontal scrollbar styles of a div. I successfully changed the x-axis (vertical) scrollbar style but when I added y-axis scroll, it is taking same styles as I added for the y-axis. I want to style both scrollbars differently. Is there any possible way to make this happen? Current CSS for (x-axis) vertical scrollbar: .list-group { overflow-y: scroll; max-height: 335px; border: 1px solid #bdbdbd; padding: 10px; } .list-group::-webkit-scrollbar { width:35px; } .list-group:

Sencha touch Textfield hightlight behavior in Samsung Galaxy Tab

由 别等时光非礼了梦想. 提交于 2020-01-03 05:57:18
问题 While editing any textfield/textareafield in Sencha touch, the text field gets highlighted or focussed. This behavior is causing too many issues. The loading indicator and Alert appears behind the highlighted textfield as the text field remains focussed. This behavior is seen only in Samsung Galaxy Tab. The app behaves fine on iPad. Please let me know if it is possible to remove this highlighting effect. 回答1: Solution CSS: input[type="text"], input[type="password"]{ -webkit-user-modify: read

Android Browser Rendering border radius incorrectly with larger border

由 不羁岁月 提交于 2020-01-03 05:30:13
问题 I'm running into a problem on the Android Webkit browser. This is happening on Android 4.0.3 and earlier. The design calls for a 15 pixel top border within a div and then rounded corners. I am using border-radius to accomplish this and this works fine in all modern browsers but on Android it looks like this: The HTML looks like this: <section class=" sub_nav" id="quick_access_section"> <header> <h1>Headline</h1> </header> <div class="wrapper cw_humans"> .... <div class="text">Nam condimentum
订阅 css3