I'm working on this site: http://oq.totaleclips.com, and Opera displays the Facebook Like button out of horizontal alignment with the other social buttons on feature pages such as: http://oq.totaleclips.com/mpa/The_Hunger_Games_(Movie_2012)
I don't want to make radical changes to the container div's css, because it works fine in other browsers. Perhaps a browser-specific style would fix the issue, but the div called fb-like does not seem to accept css over-rides well (as in `.fb-like{height:21px !important;})
How can I get this to line up properly in Opera?
Unfortunately, because that particular (and most easy to use) Facebook Like button(s) uses FB's iframe, you're unable to style it (otherwise, .fb_iframe_widget span {vertical-align: top;} would do the trick.)
There are other ways of implementing a like button without using an iframe, ranging from the accessible (Open Like), to the somewhat involved (Facebook SDK).
If you're stuck with the iframe, though, you could theoretically use an Opera specific css selector:
x:-o-prefocus, .fb_like {
margin-top: -10px;
}
Related
I am trying to hide the autofill style for a password input field that comes in via the user-agent-styles.
When inspecting the element, the computed styles show that the color coming from the user-agent-style is being overridden and #fff is being applied, but the actual computed style is still the one coming from the user-agent.
Any idea on how to get rid of this?
Here is the CSS I am using to try and override it:
.password {
border-right: none;
background-color: #fff !important;
}
#MainContent_txtPassword:-webkit-autofill, input:-internal-autofill-
previewed, input:-internal-autofill-selected, textarea:-internal-autofill-
previewed, textarea:-internal-autofill-selected, select:-internal-autofill-
previewed, select:-internal-autofill-selected {
background-color: white !important;
}
I found an answer that works for me! See https://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs
I had initially come across https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ but that only works for opaque backgrounds, and not transparent ones. The webagility article includes a nice hack for transparent backgrounds too.
To summarise both the articles, the solution I applied is:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-transition-delay: 99999s;
}
The reason this works is because chrome applies autocomplete styles via a css transition. If you delay all transitions on that input, the styles will never be applied.
This behaviour is seen in Chrome only (it is not in Firefox, I didn't test Edge or others). Chrome applies a pale yellow background (#E8F0FE) and black text to all autofilled inputs. This user agent style for autofilled text has hard-coded priority in Chrome's rendering since Chrome version 74. This behaviour is intended by the Chrome developers.
In Chrome, these hard-coded styles will override anything you can set yourself in the document or via Javascript. In the original question, Style Inspector shows the OP's background-color: white !important style as having precedence over the user agent style input:-internal-autofill-selected. Style Inspector is wrong to show that: it looks like it does not know that the user agent style for autofilled text has hard-coded priority.
I replicated the OP's issue in a (codepen). Note that I even tried to update the input:-internal-autofill-selected user-agent style in the document's own CSS, with the !important suffix. Even with that in the CSS, Chrome still uses the original, hard-coded user-agent style. This codepen also shows you that none of the following methods will be effective to override the user agent style in Chrome.
use CSS with greater specificity
add style to the element in HTML
use an event in Javascript to change the element's style properties (for example backgroundColor) after data is entered
This has been reported to Chrome as a bug. The developers' response is WontFix, citing a security concern. Chrome devs don't say what the security concern is, but I guess it is that a malicious site could create HTML with hidden input boxes (no border, and background and foreground colours matching the page background) and gather some auto-filled data without the user's knowledge.
This "WontFix" attitude is not a great solution. It annoys designers who want to control the appearance of input boxes. The OP wants a pure white background and Chrome changes it to #E8F0FE which is maybe not a big deal, but it's way worse for designers who want to use a dark background. How hard would it be for Chrome to check programmatically that the page has styled the input box with high enough contrast to be visible to the user? Chrome has also not fully solved the security concern, because a malicious site can hide an input box in some other way: it could be outside the visible screen area, or covered by a different page element.
I had a similar problem attempting to style a select option element's background colour when :checked.
I'm using pseudo elements to add checkboxes to a select element where multiple selections are allowed and didn't want to whole row showing as being selected.
I found that changing to another colour had no effect over the User Agent Stylesheet (Chrome) but using a gradient as the background did.
option:checked {
background: linear-gradient(0, #fff, #fff);
}
Hi I'm having problem with a site in IE 10 Compatibility View (and in IE7 view as well, they are the same problem). Originally I have a background div behind the sidebar called .info-bg, and it's suppose to hide behind the sidebar .info-area, using position: absolute. However, in IE7, it looks like the background is not hidden. The only way to get it to hide is using position: static, which leaves an empty spot.
get the background to hide completely (like display none) is not an option because the right side loads more content as I scroll down. Which, without .info-bg just returns a blank space on the left. Live Site Link
maikelsabido's answer is valid but only covers half of the issue. There is no point to supporting IE10 while it is rendering as IE7. So few people do this (my statistics are based on JavaScript/DOM object detection, not the user agent and therefore are extremely reliable, my site triggers an error 9999 if you try forcibly overriding the rendering mode) so just don't bother with IE10 rendering as IE7. However to test IE7 you should keep a copy of XP in a virtual machine.
That being said while Microsoft did a very small update to clean things up in IE7 it still has numerous issues. You'll want to use an Internet Explorer Conditional Comment Style Sheet which I have a full tutorial on how to implement at my site here...
http://www.jabcreations.com/web/css/ieccss
Once you've implemented an IECCSS for IE7 you don't need to use any hacks, just position it for IE7 specifically.
That being said your page layout doesn't look like you need CSS level 2 positioning at all. Even IE 5.0 has respectable CSS level 1 support if you know how to do basic layouts correctly, but don't feel bad because besides my site I always see people jumping head-first in their tutorials to use position instead of float. So if you want much more stable CSS in general and limit positioning for SEO purposes I recommend reading my CSS level 1 tutorial here as well...
http://www.jabcreations.com/web/css/nested-divisible-elements
If you do that it will limit your need to use CSS level 2 position. With your layout the only thing I was use position for is to keep the content at the top of the body element and then put the menus below the content in the code...and then use position to visually put the menus where they are on the page. If you disable CSS (e.g. Firefox's Web Developer toolbar does this easily or Firefox --> View [menu] --> Page Style [menu] --> No Style) that is how a search engine sees your page.
Also you really should fix your header elements. You have two h4 and then several h2 elements. You want to think of your page like a newspaper, yours currently has nothing about winning the war using h1 but at the top of the front page the most important story is h4 saving a cat from a tree in a retirement home. Understanding the semantics of HTML can be a powerful tool in combination with search engines in getting more people to find your site because you've made it easier for the search engine to understand the semantics of your content.
I hope this helps and if you have any other questions feel free to ask.
Add style rule position:relative to wraper id main-wrap like
#main-wrap{
position:relative;
}
and the add the following CSS to the ".info-bg" div
.info-bg{
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
height: 600px; /* change according to your need */
box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);
}
Further you can check out this page to know how z-index property actually works - http://www.tutorialrepublic.com/css-tutorial/css-layers.php
I fixed the issue you highlighted in IE7. But I need you to see this gist https://gist.github.com/anonymous/6607075 and try it on your side.
It's quite hard to fix on my side because I don't have your Wordpress theme.
Anyway, with regards to the gist (https://gist.github.com/anonymous/6607075 )
For the css, look at the code at line 108. For the #info-wrapper
For the html, at line 94, I added a <div id="info-wrapper">
See if this fix the issue? If not, let me know in the comments.
--
Edit: You can download the files that I did test in IE7, here at wetransfer
You can put this on the section of your website:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This will disable the Compatibility mode and stop messing your site.
I am trying to resolve an issue with an image slider in IE9.
Please see http://betelec2.placeneuve.com/index.html
The same page is rendered using php at http://betelec2.placeneuve.com/index.php and it works fine, but the load time is slow, so the home page has been "recreated" using static content with the .html file extension.
The site is htpassword protected and the username and password are placeneuve and patali123 respectively.
The issue I am having is that in IE9, the slider is disregarding the list styles. It is displaying the images stacked one above the other (rather than in a row with overflow hidden) and it is using default unordered list styles (with bullets). Furthermore, it is ignoring the positioning of the text overlay. Finally, it is doing the same thing to the image thumbnails that appear below the slider.
If you look at the site in Chrome, FF or Safari, it works without a glitch.
IE9's developer tools are not very useful, at least for me, and I am a bit lost as to how to resolve this.
Unfortunately, I received this site from someone else who had concatenated and minified the CSS and didn't provide the original CSS, so finding the selectors is pain as well. However, the relevant CSS selectors start with .rg-ss-
Anyone able to assist would be most appreciated.
Use following:
.fatfooter2 ul li {
list-style: none outside none;
margin-bottom: 0;
display: inline; /* display inline should put your list items in line *\
}
After designing and coding a standards-compliant website, that works functionally in normal browsers (Firefox, Chrome, etc), I now need to make it look identical (or mostly so) in Internet Explorer, down to Internet Explorer 6.
The current version of the website can be found at http://www.adwas.org/test/redesign/, with a minimal version of the problem at http://jsfiddle.net/FdS6L/
The problem I'm having is that at and below the area with the logo, it absolutely breaks down in IE6 (and 7, I'm guessing, still). I've already attempted to fix some of the issues, using the star-hack selector, though it still looks heavily borked. My question is: how do I maintain the size of the header, and get the elements to be (somewhat, if not totally) visible, similar to how it looks in most browsers?
Note:
I'm not adverse to adding JavaScript for the layout to work as necessary in IE6. (applies mostly to the submenu navigation)
I was trying to work on your site, and got it to this point: http://jsfiddle.net/3m367/3/. I basically cleaned up some code and restructured the header, where the bars are full-width automatically rather than forcefully (overflow-x is a CSS3 property, so wouldn't work for older browsers). This displays fine in IE7 and up. However, I stumbled upon an issue with your navigation - IE6 supports :hover pseudo-class on a elements only, so selectors like li:hover wouldn't work. Yet, you cannot put your submenus inside parent menu item's a element because you cannot have links within links. I'm not sure if it's possible to do that drop-down menu in IE6 without using JavaScript. Other than that, the navigation seems to be the only thing messing up in IE6 right now.
Instead of using float: left on #sitenav li you could try:
#sitenav {
display: table;
}
#sitenav ul {
display: table-row;
}
#sitenav li {
display: table-cell;
}
You should also consider using conditional comments to hide a set of IE-only stylesheets from other browsers, especially a stylesheet targeting something as old and archane as IE6. If you don't get anything to work with bare CSS and conditional comments, you should consider trying HTML5 Shiv and do the markup with HTML5 (which I believe you should either way).
I display a world map by an img tag. I associate an image map with it to hyperlink some regions. I overlay a bordered box div indicating a certain region can be clicked and zoomed.
Now to show the user it does this I want the cursor to change to a magnifying glass shape. I looked through the web and found something that works in firefox and ie6-8:
#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }
Unfortunately opera,chrome and ie9 ignore it and show the default (i.e.: pointer). How can I use cross browser custom cursor icons?
The -moz- part of the -moz-zoom-in; means that it's for Mozilla only, to make it cross browser, you need all of the tags in the same id tag css:
#zoomregion:hover {
cursor: url('templates/test/styles/images/magnify.cur');
-webkit-zoom-in;
-moz-zoom-in;
-ie-zoom-in;
-ms-zoom-in;
-o-zoom-in;
}
-webkit- accounts for a lot of browsers, including mobile (which, for this use, it's probably not needed) which is very useful and shortens things a lot.