Develop Reference

CSS div background-color bug on chrome?

I'm having trouble setting the background of a div in Chrome Browser. If you see, I have a small lighter grey box that I didnt implement and give style. It appears randomly and moves and reshapes as it wants. It doesn't happen on Safari or on Firefox and I can't understand why or either how to fix it.
My problem is quite strange. I have the following code:
div className="row competition">
<div className="col-lg-6 register-answer">
<div className="compet-content">
<input type="text" className="form-control answer" id="usr"/>
<input type="text" className="form-control email" id="usr"/>
<button type="button" className="btn btn-primary">Enter Competition</button>
</div>
</div>
<div className="col-lg-6">
<div className="pic">
<img src={CompetitionImage} alt="Competition Image"/>
</div>
</div>
</div>
Edited (CSS classes):
.col-lg-6.register-answer {
background-color: #adadad;
.compet-content {
width: 100%;
height: 100%;
input {
}
button {
}
}
}
I'm setting the backgound-color on 'register-answer' class but I tried at every div and the problem is always the same (it only happens on chrome).
I have a screen recording also for you to see: https://drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing

I'm also having this problem and found this: http://www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome
Tried the solution... -webkit-transform: translate3d(0,0,0); in the rule where I specify background-color (body, in my case) and that worked. Still looking for a better solution.
UPDATE: Looks like this is a Chromium bug. If you want to solve it for all your visitors, the hack above seems to work. If you want to solve it for just you, you can go to chrome://flags/#enable-gpu-rasterization and enable GPU rasterization. I imagine this bug will be fixed by the Chrome team soon enough, so I decided not to use the hack.

I've been dealing with the same issue.
I've noticed that if you add a border to the element where the background colour is applied, the light box disappears.
If it doesn't interfere with your design, I would suggest adding a border that's the same colour as your background.
In your case:
.col-lg-6.register-answer {
border: 1px solid #adadad;
}
Or, if you're feeling adventurous try an (almost) transparent background with background-clip: padding-box. Your transparency has to be > 0 for the hack to work. I set mine to 0.01 and it does the trick (i.e. rgba(240, 240, 240, 0.01).

try adding background-color: transparent on the divs that you wish for the grey background to appear on

How to layer a <div> element ontop of a other elements

How do you layer a div element ontop of other elements?
I want to make a slightly translucent div element using the opacity css option then place
the div on top of the webpage to darken it then place another div with a form on top of that.
I tried using the z-index but i couldn't get it to work very well.
How would i do this? Is there a better way to do this?
Here is the code, am i doing something wrong?
<div style="opacity:.3; width:200; height:200; background-color:#222021; position:relative; z-index:1000;"></div>
<div style="z-index:100;">
<form name="testform" >
<input type="text" placeholder="First Name"required/><br>
<input type="text" placeholder="Last Name" required/><br>
<input id="submit" type="submit" value="Submit" />
</form> </div>
I want the div to layer on top of the other elements.(the form in this case.)

Fiddle
You have to position the overlay/background fixed. With top/right/bottom/left set to 0, it will automatically fill the screen. A z-index of 16777271 will ensure it's on top of everything, as this is the cross-browser highest z-index. You can also set it to 999 or something, will do the same job I guess.
.overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
The absolute centering method is grabbed from this pen, there are other methods to center something, too. The fiddle is not for production use, you should look at the pen I linked above.

jQuery mobile: How to set background color of text input

I want the background of a text input field which I use in a popup panel to be transparent.
Using
style="background: rgba(38,38,38,0.5);"
does work for a textarea, but not for the text input field:
Thanks in advance!

You should set background-color of the parent element .ui-input-text:
<div style="background: rgba(38,38,38,0.5);" class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-a ui-mini">
<input data-mini="true" id="selectedNode" type="text" readonly="true" value="1234" class="ui-input-text ui-body-a">
</div>
Since div.ui-input-text is auto generated by jQuery Mobile, you should add this rule to your stylesheet:
.ui-input-text {
background-color: rgba(38, 38, 38, 0.5);
}

in your example setting the background color of the input element works correctly
but as your setting it to half transparent rgba(38,38,38,0.5) you're getting different results as the parent tags of your textarea and input textfield have different background colors.
Use solid colors in this case to get better performance and to exclude side-effects like this. Or just make sure both parent tags have the same background color.

How to automatically Left Align an image in html or javascript

