Prevent Google Translator from changing height of html to 100% - google-translate

I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:
It automatically adds a style attribute to the html tag whose value includes:
height: 100%
This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.
Is there any way to prevent or fix this?

This resolves the issue:
/* Google Translate Overrides */
html, body{
min-height: 0!important;
height: auto!important;
position: inherit!important;
}

I was able to solve this by setting the body min-height attribute in css as !important to prevent override.
body {
min-height: 0 !important;
}
UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.
The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.

This should work:
html {
height: auto !important;
}
body {
position: initial !important;
min-height: initial !important;
top: auto !important;
}

maybe it's like
body{ height: auto !important; }

do not write css in head part, write in a css file. this will preventing automatic translation by google.

I tried using the solutions provided by the other answers, but they didn't work for me. If anyone else is having this issue, I did have success with this solution.
body { position:static !important; min-height:100%; top:0; }

I found a way to solve this issue, it's not bulletproof I guess but works for now:
Plugin: http://darcyclarke.me/dev/watch/
with this code :)
$(window).load(function(){
$('body').watch('min-height', function(){
var style = parseInt($('body').css('min-height'));
if(style > 0){
$('body').css({
'min-height' : '0',
'position' : 'static',
'top' : 'none'
});
}
});
});

The only way I can see to combat this is to put a timeout of 500ms on code to reset the body min-height property. If you're not to bothered about your page jumping around a little for half a second on load, it works. Using jquery, it would look something like this:
$(function(){
var myMinHeight = 950;
setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});
Set the value of myMinHeight to whatever you wish it to be.

Related

why can i only use my cursor tag in embedded html?

I tried to change the cursor on my html website with the "cursor" property, but I can only do it embedded, but I want to put it in my css stylesheet. Is that possible?
This is the code that I put between the style tags
* {
cursor: url('plaatjes/cake.cur'), default;
}
changing ur cursor is possbile yeah.
There are different possibilities why ur cursor image is not showing up (image type, image size, image url for
example..)
Try this accepted answer:
so accepted answer
This example changes the cursor for a specific div, if u use this like u have done before (with *) it should work at all.
If you want cursor on whole page, this should work:
first fix width/height of html and body element,
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
then:
* {
cursor: url('plaatjes/cake.cur'), default;
}

How to reset height of containers?

On this page http://pjstagingdecorating.com/home-staging-level-2/ when I resize the browser to simulate a narrow screen, there is a large space between each row. I think it is because the containers are each set to a height of 418px. I have used the following CSS to change the height of the containers to auto but it's not working. Thanks for your help.
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1.omega {
height:auto!important;
}
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1 {
height:auto!important;
}
remove the inline style style="height: 444px;" from div with
class="dtp-item-block"
You can reduce the gap by targeting it with the cleaner syntax like below.
.dt_portfolio_grid_6 {
height: auto !important;
}
If you are facing the same issue on other pages, you can reduce the usage of resetting height to all grids by targeting .dtp-item-block if it is used in those pages too.
Setting the height: auto on the dtp-item-block itself did the trick for me.
.dtp-item-block {
height: auto;
}
I applied it on the dtp-item-block, but you can also be more specific. I tried it in Stylebot (Chrome extension) and did not need the !important, but that might be because it's the extension.
You have a css selector named '1', that's not correct according to the CSS standards. CSS selectors must NOT start with a digit, that said, this selector:
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1.omega {
height:auto!important;
}
does nothing, but this should do the trick:
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.omega {
height:auto!important;
}
More info here: http://www.w3.org/TR/CSS21/syndata.html#characters

EmberJS body.ember-application CSS override

It seems impossible to override the CSS of the <body> tag of an EmberJS application.
It inherits the ember-application class, and this has many of the browsers default values, including a margin of 8px.
I want to get rid of this margin around <body>, but none of these two methods worked:
body {
margin: 0;
}
body.ember-application {
margin: 0;
}
!important does not help either.
Any idea of what I could do? Removing the body tag itself do not work, as Ember will add one.
The ember-application class has no css associated with it and just putting in
body {
margin: 0;
}
is enough to handle it. It's likely you have another CSS element winning the CSS war, or you have an inside element pushing the padding making it appear so.
Example of margin 0 working: http://emberjs.jsbin.com/vaquhuwo/1/edit

Google Map v3 Initializing with horizontal gray line w/ Foundation in Chrome

