In the following page http://ada.kiexpro.com/test2/map.html
I added:
white-space: normal;
to wrap the copyright text that is coming our from the Google map API.
It works in FF and IE but Chrome seems to ignore the CSS selector:
global.css:
#cm_map span {
white-space: normal !important;
}
Google has an anonymous div with inline styles surrounding the copyright content. Only hook I can see is that it's a sibling of the "logocontrol" div. To override, try something like the following:
#cm_map #logocontrol + div[style] {
left: auto !important;
line-height: 13px;
right: 5px;
bottom: 6px !important;
white-space: normal;
width: 95%;
}
Not thoroughly tested but something like this should work.
This may also be a bug in Chrome: white-space normal !important doesn't override nowrap.
I've reported this bug at http://code.google.com/p/chromium/issues/detail?id=89573, but based on how they have been completely ignoring a more important issue since 2009, I have little hope of this being fixed.
Here is another example of chrome ignoring the important. This time its on the position. Unclicking the "position: relative" does bring the absolute into the picture. So the style is valid.
Related
Internet explorer keeps on splitting my words. Chrome and Firefox are working fine.
Here is my code and the link to the website: http://www.hgsainc.com/about/
Thanks for your help!
.page #main .entry-content {
width: 100%;
padding-right: 0;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
table-layout: fixed;
}
.page #main .entry-content p,
.page #main .entry-content span {
font-size: 16px;
line-height: 30px;
text-align: right;
}
I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:
-ms-hyphens: none;
See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx
Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.
After checking the developer tools in Internet Explorer, inspecting the paragraph that was having this problem showed a -ms-hyphens:auto; style in your code. You should probably add a style with -ms-hyphens:auto; to your block of styles to prevent this from happening.
The style that causes this is placed in http://www.hgsainc.com/wp-content/themes/twentythirteen/style.css, at the * 5.3 Entry Content part. You can also remove the hyphens styles from there to prevent having to do this.
I cannot manage to apply "padding" to checkboxes on IE11, so that they behave the same as on IE10.
On IE10, the computed style for checkboxes was:
width: 13px;
height: 13px;
padding: 3px;
margin: 0;
On IE11, it is now:
width: 13px;
height: 13px;
padding: 0;
margin: 3px;
Although the checkboxes have the same size on both browsers, their behaviour has slightly changed. On IE10, the 3 pixels padding was causing the checkbox to "hover" when passing the mouse 3 pixels around the edges of the box. This is no longer the case on IE11, reducing the clickable area by that many pixels on each side.
I have tried applying the same style as on IE10 to the checkboxes, without any success (see http://jsfiddle.net/LSjb4/). The padding seems to be ignored. I've also tried playing with the width and height (as you would do on Chrome for instance), but this is causing the box to visually stretch.
Can anyone think of a pure CSS solution to get the same behaviour as IE10, retaining the native look of the checkbox (no image please)?
NOTE: please spare the "why are you trying to do that, it's bad for user experience etc." comments. Consider it as a technical challenge with no other purpose than the satisfaction to solve it :)
http://jsfiddle.net/8xmpw/
HTML
<label for="ie11" class="ie11">
<input type="checkbox" id="ie11" />
</label>
CSS
.ie11 {
padding: 3px;
}
.input[type=checkbox] {
vertical-align:bottom;
}
This create a 3px padding area around the label box that allow you to click checkbox without hover entirely into the checkbox.
But this leads another problem that there is a small margin where IE11 has default margin preset. (I am guessing 1px top, 3px bottom)
I think the best you can do is using vertical-align to make either top or bottom border or checkbox clickable;
IMHO:
IE 10 rectangle checkbox perceived as content and 'padding' showed as distance out rectangle.
IE 11 as content perceived contents inside the rectangle and 'padding' just ignor.
Google Chrome browser also behives as IE 11 and ignore padding for checkbox.
For the same display your page in IE10 and in IE11 you must don't use padding for checkbox.
Simple solution is force IE11 simulate IE10 with through use
<meta http-equiv="X-UA-Compatible" content="IE=10">
P.S.
I also was unpleasantly surprised when discover that different behaviour in IE11 and IE10.
I am using Bootstrap.css which inside had classes .checkbox-inline and .checkbox.
If use these css classes, the boxes moved down relatively to label(.control-label).
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
For the same display in IE10 and IE11 I rewrite this classes (of course in other css file)
.form-horizontal .checkbox,
.form-horizontal .checkbox-inline {
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
}
I know that my english isn't so good, but i hope you are understood!-)
I met the same problem recently, and solved by wrapping around <checkbox> by <span> (jQuery required)
Then move the class of <checkbox> up to the <span>, and defined some special styles for ie11
// IE11 or above
if(!!(navigator.userAgent.match(/Trident/) && ! navigator.userAgent.match(/MSIE/))){
$(function(){
$("input[type=checkbox]").wrap(function(){
return "<span class='" + $(this).attr("class") + " ie11'>";
});
$("input[type=checkbox]").removeClass();
});
}
When I declare this style for a div:
#fbInner{
position: absolute;
margin: 11.2% 9.7% 0% 26.4%;
width: 63.5%;
height: 54.6%;
overflow: visible;
/*max-height: 190px;
max-width: 490px;*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #FFF;
/*border: solid 2px gray;*/
}
Chrome sets every margin right except of the margin top, which is set much smaller than in other browsers ... strange, all other margins are displayed like it should ...
What is the reason for that?
Is there a workaround that still uses percentages?
Seeing as this is an x-browser css question, resetting the css styles would be a valuable first step - maybe even the solution. You haven't disclosed any HTML code, so I can't know what other tags or styles are affecting #fbInner
In any case, here is the "meyerweb reset" stylesheet: http://meyerweb.com/eric/tools/css/reset/
Link it topmost in your HTML file. It will probably break your site, but that's a good thing. At least it should be equally broken in all browsers now. When you've fixed the look of your page, it should work properly in most/all browsers.
I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:
pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }
The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.
Here's the page you can look at to see how well it doesn't work.
I've tested with these browsers:
Chromium and Epiphany works not
Firefox and Konqueror works
update:
Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.
If you float .code left then it will work:
.code {float: left;}
pre { white-space: pre;}
To have a horizontal scroll bar show up, you need to add:
pre { white-space: nowrap; }
On the actual page you have the css:
pre { overflow: auto; white-space: pre-line; }
This is overwriting any other white-space declaration and therefore it will not have horizontal scroll. Changing this to white-space: nowrap fixes the problem.
I'm having some problems with some CSS properties in IE8.
I've tested my site in IE7, Chrome and Firefox and they work fine but IE8 is having some layout issues.
I inspect the developer tool option on ie8 and I've noticed that some of the properties I set in CSS are being ignored by ie8. For example:
#header
{
position: relative;
padding: 20px;
height: 100px;
background:url(header.png);
}
In this header IE8 ignored the height property:
If I inspect the element in developer tools it is missing that property and it's crushed into another line:
background:url;HEIGHT: 100PX
The same thing happens for floats too:
#logon
{
float: left;
text-align:right;
width:20%;
height: 40px;
padding-left: 0px;
padding-right:7px;
border:0;
margin:0;
background: url(navgradient.gif);
}
This ignores the float value:
background: url(navgradient.gif); FLOAT:left;
What is happening here and how can I fix it?
I've seen this too. Some styles are shown on the same line, happens to me with "filter" lines.
The HTML renders in IE correctly, but if you try to toggle that CSS line on/off, it affects both properties. So unchecking "filter: alpha(opacity=25); BOTTOM: 10px" in dev tools disables both the "filter" and "bottom" CSS rules.
So it seems like a bug in dev tools' parser, but not the IE rendering engine. It's crazy how this still isn't fixed.
Seems like a parse error, or similar. Try putting quotes around the image names;
background: url('navgradient.gif');
I've seen this happen if the stylesheet contains filter properties.