Develop Reference

Table getting out of fieldset border in Firefox only

I have a form where i have fieldsets, in 1 fieldset i have a table. This table will be in the fieldset in chrome and IE but not in Firefox. Please have a look:
https://jsfiddle.net/79504g5b/1/
my fieldset has this CSS:
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*----------------------->2*/ position: absolute;
}
I don't know what is the problem.

The element .statusHead1 does not occupy the available width. So, table is added next to it, in the available space.
To move table on it's own line, use clear: both on the table.
table {
clear: both;
}
See Demo.
Optionally, you can also set the float: left to the table.
Demo
I'll recommend you to use clear: both. Using this, you don't have to change your other elements structure/view.

Remove float:left form .statusHead1 class
Check this link https://jsfiddle.net/g0t1rwyw/
.statusHead1{
/*float:left;*/
width: 600px;
font-weight:bold;
border-bottom:1px solid #bfcfdf;
}

Google maps custom button with standard style

Is there any way to add custom button to the Google Maps using their latest api, so that it will use the same style as other standard buttons? I'd be thankful for a sample code demonstrating the solution.

There's no default class that you can apply or anything else. You'll have to follow up development and change your styling when Google Maps changes it.
For the current version:
MarkUp
<div class="gmnoprint custom-control-container">
<div class="gm-style-mtc">
<div class="custom-control" title="Click to set the map to Home">Home</div>
</div>
</div>
CSS
.custom-control-container {
margin: 5px;
}
.custom-control {
cursor: pointer;
direction: ltr;
overflow: hidden;
text-align: center;
position: relative;
color: rgb(0, 0, 0);
font-family: "Roboto", Arial, sans-serif;
-webkit-user-select: none;
font-size: 11px !important;
background-color: rgb(255, 255, 255);
padding: 1px 6px;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.14902);
-webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
min-width: 28px;
font-weight: 500;
}
.custom-control:hover {
font-weight: 900 !important;
}
Here's a jsFiddle that does exactly this. Some of the style attributes still get applied directly by maps. What's not getting applied is cursor: pointer; and some styles might need !important as suffix so it doesn't get overridden by maps.
Keep in mind that you can already add a visual refresh (sneak preview for the new maps styles) with
google.maps.visualRefresh = true;
You might have to refresh when this gets the default.

Customizing existing twitter bootstrap modal styles

So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:
modal hide fade
What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?
But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:
.modal-width-half (#modalWidth: 50%) {
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: #modalWidth;
margin: -250px 0 0 -#modalWidth / 2;
background-color: white;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.

I just did this and can share the line you're missing.
In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.
.modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.
.my-modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
You can then refer to this in your html like:
<div class="modal fade open my-modal">...</div>
Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.

How to animate the contents of a button?

Go to google, and without typing anything in, hover your mouse over the "I'm Feeling Lucky" button. See what it does?
I can't think how to do that...on:hover....but the actual content and animation itself, how?

It's not the button that's animating.
They have a hidden div, positioned over the button. It's absolutely positioned.
It contains a lot of spans with all the messages.
On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren't really.
<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
<!-- spans go here -->
</div>
</div>
See the value, -29px? That's all that's changing.

Add a class, ie: focus, for the borders and bold face and the toggle it with jQuery:
$('#button').hover( function () {
$(this).addClass('focus');
}, function () {
$(this).removeClass('focus');
} );
The actual rules you can see Google is using with Chrome are:
.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,.1)
}

Firefox 3.6.24 putting gray border on some images

Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away.
The images are not links and I have basically covered every option in CSS to eliminate the problem but have had no success:
body img{
padding: 0;
border: none;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 0 #000;
-moz-box-shadow: 0 0 0 #000;
}
Hopefully someone has encountered this before or has some information to help?

try adding an attribute to your html img tag like border="0"