Seems to be CSS related because initializing the map in a simple HTML page works just fine. I have added suggested CSS to fix known issues (below), but can't seem to get rid of this.
#map {
*, *:before, *:after {
-moz-box-sizing: content-box!important;
-webkit-box-sizing: content-box!important;
box-sizing: content-box!important;
}
img {
max-width: none;
height: auto;
}
label {
width: auto;
display: inline;
}
}
For anyone else looking for a temp solution for this bug:
CSS
.map *, .map *:before, .map *:after {
-webkit-transform: none !important;
}
SASS
.map {
*, *:before, *:after {
-webkit-transform: none!important;
}
}
It seems to be a rendering bug with Chrome (I can replicate it in v 34.0.1847.131), rather than with your CSS. It's been fixed in Canary (v 36.0.1973.2 canary).
According to this bug thread on gmaps-api-issues:
The fix is in Chrome 35, which is currently scheduled for release in mid-May (you can switch to the beta channel to get the fix now or verify it in a Canary build - http://www.chromium.org/getting-involved/dev-channel).
Until then, like #user699242 suggested, removing any heading tags (h1, h2, etc.) in your page seems to fix it. Of course, that's semantically unappealing though, might be better just to wait.
.gm-style div div *{
-webkit-transform: none !important;
}
Note: Does the same as Nathans solutions, but also guarantees that the maps is still dragable. However it's just a temporary solution.
Seems like it has something to do with the following which is added inline to images by Google:
-webkit-transform: translateZ(0px)
Finally narrowed it down to h tags. If I removed all the h tags (h1, h2, etc.), the gray line disappears. So, seems like a Chrome bug (v 34.0.1847.116).
It is happening for me on my site http://www.shortwave.am/ as well, but only in the newest version of Chrome (I had Version 33.x before which was for some reason not updating and the problem was not there, but since I changed to the newest I have the issue).
It is fine on Firefox though.
Can you post a link to your site as an example please?
I encountered this problem but with a vertical gray line, and it was a rounding issue.
This was due to the fact that the div containing the map canvas was set to fluid-width (50% in my case) and more often than not did lead to a subpixel width.
To fix my problem, I had to listen to the map canvas resize event, retrieve and round the inner width of the container of the canvas (the one with width set to 50%) and set the rounded width back to map canvas - all of this in JavaScript of course.
Here is my HTML markup :
<div id="mapContainer">
<div id="mapCanvas"></div>
</div>
Here are my CSS rules :
#mapContainer {
width: 50%;
}
#mapCanvas {
height: 100%;
width: 100%;
float: right;
}
Here is the JavaScript fix :
var isResizing = false;
var fixMapCanvasRoundingIssue = function () {
if (isResizing == false) {
isResizing = true;
var width = Math.floor(document.getElementById("mapContainer").getBoundingClientRect().width);
$("#mapCanvas").width(width);
// is this needed ?
google.maps.event.trigger(map, "resize");
isResizing = false;
}
}
And here is the Google Map initialization :
var mapCanvas = document.getElementById("mapCanvas");
google.maps.event.addDomListener(mapCanvas, "resize", function () {
fixMapCanvasRoundingIssue();
});
map = new google.maps.Map(mapCanvas , {
...
});
fixMapCanvasRoundingIssue();
Note that I set the map canvas to float to the right to prevent any tearing issue on resize. This may not be needed in your case.
.gmap-container,
.gmap-container > div.gm-style,
.gmap-container > div.gm-style > div:first-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child * {
-webkit-transform: none!important;
}
If -webkit-transform: none !important; doesn't work make sure your browser isn't zoomed in. Having it zoomed into 110% causes the same grey line.
Simply switch onto newer version of API:
<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>
it worked for me!
The solution suggested by Optimiertes seems to be unfairly marked down as it worked for me.
I'd suggest caution as there may be cases when something on that level needs to be transformed, but I did the following and it worked great.
#map .gm-style div div *:not(.something-that-needs-transforming){
-webkit-transform: none !important;
}
I'm sure in time it'll be fixed in Chrome, but annoyed me enough for now to want to fix it.
Other solutions I tried didn't allow the map to pan.
In my case, I needed a simple way showing the location for a restaurant. All solutions didn't work for me and so I went for the following solution, using a iFrame, with the dimensions specified in my css class:
<div class="fluid google_maps">
<iframe
width="100%"
height="100%"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=PLACE_APIKEY_HERE
&q=eiffel tower">
</iframe>
</div>
Thats all to it, no javascript or anything, just a few lines of html.
Since I don't expect over 2kk visitors a day (google's free limit), it's perfect for me.
You do need to create a google API key, but that 1 minute work.
The eiffel tower, can be any address or known location, you normally fill in the google maps website.
#map *, #map *:before, #map *:after {
-webkit-transform: none !important;
}
it's right way if you don't use parallax effect, but if you want to hide horizontal line with parallax effect, here is fix:
.gm-style > div:first-child {
background-color: #000000;
}
color #000000 if your google map background color is black, if is other - change this color.
work fine with google maps parallax effect

Captcha Built-In CSS Issue

The recaptcha i'm using have a built-in css of
#recaptcha_area, #recaptcha_table {
width: 318px !important;
}
I see this when I use firebug.
My problem is
how can I override the built-in width? I've tried to place css code on my stylesheet like
#recaptcha_area, #recaptcha_table {
width: 207px !important;
}
but it doesn't work. Is there other way to override?
You should avoid using !important to override things.
You can't tell the recaptcha what it's width should be; however, you can specify a maximum width instead:
#recaptcha_area, #recaptcha_table {
max-width: 207px;
}
Note thought this might break the recaptcha area.

Resources