css,google-chrome , 1px white spacing in Chrome between div's


1px white spacing in Chrome between div's

Question:

Tag: css,google-chrome

JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/

Basically, I've been trying to make a full-screen 3x2 grid, and have essentially achieved it, however I'm seeing a tiny 1px vertical line between the 2nd and 3rd columns when I hover over the grid items. Where is this coming from, and how do I get rid of it?

I've read elsewhere that including -webkit-backface-visibility: hidden; can help when using 3D transformations; however I'm not using any 3D transformations. This line does work to a degree, in that it hides the white line on some sizes, but on others it still appears (I assume when it's not quite divisible by 3?). I've commented this line out in the JSFiddle below so you can easily see the white line which appears on hover.

Below is a screenshot of what I'm seeing, in case it's not happening for you. Though so far I've only encountered this problem in Chrome.

enter image description here

JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/

jQuery(document).ready(function () {
    gridSize();
});

jQuery(window).resize(function () {
    gridSize();
});

/* Returns scrollbar width*/
function getScrollBarWidth() {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);

    document.body.appendChild(outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild(outer);

    return (w1 - w2);
};

function gridSize() {
    
    if ($('.box').width() > 0) {
        var w = $(window).width();    
    } else {
        var w = $(window).width() - getScrollBarWidth();
    }

    var h = $(window).height();

    var thirdw, halfw, halfh, overboxw, overboxh;
    
    /* Width needs to be 33%, height needs to be 50% */
    /* Full screen sizes */
    thirdw = w / 3;
    halfh = h / 2;

    $('.box').css({
        "width": thirdw,
            "height": halfh
    });

    /* Set overbox size */

    overboxw = thirdw - 60;
    overboxh = halfh - 60;

    $('.box .overbox').css({
        "width": overboxw,
            "height": overboxh
    });

    /* Resize the images based on the ratio */
    if (thirdw > halfh) {
        jQuery('.box img').css({
            "height": halfh +"px",
			"width": "auto"
        });
    } else {
        jQuery('.box img').css({
            //"height": halfh +"px"
        });
    }

    /*
    Bottom's affected:
    .box:hover .title == 110px (needs moving up depending on width of box as content beneath grows in height)
    
    */

}
body {
    margin:0;
    padding:0;
}

.boxWrapper {
    font-size:0;
    /*-webkit-backface-visibility: hidden;*/
}

.box {
    cursor: pointer;
    height: 400px;
    position: relative;
    overflow: hidden;
    width: 300px;
    z-index:400;
    display:inline-block;
}
.gradient {
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(128, 128, 128, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#80000000', GradientType=0);
    /* IE6-9 */
    z-index:401;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
.box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    z-index:400;
}
.box .title {
    position:absolute;
    bottom:20px;
    left:25px;
    text-transform:uppercase;
    z-index:404;
    color:#fff;
    font-size:30px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.box .title:after {
    content:'';
    margin-top:5px;
    display:block;
    height:4px;
    width:60%;
    background:#fff;
}
.box:hover .title {
    bottom:110px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.box .overbox {
    background-color: rgba(246, 48, 62, 0.85);
    margin: 10px;
    padding: 20px;
    width: 240px;
    height: 340px;
    position: absolute;
    color: #fff;
    z-index: 403;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
}
.box:hover .overbox {
    opacity: 1;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.box .overbox .tagline {
    position:absolute;
    bottom:0;
    padding-right: 20px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    font-size:16px;
}

.box:hover .overbox .tagline {
    bottom:20px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
<div class="boxWrapper">
<div class="box">
    <div class="gradient"></div>
    <img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
    <div class="title">Title</div>
    <div class="overbox">
        <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
</div>
<div class="box">
    <div class="gradient"></div>
    <img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
    <div class="title">Title</div>
    <div class="overbox">
        <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
</div>
<div class="box">
    <div class="gradient"></div>
    <img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
    <div class="title">Title</div>
    <div class="overbox">
        <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
</div>
<div class="box">
    <div class="gradient"></div>
    <img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
    <div class="title">Title</div>
    <div class="overbox">
        <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
</div>
<div class="box">
    <div class="gradient"></div>
    <img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
    <div class="title">Title</div>
    <div class="overbox">
        <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
</div>
<div class="box">
    <div class="gradient"></div>
    <img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
    <div class="title">Title</div>
    <div class="overbox">
        <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
</div>
</div>
aaaaaaaaaaa
bbbbbbbbbbb
ccccccccccc


Answer:

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 how that renders. I expect that your 333.66̅px. will unhappily get rounded up to 333.67, and may end up cutting off the 3rd column.

To do what you need to do, you don't actually need JS at all:

http://jsfiddle.net/c6cwbjLz/14/

html,
body {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.boxWrapper {
  font-size: 0;
  height: 100%;
  width: 100%;
  /*-webkit-backface-visibility: hidden;*/
}
.gradient {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(128, 128, 128, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#80000000', GradientType=0);
  /* IE6-9 */
}
.box {
  cursor: pointer;
  height: 50%;
  position: relative;
  overflow: hidden;
  width: 33.33%;
  z-index: 400;
  display: inline-block;
  background-image: url("http://www.webtutorialplus.com/Images/css-effects-image/1.jpg");
  background-size: cover;
}
.box .title {
  position: absolute;
  bottom: 20px;
  left: 25px;
  text-transform: uppercase;
  z-index: 404;
  color: #fff;
  font-size: 30px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .title:after {
  content: '';
  margin-top: 5px;
  display: block;
  height: 4px;
  width: 60%;
  background: #fff;
}
.box:hover .title {
  bottom: 110px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox {
  background-color: rgba(246, 48, 62, 0.85);
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  /*make border and padding include in height/width */
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  color: #fff;
  z-index: 403;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
}
.box:hover .overbox {
  opacity: 1;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox .tagline {
  position: absolute;
  bottom: 0;
  padding-right: 20px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  font-size: 16px;
}
.box:hover .overbox .tagline {
  bottom: 20px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
<div class="boxWrapper">
  <div class="box gradient">
    <div class="title">Title</div>
    <div class="overbox">
      <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
  </div>
  <div class="box gradient">
    <div class="title">Title</div>
    <div class="overbox">
      <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
  </div>
  <div class="box gradient">
    <div class="title">Title</div>
    <div class="overbox">
      <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
  </div>
  <div class="box gradient">
    <div class="title">Title</div>
    <div class="overbox">
      <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
  </div>
  <div class="box gradient">
    <div class="title">Title</div>
    <div class="overbox">
      <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
  </div>
  <div class="box gradient">
    <div class="title">Title</div>
    <div class="overbox">
      <div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
    </div>
  </div>
</div>aaaaaaaaaaa bbbbbbbbbbb ccccccccccc

I have had a similar problem which was fixed with a simple width: 33.33%. Note that in my case I needed to use JS to calculate height and widths for something else that couldn't work responsively.


Related:


How to reduce the size of picture on the background?


css
I have a picture size: 240px/240px. This size of picture must be only on wide screens, on mobile this picture must be 80px/80px. What I have ever tried: .picture{ height:100%; min-height: 240px; background: url("../../img/picture.png") no-repeat; background-size: cover; background-position: 50% 50%; } @media screen and (max-width: 480px) .picture { height: 80px;...

Weird behavior in Firefox using :after and float:right inside of a yui-purecss button


css,yui-pure-css
JsFiddle: http://jsfiddle.net/9opb4n03/1/ HTML: <html lang="en"> <head> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> </head> <body > <a class="pure-button" href="#"><span>BUTTON</span></a><a class="pure-button" href="#">Button Text</a><a class="pure-button" href="#">Another Button</a> </body> </html>...

Detect when the jQuery UI slider is being moved?


jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

How to position “:before” element used as icon in zurb foundation's Side nav?


html,css,zurb-foundation
I added a sub-menu to foundation's side nav exactly like in this example, but the icon is above the text. My CSS: .hasChildren:before{ content: "\25ba"; float: left } .hasChildren.active:before{ content: "\25bc"; } My HTML: <div class="large-4 medium-4 columns menu-wrapper"> <div class="panel"> <h4>Menu</h4> <ul class="side-nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li>...

Text-decoration/CSS causing text to move


html,css,wordpress
I've tried a bunch of techniques to solve this. I've used float (left/right) and played with positioning (absolute & relative). None worked. Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied. I'm new to CSS and this is my first header- so...

Django: html without CSS and the right text


python,html,css,django,url
First of all, this website that I'm trying to build is my first, so take it easy. Thanks. Anyway, I have my home page, home.html, that extends from base.html, and joke.html, that also extends base.html. The home page works just fine, but not the joke page. Here are some parts...

How to set DIV's width based on CSS indexes


html,css
I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name. I tried it in this jsFiddle but even if first 3 blocks (first row)...

Changing font-size of
  • on wordpress

  • css,wordpress,html-lists
    I am adding some pages on a wordpress themed website. There is a table with 3 columns: 1st column will be the title (larger font). Since it looks better and editing is easier, I started using <ul> instead of <td> Even though it works fine on JSFIDDLE font-size on the...

    CSS :hover that shows more than one image


    html,css,css3
    I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

    How do I specify a css margin-top for foundation row div?


    css,zurb-foundation
    How do I specify a css margin-top for foundation row div? Using the Chrome dev tools it looks like foundation.css is overriding any margin properties for .row divs - regardless of where I put the css. In the interest of getting something out the door today I have resorted to...

    Centering navbar pills vertically within the navbar using flexbox


    html,css,twitter-bootstrap,flexbox
    I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

    Fancybox thumbnail is not working


    javascript,jquery,html,css,fancybox
    I'm trying to imitate this jsfiddle: http://jsfiddle.net/kevin11189/uZCC6/1269/ however the thumbnails are not appearing. Here's my code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Gallery</title> <meta name="description" content="An interactive getting started guide for Brackets."> <link rel="stylesheet" href=""> <style> .hidden { display: none; } </style> <!-- Add jQuery library -->...

    Render list starting from the bottom of its container


    css
    Trying to make a drop down, but struggling to figure out how to make the dropdown start below the button. I have this: https://jsfiddle.net/wg4apx2q/ <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <style> div{ width: 200px; height: 100px; background: #ddd; position: relative; } ul { } li {...

    How To Check Value Of String


    javascript,css,string,numeric
    <span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

    How to make background body overlay when use twitter-bootstrap popover?


    html,css,twitter-bootstrap
    Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

    Button not center align in Safari


    html,css,safari,center-align
    Button not centered align in Safari browser JSFIddle HTML <div class="" style=" width: 100%; "> <input value="Button" class="center-block" type="submit" style=""/> </div> CSS .center-block { display: block; margin-right: auto; margin-left: auto; } Above problem just come in safari, in chrome and firefox it is ...

    Div is 100%width, but the browser still scrolls to the right


    html,css
    I am using October CMS for a project, but unfortunatley I am having problems. For one of my divs I have the background set to 100% width, however I am getting this problem where the div below it is smaller in width and the browser is scrolling to the right...

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


    javascript,html,css,css3,layout
    I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...

    Iframe does not show scrollbar


    html,css,angularjs,iframe,ionic
    Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

    Div with the form of a pencil [duplicate]


    html,css,css-shapes
    This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

    change css dynamically by selecting dropdown list item


    jquery,html,css,drop-down-menu
    I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

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


    html,css,css3
    Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

    Add Extension to Index File


    html,css
    I've been searching online for an answer to this but I can't seem to find anything which can help. I was wondering if its possible to open a index.html file with an extension after the .html (for example it would open a file like this - index.html?lc=uk) automatically when you...

    tag in HAML


    html,css,haml
    How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

    Adding horizontal space between 2 buttons using javascript


    javascript,jquery,html,css
    I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

    Select n elements from hover event


    javascript,html,css
    I would like to select n elements from the element recieving the hover event. Is this possible in CSS? E.g. In the example below, could I write CSS to select the next 2 items from the item reciving the hover event? <div class="row"> <div class="col-md-1 item"></div> <div class="col-md-1 item"></div> <div...

    HTML CSS Two 2-column tables side by side with same height and width


    html,css
    I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...

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


    html,css,css3
    I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

    1px white spacing in Chrome between div's


    css,google-chrome
    JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/ Basically, I've been trying to make a full-screen 3x2 grid, and have essentially achieved it, however I'm seeing a tiny 1px vertical line between the 2nd and 3rd columns when I hover over the grid items. Where is this coming from, and how do I get rid of...

    add value to existing class in jQuery


    javascript,jquery,html,css
    EDIT - included the page where the problem is visualized - http://www.openmindedmedia.nl/testfase/julius/ First of all, I have searched quite some hours to find this.. I presume it has an easy fix but I'm really new to jQuery and Javascript, so I'm here for your help. The problem I'm working with...

    Difficulty applying two different scripts


    javascript,jquery,html,css
    I have this script embedded on the index page of my site: $(document).ready(function(){ $(".bgtoggle").click(function () { $(".metro").toggleClass("bgcolorchange"); }); }); The CSS classes the script refers to look like this: .bgcolorchange { background-image: url("../images/mthc/imageN.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow : hidden ; margin:0; padding:0; z-index:3; } .metro...

    How to remove all the borders of a selectbox?


    jquery,html,css,drop-down-menu
    How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

    unable to apply toggleclass for bg after js script execution


    javascript,jquery,html,css
    i have this button on a page ... <div id="bgtoggle"> </div> i also have this script on the index page <script> $(document).ready(function(){ $("#bgtoggle").click(function () { $(".metro").toggleClass("bgcolorchange"); }); });</script> the class bgcolorchange has this css .bgcolorchange { background-image: url("../images/mthc/music-therapy-imageN.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow : hidden ;...

    Dynamically resize side-by-side images with different dimensions to the same height


    javascript,html,css,image
    I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

    Default scrollbar position


    javascript,jquery,html,css,scroll
    I'm building a chat application in which I need the scrollbar to be at the bottom of the chat window (last message) on page load. How do I accomplish this (Using jQuery or otherwise)? Here's the chat window div: <div id="ccwindow"> <div class="bubble me">Hey!</div> <div class="bubble you">Hello</div> <div class="bubble me">I...

    Google map infowindow position on custom marker


    javascript,css,google-maps,google-maps-api-3
    I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays. The Overlay position is not exactly like the marker so I played a bit with it and now it is...

    styles css in embeded souncloud player


    css,iframe,styles,embed,soundcloud
    I am trying to make a small site I use embed code to display soundcloud music in webpage. however, I want to remove the orange button play and the player down my iframe . I am researching I found that I could do it with css, just hidden buttons ....

    show div only when printing


    javascript,html,css
    Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

    CSS flexbox wraps content in FireFox (not Chrome)


    css,google-chrome,firefox,flexbox,pseudo-element
    I have a button that consists of an <i> and an <span> element (an icon and some text). Now both have different sizes so I'm applying a flexbox to my button that should center my items nicely. In Chrome everything works as I expected but using the page in a...

    php redirection working in chorme but not on firefox


    php,google-chrome,mozilla
    Below is my php code that caries out the redirection Code Snippet :- echo "<form action='exp_yogesh.php?id=$id' method='post'>"; echo "<td> <input type='image' name='putonline' value='$id' src='images/on_button.png' no-repeat; border:none;' alt='submit'> </td> "; echo "<td> <input type='image' name='putoffline' value='$id' src='images/off_botton.png' no-repeat; border:none;' alt='submit'> </td> "; echo "</form>"; Here's the exp_yogesh.php file <?php include 'includes/connection.php';...

    How to make an element disappear by clicking off it


    javascript,jquery,html,css
    I want to make a search that displays results right underneath it in a div that displays above other elements on the page (like an auto-complete or the address bar on chrome). I want to the results to stay visible wherever the mouse is, but disappear if the user clicks...

    Top header 100% of screen, but body only 70%?


    html,css
    Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

    bootstrap - dynamically changing jumbotron background image


    javascript,jquery,html,css,bootstrap
    I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

    Pure Css transition slide down panel not working


    html,css,css3
    Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

    CSS bouncing line loader animation


    html,css,animation
    Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction. This is my css @keyframes loader-animation { 0% {...

    Website showing differently in windows xp and mobile


    html,css
    I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

    change icon on collapse in Bootstrap 2.3 not in bootstrap 3


    javascript,jquery,css,html5,twitter-bootstrap
    I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

    How can I keep a group of buttons centralized on the right side of the footer?


    html,css,button,footer
    I've been trying to keep four buttons centralized on the right side of the footer, but it seems like the footer is set to percentage instead of pixels, I've tried to set it to percentage, but it ignores my "orders", how can I set the footer to 60px, and put...