Don't really want to blame mozilla on this one, i'm sure it could be me doing something silly but the page at:
www. neverMindFixed .com
the presentation will work fine on other browsers, just not the latest firefox. anyone clued up on this?
Thanks!
Si
Okay, firstly, your CSS is a mess. Secondly, there's this declaration:
#faq-bb li { list-style-image:url(/display_images/stonewall/faq_bullet.gif; list-style-type: none; margin: -2px; padding: 0px; visible:false;}
Note the very important missing second ) around the URL. Looks like FF 3.6 is a bit more picky.
You have visible:false; -- "false" is not valid value. You either mean visibility: collapse;, but that likely has poor support in older browsers, or the old standby display: none;.
Please validate your CSS.
There are a lot of validation errors on the page, which could be causing problems. These ones sound most important:
document type does not allow element "script" here; assuming missing "head" start-tag
document type does not allow element "head" here
document type does not allow element "body" here
ID "search" already defined
...plus a bunch of errors from the Javascript (check your CDATA definitions)
Also as Anonymous pointed out, there are CSS errors. There is no property visible - I'm guessing you want visibility: hidden. But I'm positive you don't need so many things hidden.
For me also, your website is working on Firefox 3.5 and on Chrome, but Firefox 3.6 has problems. Your presentation is working, but the
<span class="hidden"> .... </span>
tags are showing up instead of remaining hidden.
Why are those tags there?
If you want to keep them, you probably want to clean up your definition of the "hidden" class, like Anonymous says, you cannot specify "visible: false". Remove it, and then validate the rest of your CSS and HTML. There are really a lot of errors.
Related
I thought:
.eventfuture
{
display: none !important;
}
Which is a very simple CSS class, ought to completely hide the text?
I apply the above to a paragraph class:
<p class="eventfuture">Text Here ABC</p>
What happens is that "Text Here ABC" is 100% hidden on the client side of the browser (good) but still present in the source code (bad).
Is this normal behaviour? I am sure it is not.
I don't want "Text Here ABC" to be indexed by search engines hence why I would like it completely hidden.
Any ideas what it is that I might be doing wrong?
Thanks
What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.
However, if you want that part of your source code not to be indexed by google you can use:
<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>
But still some articles say this works and some say it doesn't.
I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.
IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.
I don't think any css would achieve what you're describing.
display: none
Just visually hides the element that it's styling.
If you want to remove the contents from the document you should use javascript and modify the text/innerhtml from there. An example would be:
document.getElementByClass("eventfuture")[0].innerHTML = "";
What display: none; does is not to hide the element from the DOM. It simply hides it from the user and search engines can still index it. Probably you should hide it from the server.
EDIT
To remove the element from the DOM entirely, this might be a fix:
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);
Real code snippet
Check w3schools tutorial on display none
I have a button
<button class="close"></button>
With this css
button.close {
font-size: 14px;
}
button.close::-ms-clear {
display: none;
}
But i cant make the ms clear work. What is wrong?
from the developer.mozilla.org
Non-standard
This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
-ms-clear can only be applied on an input with type text. It is non-standard and only works in IE 10, 11 and Edge.
This pseudo-element is used to modify a little button which is visible by default to clear input boxes. You can see it working here, if you have an edge browser. Just click into the textbox and write something and a little cross will appear on the right side of the input box.
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 *\
}
Where am i doing wrong?
This is the normal print preview:
But I want to see this picture (without dragging margin arrows)
This is the css codes and preview:
Yes. It is possible to alter your margins in a page printout. The rule would look like:
#page {
margin: 0;
}
This will not work in Firefox as of now. If you check their developer reference on the #page CSS support, you can see what browsers do support #page.
The best you can do is set #page margins. Keep in mind, however, that you can and most likely will be overruled if you set margins to 0.
Thanks ! works well on chrome
#page {
margin: 0;
}
I don't think it is actually possible to do this, because you'd be overruling the defaults on the user's computer. As far as I know, a web application doesn't have the access rights to alter something like printer settings without some kind of ActiveX script in IE.
I had a similar problem a while back, and ended up having to generate a PDF on the fly using TCPDF. In the end that worked out better, because you have greater control over the layout.
I'm prevented from upgrading a computer from Windows XP to something more recent, so basically I'm stuck with IE8.
I found that on IE8, page margins will always be a minimum of 6.01mm left and right, and 5mm top and bottom. No matter what I do, even using #top-left right and centre rules inside the #page rule, it will still default to the values above.
It may be easier to create the stylesheet to take into consideration this limitation on the print size.
It may also help to put the IE hack \9 in front of the CSS class property value, duplicating the property may also help in some cases, (but won't affect the margins of the page), such as:
.aDiv {
margin: 10mm;
margin: 15mm\9; //this \9 hack will set that value only on IE8.
}
I know there are other hacks similar to this, such as \0 but I admit don't fully understand them. \9 works for me in IE8 in some situations.
Is there any way with CSS to target all inputs based on their type? I have a disabled class I use on various disabled form elements, and I'm setting the background color for text boxes, but I don't want my checkboxes to get that color.
I know I can do this with seperate classes but I'd rather use CSS if possible. I'm sure, I can set this in javascript but again looking for CSS.
I'm targeting IE7+. So i don't think I can use CSS3.
Edit
With CSS3 I would be able to do something like?
INPUT[type='text']:disabled that would be even better get rid of my class altogether...
Edit
Ok thanks for the help! So here's a selector which modifies all textboxes and areas which have been disabled without requiring setting any classes, when I started this question I never thought this was possible...
INPUT[disabled][type='text'], TEXTAREA[disabled]
{
background-color: Silver;
}
This works in IE7
Yes. IE7+ supports attribute selectors:
input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]
Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.
Other safe (IE7+) selectors are:
Parent > child that has: p > span { font-weight: bold; }
Preceded by ~ element which is: span ~ span { color: blue; }
Which for <p><span/><span/></p> would effectively give you:
<p>
<span style="font-weight: bold;">
<span style="font-weight: bold; color: blue;">
</p>
Further reading:
Browser CSS compatibility on quirksmode.com
I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.
Sadly the other posters are correct that you're
...actually as corrected by kRON, you are ok with your IE7 and a strict doc, but most of us with IE6 requirements are reduced to JS or class references for this, but it is a CSS2 property, just one without sufficient support from IE^h^h browsers.
Out of completeness, the type selector is - similar to xpath - of the form [attribute=value] but many interesting variants exist. It will be quite powerful when it's available, good thing to keep in your head for IE8.
w3 reference
browser support reference
You can do this with jQuery. Using their selectors, you can select by attributes, such as type. This does, however, require that your users have Javascript turned on, and an additional file to download, but if it works...
Sorry, the short answer is no. CSS (2.1) will only mark up the elements of a DOM, not their attributes. You'd have to apply a specific class to each input.
Bummer I know, because that would be incredibly useful.
I know you've said you'd prefer CSS over JavaScript, but you should still consider using jQuery. It provides a very clean and elegant way of adding styles to DOM elements based on attributes.