How can I hide an HTML form legend from visual browsers, using CSS, in an accessible way?
legend { display: none; }
is not an option because, as I understand it, this will 'hide' the legend from screen readers. Other attempts I've made do not remove the legend from the layout - i.e. it continues to take up space.
Added as an answer instead of a comment so I can get more points. :-)
If you really want legends, have you tried putting a span inside the legend and positioning/manipulating that?
I understand this works in IE7 and Firefox...
You can't do this in Firefox because it is a bug in the browser.
You can read more here
Browser Bugs
Updated with replacement for -9999px hack ( http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ) :
HTML:
<legend><span>Your description</span></legend>
CSS:
legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
For what it's worth - and I'm sure I'll get flamed for this - legend tags are one of the few places I deliberately break the spec by leaving them out. I replace them with a heading of the appropriate level which provides the same information to the user but without the browser bugs.
(I'm happy to hear about the real-world downsides of this if anybody can see some)
edit: Oh and you should ask yourself why assistive technology users would want to hear the legends when your browser using users don't. If the answer is simply to satisfy the HTML specs, use display:none and be done with it - don't hinder the user experience of one group by providing useless information just for a formality.
Solved and tested in IE7, IE8, IE9, FF, Opera, Safari and Chrome. The legend will be read from screen readers, and users will not see it:
<legend><span class="accessibility">Your description</span></legend>
and then, in CSS:
legend span.accessibility {
position:absolute;
left:-9999px;
width:100px;
height:auto;
overflow:hidden;
}
Yes, there's something special about it. It's a replaced element like many form elements. Browsers have a very specific default formatting. Moreover it can't be forced to behave like a regular element using display:block or display:inline, causing attempts to override with CSS to ... not work well.
There are some well documented techniques that can help you accomplish SOME effects with legends, though workarounds are necessary for a semblance of cross-browser compatibility.
http://www.tyssendesign.com.au/articles/css/legends-of-style/ ...
Also see the revised version posted a year or so later.
Many versions of Firefox specifically ignore both display:none and absolute positioning.
You could try:
legend
{
position: absolute;
top: -1000px;
}
I know this is 2 years too late, but using visibility: hidden seems to work 'in an accessible way' in FF.
You can use a combination of visibility and position rules, see below:
legend {
visibility: hidden;
position: absolute;
}
Related
I am trying to obtain a dashed table border, which has rounded edges (using border-radius). I have achieved this in all other browsers, but I know it is a bug in Firefox, and will never display properly. See the problem I have here.
I am wondering if it was possible to have Firefox alone displaying a solid line, rather than a dashed line, whilst leaving the other browsers to display a dashed one.
Essentially,
If Firefox,
border: 2px solid #000000;
-moz-border-radius:10px;
If any other browser,
border: 2px dashed #000000;
-webkit-border-radius:10px;
border-radius:10px;
I am fairly new to CSS and haven't dealt with browser specifics yet. If anyone could help (or point out problems to this method!) then I would be very grateful.
Thanks
If FireFox is bugging out, it may be worth going down the route of images for firefox.
You could have some classes:
.tr, .tl, .br, .bl {
display: none; /* Don't show for normal browsers. */
}
#-moz-document url-prefix() { /* Activate for FF. */
div { /* Probably best to tie this to a class / id. */
position: relative;
}
.tr, .tl, .br, .bl {
display: inline;
position: absolute;
}
.tr { /* top right */
background-image: url("curved_top_right.gif");
top: 0;
right: 0;
}
.tl {} /* top left - Use .tr as a ref */
.bl {} /* bottom left - Use .tr as a ref */
.br {} /* bottom right. - Use .tr as a ref */
}
Then in your Html
<div>
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
</div>
Not ideal but might help you as FF is bugged.
You can do this a few different ways.
You could add a conditional stylesheet for firefox. This is a little overkill for just a couple styles.
You could use a CSS hack. This is not the best method since it relies on a browser bug (that could be fixed).
You could use a javascript or PHP function to parse the user-agent and append the os, browser, and version to the body or html tags as classes. Then you can write the styles with the correct class.
You could submit a bug report and pray.
Hope this helps! Good luck!
The short answer is no, that's not really possible.
The ideal solution is for Firefox to fix the problem and the issue to just go away. It looks like a fairly obvious problem, so I would assume that the Mozilla team know about it; it might be worth your time checking the Firefox issue tracker to see if they've got a ticket for it and whether it's had any work done on it. Given their rapid release cycle, there's a chance it may be fixed relatively soon, you should check this -- one thing you don't want to do is spend ages fixing your site to work around it, only to find it's a non-issue by the time you've done the work.
Having said that, the effect does appear to be deliberate by the browser: I recall that earlier versions of Firefox did show dots on rounded corners, so there may be some sensible reasoning behind it. I agree it's not ideal though. But if it's a standard feature of the browser, why not just run with it and let Firefox users have it the way Firefox wants to show it? (it doesn't look that bad, does it?)
On the flip side, of course, a question that might be asked is that if you're happy to have a solid border for Firefox users, why not just make it solid for everyone? That would seem to be the simplest answer.
Assuming you do still want to resolve it, in terms of work-arounds, I would strongly advise you to shy away from browser hacks or user agent parsing; both these solutions are brittle and could lead to problems. Obviously, in this case, the worst that is likely happen is the wrong border being shown, but nevertheless, you should be wary of both techniques.
One suggestion would be to try out border-image instead of border-radius.
border-image is a relatively new and little-used CSS feature, which allows you to construct your borders using images. (you'd never guess from the name, right?)
The beauty of border-image is that you can do pretty much anything you like with your border. If you want a specific dotted pattern, then just create an image with that pattern of dots; problem solved.
The syntax is a bit fiddly, and it works best with SVG images, but I'm sure you'll get it after a bit of experimentation.
As you can probably tell, it's a very powerful feature. The main reason it's little-used is because it's new. This means it doesn't have great browser support, but for you that really shouldn't matter because you'll be drawing borders that look relatively close to the standard border-radius effect, and you can use the standard border-radius as a fall-back. The one browser that you do want to affect (Firefox) does have support for it, so it should solve the problem.
Yes, I agree, it's a slightly complicated answer to a simple question, but it may be a way to make it work reasonably consistently across all browsers. Worth a try anyway.
Demo
http://people.mywot.com/dean/tour/ie6test.html
I have narrowed down this problem into the test case above. You'll spot it right away if you load it up in IE6.
The problem
When hovering over the anchor in IE6, all descendent elements which are meant to become visible become visible, but as soon as you hover out, all styling remains but the text disappears. This results in a "ghost box" and quite an interesting (but undesired effect).
I've searched for a few hours this morning to try and find out which IE6 bug this is, but I'm out of ideas.
P.S. Ignore the transparency of the PNG's. I just haven't included the pngfix on this demo.
Hover states in IE6 have some silly bugs unfortunately.
http://reference.sitepoint.com/css/pseudoclass-hover covers most of them which should allow you to experiment with what might be wrong.
EDIT: You may have to resort to javascript to overcome this one unfortunately.
Some commenters are forgetting that there are a number of clients (eg: UK local government) that still almost exclusively use IE6. Pity those of us who have to still ensure it is taken into consideration!
Yes, 100% of webmaster hate the devil IE6, but we're here to answer the question, not to discuss how bad IE6 is, right?
And for the question, this is my answer : (Edited line 42 & 43 in your demo code)
...
.screenshot a.bubble .description { position: absolute; min-width: 200px; bottom: -8px; background: none; display: none;
}
.screenshot a.bubble:hover .description { display: inline; background: #efefef; }
...
I don't know how, but IE6 cannot hide the div with css property "background" not set to "none". That's all what cause the problem. Anyway, I hate IE6.
I have the following code:
.taglist li{
display: inline;
}
.taglist li:after {
content: ", ";
}
.taglist li:last-child:after {
content:"";
}
it takes an unordered list of tags and makes it into a nice comma separated list. Of course in IE7 and earlier there is no space between the list. I'm wondering if anyone has any ideas on how to still use the list technique, but have it not look horrible in older versions of IE.? I tried also adding some margin-right to the li, but it pushed some of the text out of its container and caused it to wrap in very strange ways.
It might not be practical to do this, but it struck me as the most semantic way.
Of course in IE7 and earlier there is no space between the list. I'm
wondering if anyone has any ideas on how to still use the list
technique, but have it not look horrible in older versions of IE.?
If just adding a small gap after each li in only IE7 and lower is good enough, use this:
.taglist li{
display: inline;
*padding-right: 6px; /* adjust to taste */
}
You can try ie7-js, maybe it helps. If you really care, and ie7-js doesn't work, you can write your own script to fix stuff by inserting text nodes for IE7 via JavaScript.
The best is to keep the HTML good, and try to fix stuff using JavaScript for broken browsers like IE7.
I have a JQ slideshow in a div on this page:
http://www.lucky-seed.com/web.html
and have a css sheet for IE with the following style:
.slideshow { height: 599px; width: 700px;
max-width: 700px
margin-top: 00px;
margin-left: 295px;
float:left;
position: relative;
display: inline;}
Where am I going wrong? It looks great in everything but IE, but once in IE, I can't seem to move the position around no matter what I do.
Thanks in advance for your insights.
Hello fellow Pittsburgher :P
You've got so many different, conflicting styles going on there. While it's not a specific answer, might I suggest using a CSS framework like Blueprint ( http://www.blueprintcss.org/ ) to better manage your columns with greater simplicity and let it worry about IE compatibility. Rolling columns yourself is usually unnecessary these days.
In ieweb.css, try changing the margin-top on .slidenav to 50px, instead of -20px.
That moves the arrows to approximately the same place that they are in Firefox.
It might be an idea to scrap the IE specific stylesheets and do them again if need be. If you remember your question from yesterday, you had a weird issue with comments. Those comments were causing parsing errors on your pages for IE, so I imagine a lot of the "fixes" in your IE stylesheets are no longer required now you've sorted those comments.
I am having a hard time figuring out why things look so different in IE and Firefox.
Here is a CSS class
.logo { width: 224px; height: 120px; position: relative;
display:block; left: -1px; background-image: url(logo.png);}
In IE this works as expected, but in Firefox it behaves like a drunk! I see 3 logo.png at different places on a page. If I remove display:block then I cannot see the image in either browser.
Any comments appreciated.
You might need to add
background-repeat: none;
to your css class. And for future reference, it's always IE that screws up ;)
EDIT: If that doesn't solve your problem, please put up a sample site live somewhere we can look at it and experiment a little. Also, Firebug might be helpful.
EDIT2: Removed this, since I noted the difference between firebug and the src I got from right-clicking and selecting "View Source..."
EDIT3: Steve found your problem: You can't self-close anchors. Change
<a href="/" id="logo" />
to
Your problem is in the HTML. You can't can't self close A tags
Correct, the problem is always IE. If firefox has an issue it's usually an issue with the w3c specs. Not being a fanboy, it's just the way things are.
I guessing your problem is that the default value for background-repeat is different between the browsers. You should try setting background-repeat:no-repeat EDIT: Maybe not, all browsers default to repeat.
It would be useful to know what element you are applying logo to. Whatever it is is probably collapsing to a height of 0px when not a block. Put a border on it to see what's going on there.