For some strange reason my reCaptcha container block appears to be broken. I suspect it could be a style I set which it does not like, but for the life of me I cannot figure out what it is.
The link to the project is http://www.nbwindscreenrepairs.com/keytosuccess/
You will notice that the individual blocks appear to be shifted.
Any ideas?
Answer from another forum:
span#recaptcha_privacy {
display:none;
}
which removes the link to this page: http://www.google.com/intl/en/policies/
Please try this:
.recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r7_c1 {
background-position-x: -43px;
background-position-y: -52px;
height: 5px;
}
img#recaptcha_reload, img#recaptcha_whatsthis_btn {
height: 17px !important;
}
img#recaptcha_switch_audio {
height: 18px !important;
}
Preserve the !important to override the inline style.
Here is the result:
Don't really remember the source of this code. But it resolved the problem.
<style type="text/css">
#recaptcha_area input[type="text"] {
display: inline-block;
height: auto;
}
</style>
Place in the file where recaptcha present.
Hope it helps.
Though I am late to the party , Here's wat worked for me,The code below solved my issue
<style type="text/css">
.recaptchatable .recaptcha_input_area #recaptcha_response_field{
margin: 0 !important;
top: 12px !important;
padding: 2px !important;
}
</style>
Related
I'm implementing a JSF component base where you must override the css being used or it will use its default css. I'm trying trying to hide the div and I've tried to set the rich-panelbar-header-act class style="display:none", but then it pulls in its default css. Is there any way to add a style attribute to rich-panelbar-header-act (since I have to implement the class) that hides the div? I've included my css and html below
CSS:
element.style {
}
Matched CSS Rules
.rich-panelbar-header-act {
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html);
background-position: top left;
background-repeat: repeat-x;
vertical-align: middle;
color: #FFF;
background-color: #555;
font-size: 11px;
font-weight: bold;
font-family: Arial,Verdana,sans-serif;
}
.rich-panelbar-header-act {
border: 0 solid red;
padding: 0 1px 1px 5px;
cursor: pointer;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body.browserChrome.browserChrome2
body {
font: 12px/17px Helvetica, Arial, Verdana;
}
HTML:
<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none">
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";">
Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only
give you access to the managed bean facility, Ajax4jsf advantages the action and value
change listeners as well as invokes server-side validators and converters during the
AJAX request-response cycle.</td></tr></tbody></table></div></div>
</div>
</body>
</html>
width: 0; height: 0;
or
visibility: hidden;
or
opacity: 0;
or
position: absolute; top: -9999px; left: -9999px;
or just
display: none !important;
I suppose visibility:hidden; will help you. :)
This works for me..
!important can't be used in amp version so instead of display:none; use this:
position: absolute; top: -9999px; left: -9999px;
Use !important to stop it getting overridden -
.rich-panelbar-header-act {
display:none !important;
}
Also you can use JavaScript as a back up -
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('DIVIDNAME').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.DIVIDNAME.display = 'hidden';
}else { // IE 4
document.all.DIVIDNAME.style.display = 'none';
}}}
</script>
You can do this in 2 ways:
Using more attributes
You can simply just use this: [edit: Add all possible]
display: none!important;visibility: hidden!important;position: absolute!important; top: -9999px!important; left: -9999px !important;opacity: 0 !important;width: 0 !important; height: 0!important;filter: blur(10000px)!important;pointer-events: none!important;
This solution is the one I recommend most
Using the !important element
display:none!important
This question has already been answered, though the original answer has a couple flaws that I see... while they get the element visually off the screen, web accessibility guidelines suggest not using a couple of them.
To provide a simpler, better answer, visibilty: hidden; would be an option, though if you need the space that element was inhabiting, display: none !important; would be your best option. The tag !important should override other CSS elements that are acting on that <div>.
As stated above, simple moving the element visually off the page (e.g. position: absolute; top: -9999px; left: -9999px;) is not considered best practice per web accessibility guidelines as most e-readers will still read whatever text you have in the element, and keyboard users will potentially be able to navigate to that element, even though it is located 'off the screen'.
I normally use display: none !important if I have other CSS classes acting on an element that I need hidden.
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding​ style.
I'm at a total loss on why I can't align the Search box to the left
The Search and RSS feed align on the test page:
http://scottjaxon.com/devsite/testnivo48.html
As it is on the home page (with a pic instead of nivo slider)
http://scottjaxon.com/devsite/index.html
I don't get it. I gotta be missing the smallest thing!
#wrapper #user1 #feahome #searchhome {
float: right;
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Or is it something with the NivoSlider CSS?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
Your index.html and testnivo48.html have different dom structures.
In index.html, the feahome div tag is the parent of rsshome and searchhome div tags; but in the testnivo48.html, they are all on the same level.
That's why the following css rule (in http://scottjaxon.com/devsite/css/style.css) gets applied on index.html, but ignored in testnivo48.html
#wrapper #user1 #feahome #searchhome {
...
}
After you fix the html, your problem might get solved.
I was looking at the CSS for both and the only thing I saw that was different in your
CSS compared to the CSS for http://scottjaxon.com/devsite/index.html is this:
#wrapper #user1 #feahome #searchhome {
float: LEFT; // the working version has it floated left as well
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Give it a shot and see if that works.
It may be a prioritizing problem. Using div#searchhome will give it a higher priority.
The html is:
<div class="choose-os">
<p>
Microsoft Windows
Apple Mac OS
</p>
</div>
The CSS is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
}
.choose-os p {
margin: 0;
}
.choose-os p a {
display: inline-block;
text-indent: -100000px;
height: 56px;
width: 308px;
}
.choose-os p a.windows {
background: url(../images/button-windows-bg.png) 0 0;
}
.choose-os p a.macos {
background: url(../images/button-macos-bg.png) 0 0;
}
.choose-os p a:hover {
background-position: 0 -56px;
}
Any suggestions would be greatly appreciated as to have the background image also appear on IE7.
The text-indent: -100000px; in combination with inline-block is what's causing the two elements to not be visible in IE7, due to a bug.
You need to find some other way to hide the text for IE7 (or not use inline-block at all, see below for this more suitable fix).
Options include the method in the comment by #Sotiris, or:
.choose-os p a {
display: inline-block;
height: 56px;
width: 308px;
text-indent: -100000px;
/* for ie7 */
*text-indent: 0;
*font-size: 0;
*line-height: 0
}
Which uses the *property: value hack several times to hide the text in IE7.
The problem does seem to be related to the use of display: inline-block.
So, another workaround (which I prefer to my previous one) is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
overflow: hidden
}
.choose-os p a {
float: left;
margin-right: 4px;
text-indent: -100000px;
height: 56px;
width: 308px;
}
To display inline-block properly in IE7, add the following styles to .choose-os p a
zoom:1
*display:inline
(The star is important! It's ignored by modern browsers, but not IE6/7)
IE7 doesn't respect inline-block, so you have to do a little magic to make it work. There's a great description here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
[edit] If text-indent is also part of the culprit, you may be better of sticking with display:block and setting float:left on your elements. Probably multiple valid paths to take :)
IE7 has some serious limitations in CSS. I would recommend avoiding the shorthand notation and explicitly declaring each property, then validate the CSS sheet here.
Im using hyperlinks as a image, well a background image so that I can do a image swap eaisly with a:hover.
I have the following:
<a class="cross" href='#'></a>
And the following css
a.cross {
background:transparent url(/images/cross-grey.png) no-repeat scroll 0 0;
float: right;
border: none;
width: 19px;
height: 19px;
display: block;
}
a:hover.cross {
background-position: 0 20px;
}
This works fine in Firefox but not in IE6. Is this a issue with IE6 and a simple css fix or is there a better way of implementing what I am doing. Thanks.
Change:
a:hover.cross { }
To:
a.cross:hover { }
I think you should deal the a:hover.cross with javascript.
Regards.