Below is my code that has three images aligned horizontally next to each other. Upon clicking each image I've added some simple action to remove the other images but image 2 and image 3 if clicked will still remain in their present area as opposed to Left Aligned like image 1. Is there a way I can Left Align image 2 or 3 if they are clicked? Many thanks
<div style="width:510px; height:105px; padding:5px;">
<img alt="Passenger Vehicle" id="V1" src="http://hou-agsprd02/images/basictruck.gif" onclick="Vehicle1()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
<img alt="Water Vehicle" id="V2" src="http://hou-agsprd02/images/WaterTruck.gif" onclick="Vehicle2()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
<img alt="Rig Transport Vehicle" id="V3" src="http://hou-agsprd02/images/GasTruck.gif" onclick="Vehicle3()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
</div>
Here is my code in another function that hides images 2 and 3 if image 1 is clicked, sorry for leaving that out.
document.getElementById('V2').style.visibility = 'hidden';
document.getElementById('V3').style.visibility = 'hidden';

You're setting the visibility to hidden, which essentially hides the block, but still takes up space in the layout.
What you want to do is remove the space where the block once was, by setting the display attribute to none.
Based on your javascript code, you can do it by changing your code to this:
document.getElementById('V2').style.display = 'none';
document.getElementById('V3').style.display = 'none';
After doing this, you'll notice that the block will be removed, and the elements around it will collapse into the areas where the hidden blocks once were.

What is your Javascript code?? If you are just making the image hidden, it is still there. You will need to actually remove the image from the page, then the images will fill it's place since they are floating left.

Layering Images & Click to Choose Using Javascript

So I'm making a gallery of fabrics and backgrounds for letters for a fraternity/sorority store in my college's town. If you don't know what I'm talking about, this is a fabric letter. You can see how it has a white outline (background) and a red inside (foreground). WELL, I want to make it so you can change both the foreground and background, simply by clicking it's similar image.
This is what I have so far
<script type="text/javascript">// <![CDATA[
function changeImage(filename)
{
document.mainimage.src = filename;
}// ]]></script>
with these for each fabrics:
<a href="javascript:changeImage('/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg')">
<img src="/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg"
alt="" width="100px" height="50px" /></a>
I really like how this works, but it's only good for one layer. Is there anyway I can add a layer below it, but still make it show at the top of the page? I know I'll have to use photoshop and transparency for both options, thats no problem, but I wanted to make sure I can do this before I start creating 600+ images.
I know I can play with z-index and css, but since I'm using wordpress the one example I read about here wasn't working or I didn't completely understand it, and messed up my entire page.
Also here's my tester webpage to see the current code in work. (if you click the navy&white stars image, you can see a very rough makeshift "A")
Thanks in advance!

I think I've got a solution for you.
Live Demo: http://jsfiddle.net/hM6dj/4/
More or less, you just need to create some images of the letters and leave their insides transparent.
Example
You'll notice that the area around the 'A' is white while the area within the lines of the 'A' is transparent.
Code
Then all you need to do is place this image in front of another image. The image in the background will bleed through the transparent image on top resulting in an 'A' with a pattern.
NOTE: I used data urls for the foreground letter so I wouldn't have to host the images anywhere. You can read about that here.
HTML
<div class='container'>
<div class='foreground foreground-Black'> </div>
<div class='background background-Cow'> </div>
</div>
<h2>Foreground Options</h2>
<input type='button' class='btnforeground' data-class='foreground-Black' value="Black" />
<input type='button' class='btnforeground' data-class='foreground-Red' value="Red" />
<input type='button' class='btnforeground' data-class='foreground-Green' value="Green" />
<h2>Background Options</h2>
<input type='button' class='btnbackground' data-class='background-Cow' value="Cow" />
<input type='button' class='btnbackground' data-class='background-Stars' value="Stars" />
<input type='button' class='btnbackground' data-class='background-Dots' value="Dots" />
​
JS
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
​
CSS
.container{
position:relative;
width: 200px;
height: 200px;
}
.foreground, .background{
width: 200px;
height: 200px;
background-repeat: no-repeat;
position:absolute;
z-index:100;
}
.background{
background-repeat:repeat;
z-index:50;
}
.background-Cow{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/424.jpg);
}
.background-Stars{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/48.jpg);
}
.background-Dots{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/521.jpg);
}
/* Omitted due to StackOverflow character restrictions.
.foreground-Black{
background-image: url();
}
.foreground-Green{
background-image: url();
}
.foreground-Red{
background-image: url();
}
*/
​
EDIT
Using Google Chrome's Developer tools, it looks like you have some HTML intermixed with your JavaScript (notice the Paragraph Tags <p>, </p>).
Also I would wrap the jQuery events in a ready function (The JS Fiddle did this automatically so it wasn't obvious from the code example).
JS
$(function(){
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
});
​
EDIT2
A few things.
Your classes:
.foreground
.background
.foreground-Black
.foreground-Cow
etc...
have almost none of the properties set from my example. You should be able to take the css verbatim from the jsfiddle I provided.
You've named the container the class .viewer, but are referencing .container in your JavaScript. These elements must match for the JavaScript to be able to find the appropriate html element to update.