Css3 - Font feature settings bug with letter spacing

Is there a way to set breakpoints for every js line in the chrome dev tools?

Once your code breaks, there's a button beside "resume script execution" called "step over next function call" or F10, which will resume step by step.

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

Float left and float right not working + sub-menu positioned under first UL item?

html,css,css3

Give your nav ul li relative position: poisition:relative and your nav ul li ul should have the following rules: position:absolute; left:0; top:27px; /* so it will bedirectly underneath */ Finally, to get the hovering working, use nav ul li:hover>a selector for the hover effect, instead of nav ul li a:hover....

How to position div which contains font-awesome icons to centre of another div?

jquery,html,css,css3

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{background-color:black} #menuRightSideGame { position: absolute; top: 28%; right: 2%; } .rightSideMenuItem { width:70px; height:70px; background: #c3834c; z-index: 1990; background-size: 100%; position: relative; border-radius:50%; box-shadow:0 0 5px 5px white; margin:20px; text-align: center; /* vor horizontal align */ } .rightSideMenuItemIcon { color: #fff; line-height:70px; /* for vertical align, needs...

How to set caret to newly added element in contentEditable element?

javascript,jquery,google-chrome

A simple solution if you don't absolutely need the top contenteditable element to be a p element, is to add a contenteditable div as parent of your p element. Enter will automatically add p elements. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='content' contentEditable=true><p>test</p></div> ...

CSS Image Background - Same Scale Across Different Devices

html,css,css3

Background-size cover is only useful if you want to stretch your background-image. If you are going to put it in a fixed-size container anyway, there no point to doing what you are doing anyhow. The best solution might simple be to define a background-size in a non-relative unit, like px....

How to properly position divs for overlay hover effect with text underneath

html,css,css3

Check the code below should be what your after. They key here is positioning. What you want is a box that overlays its container and has text in the dead center. In these instances position:absolute & position:relative mean everything. A small understanding of relativity would help in this situation but...

Div Text's Color Changes when Printed

html,css,css3,media-queries,media

MDN Docs: Adding this below rule will overwrite the user's printer property settings. @media print { .myid_print_duo_name { /* Replace class_name with * to target all elements */ -webkit-print-color-adjust: exact; print-color-adjust: exact; /* Non-Webkit Browsers */ } } ...

How do you make a div only extend in one direction when the outer container size increases?

javascript,html,css,css3,layout

You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...

Setting overflow: scroll on a table with display: flex

html,css,css3,overflow,flexbox

According to the HTML spec, browsers must wrap the <tr> elements inside a <tbody> element if there isn't any: The height of that <tbody> will be the height of all rows. However, the height of the <table> can be smaller. That wouldn't be a problem in a table layout, because...

Pure CSS animation visibility with delay

css,css3,css-animations

You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations. visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility...

for of loop querySelectorAll

javascript,google-chrome,for-loop,mozilla,queryselectorall

The docs are correct, but I wouldn't call this a bug. Rather it's a "not yet implemented feature". There is no standard for this, and there is still active discussion on how the DOM should integrate with ES6. Notice that it is clear that querySelectorAll should return something iterable which...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

html5,css3,twitter-bootstrap-3

Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...

css tricks for font awesome in placeholder for chrome

html,css,google-chrome,placeholder

Thanks @JDTLH9 for giving me a clue for the problem .actually you dont have to use inline style but in the previous design i was using {font-family:fontawesome}; but when i converted it to this : {font-family:Arial,fontawesome} it worked for me in the chrome....

how to align column to the right?

angularjs,css3,twitter-bootstrap-3

You can add ' text-right to your <div class="col-md-6 form-group"> please see here http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview and if you want to have column for 50% of screen even on small devices change col-md-6 to col-xs-6 http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview...

Google reCAPTCHA fail for second time submit

javascript,php,jquery,google-chrome,captcha

Google reCAPTCHA gives this two function: I always use this in my all ajax powered forms. grecaptcha.getResponse() grecaptcha.reset(); For both of your problem use second function whenever you need in your java script code. Remember this works if you have only one captcha in your page. If you have more...

CSS Container Wrap shaped Polygons

css3,polygon,css-shapes

You could use a basic SVG path http://codepen.io/anon/pen/XbaKLp <svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M5 5 L170 3 L295 15 L280 95 L130 80 L110 95 L20 85" stroke="transparent" fill="#8eab32"></path> </svg> Mx y represents the first coordinates; Lx y represents a straight line from previous coordinates to (x, y). (you...

Add CSS3 transitions to jQuery Animate script

javascript,jquery,html,css,css3

You mean do the entire animation in css3? var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png", "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

Content section overlap footer

html,css,twitter-bootstrap,css3,twitter-bootstrap-3

remove - position: absolute for footer create wrapper for page content to push down footer html, body { height: 100%; } body { margin: 0; padding: 0; } .wrapper { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom...

Chrome - Script tag isn't blocking

javascript,html,google-chrome

Scripts are executed in the order they appear in the HTML (unless you use the async or defer attributes). Browsers are perfectly welcome, however, to download them in any order they like, including in parallel, and including in parallel with other resources such as CSS files and images they find...

php redirection working in chorme but not on firefox

php,google-chrome,mozilla

have you tried using header('location') function? example : <?php if (isset($_POST['putonline'])) { $query = "UPDATE user SET status= '1' WHERE id= '$new_id'"; $result = $cid-> query($query); if ($result== TRUE) { header("location:EidEmp.php"); die(); } else { echo "Failed"; } } ?> Edited : Maybe Change Your header function with javascript function...

CSS: How to flow text around both left and right images

css,css3

It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned. <img src="http://placehold.it/100x200" style="float:left;"> <img src="http://placehold.it/100x200" style="float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur...

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

Smooth mouse-out animation

css,css3,css-transitions,css-animations

You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element. Example : .dn-diamond { display: inline-block; width: 100px; height: 100px; background: #000; transform: rotateY(0deg) rotateZ(-45deg); transition: transform 3s linear; margin: 50px; overflow: hidden; } .dn-diamond:hover { transform:...

Responsive css always applying landscape

html,css3,responsive-design,screen-orientation

You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator. As a beginner, I would drop the logical operators and only work with the device-width property as this...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

css,css3,sass,compass

I got an error when inserting it into a text editor, it seems that your closing bracket on your first media query was not right, maybe copied code. Anyways, copy, paste this into your css and it should solve the problem. @media (max-width:950px) and (min-width:800px) { .clickFacet { width: 93%;...

Fit an image inside a div that also has a title?

html,css,css3

One possibility that gives just one constant-pixel value (repeated once): .block h2 { height: 30px; } .block img { height: calc(100% - 30px); } ...

CSS drop down navigation

css,html5,css3,drop-down-menu,navigation

You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...

Dynamic font-size according to device

css,css3

You can use viewport widths and heights in CSS: .vwHeight {font-size: 5.9vw;} A preview of the same would be: More info on Viewport Sized Typography....

How to make my nav bar responsive

html5,css3,media-queries

This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....

Colour overlay on hover

css3,hover,overlay,css-transforms

Your <a> tag doesn't contain any of the elements you want to change, so the hover will not affect them (both the <img> and the text in <h2> exist in the parent <article> tag - you might want to put the :hover on the article tag, and change the...

Round edges on shorter side in CSS [duplicate]

css,css3,css-shapes

Just use a huge number, e.g. border-radius: 9999999px; .horizontal { width: 175px; height: 50px; } .vertical { width: 50px; height: 175px; } .box { border-radius: 9999999px; display: inline-block; vertical-align: middle; margin: 0 10px; background: blue; } <div class="horizontal box"></div> <div class="vertical box"></div> It works because, according to the spec, Corner...

1px white spacing in Chrome between div's

css,google-chrome

Pixel rounding. If your width generated is 1000px, each column should be generated at 333.33̅px. However, each browser/version handles decimal pixels differently unfortunately. Here's a handy guide: http://cruft.io/posts/percentage-calculations-in-ie/ Shock horror that IE is the worst. If you run it in IE, make sure your window is 1001px wide and see...

drop down menu toggle does not work

jquery,html,css,css3

You are missing the equals sign before the class name in your link tag: <li><a class"drop-menu" href="#" >Galleries</a> ^ /* Add equals sign: */ <li><a class="drop-menu" href="#" >Galleries</a> .. therefore the .drop-menu selector is not returning anything. You should consider storing your selections too: var main = function() { var...

Swap nav and div vertically uing CSS only

html,css,html5,css3

The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...

how to use .load(function() { on a large function

javascript,jquery,ajax,css3

You would want multiple deferred objects to pass them into $.when(). I believe you're looking for something like this: var d1 = new $.Deferred(); var d2 = new $.Deferred(); var d3 = new $.Deferred(); $.when(d1, d2, d3).then(function() { // perform your animations here }); $(img1).load(function() { d1.resolve(); } $(img2).load(function() {...

Setting up the page grid using push and pull

html,twitter-bootstrap,css3,twitter-bootstrap-3

Make sure you don't add a period (.) inside of the class attribute. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow. So you can do it like this:...

Two div side by side in one container css

css,css3

Remove top: 0;right: 0;position: absolute; to stop your .image from being positioned absolutely so that the text does not overlap it. alter your width's to match so that P doesn't take over the width. also add vertical-align:top; to keep items to the top. see bellow .conteiner { position: relative; }...

CSS flexbox wraps content in FireFox (not Chrome)

css,google-chrome,firefox,flexbox,pseudo-element

Weird. button elements have some special behavior which seems to conflict with flexbox. Specifically, what happens is that the flex items are blockified, according to the spec: The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex...

Is there an opposite CSS pseudo-class to :hover?

css,css3,css-selectors,pseudo-class

Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } jsBin demo Another example; I think you want to: "when one is hovered, dim all other elements". If my assumption is correct, and assuming all your selectors are inside the same parent: .parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{...

Animate removal of list items with css

css,angularjs,css3,animation,css-animations

The idea is to set the height of container and add transition to the height. $scope.styles.height = $scope.messages.length * 20 + 'px'; http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview...

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

css,css3,flexbox

It's a Chrome bug. See this simplified snippet: .flex { display: flex; flex-flow: column wrap; max-height: 200px; background: red; justify-content: space-between; margin: 10px 0; } .big, .small { background: blue; margin: 10px; } .big { height: 75px; } .small { height: 50px; } <div class="flex"> <div class="small"></div> <div class="small"></div> <div...

css disappears on the click of a button

javascript,jquery,html,css,css3

FIDDLE: You just need to modify this line span.innerHTML = str; to span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10; ...

Document won't load into iframe with changed, but proper, name

javascript,html,google-chrome,iframe

Stumbled upon this link: http://help.dottoro.com/ljbimuon.php After some modification of your script, i believe this could be the solution. Changing the contenWindow.name instead of name alone seems to do the trick. function change_name() { var one = document.getElementById('frame1'); one.contentWindow.name = "#"; console.log("The name is: " + one.name); console.log("The name of the...

Pure Css transition slide down panel not working

html,css,css3

Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...

Rss is not working in Google Chrome usin PHP MYSQL

php,mysql,google-chrome,rss

This is because chrome doesn't have an inbuilt RSS reader, you have to sue an extension.

Using CSS :after to shade a button:hover

css,css3,button

How about using box-shadows ? button { border: 0; padding: 1em; position: relative; cursor: pointer; background: none; } button:hover { box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.2); } button.green { background-color: #6c842e; color: #ffffff; } <button>Boop</button> <button class="green">Boop</button> ...

:nth-of-type selector overrides all other CSS selectors

html,css,css3,css-selectors,css-specificity

The rule with the blue is more specific and that is why it takes precedence. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...

CSS3 Columns children with margin issue w// Chrome

javascript,jquery,html,css,css3

Even though I do not have an explanation for that issue - have you tried using display: inline-block for the paragraphs? Applying that seems to fix the issue with chrome. .content p { display: inline-block; } ...

font feature settings bug with letter spacing

Best How To :