I have a button and it renders weird in Firefox (I'm testing various versions, but I've see it in all of it). For more details, I use Normalize.css.
After several tests, the only difference between the PC with the issue and the PC with the correct behaviour is the graphic card.
Also, the issue differs depending the page you're seeing (the button is in various pages).
Here you can see a few screenshots in different PCs:
I have made a testcase in jsFiddle: http://jsfiddle.net/5R2NL/1/
Here's the HTML:
<div class="botonVerdeenlace">
<a title="Title" href="#">I feel like a button</a>
</div>
And the relevant CSS:
body{font-size:68.75%}
.botonVerdeenlace {
background: url("http://i.imgur.com/lk4ZJxQ.png") no-repeat scroll left center rgba(0, 0, 0, 0);
display: inline-block;
font-weight: normal;
margin: 0;
padding: 8px 2px 7px 29px;
}
.botonVerdeenlace a, .botonVerdeenlace a:visited {
background: url("http://i.imgur.com/2IgIR37.png") no-repeat scroll right center rgba(0, 0, 0, 0);
border: medium none;
color: #FFFFFF !important;
font-family: Arial,sans-serif;
font-size: 1.1em;
font-weight: normal;
margin: 0;
padding: 8px 1em 7px 7px;
text-align: center;
text-decoration: none;
}
What is causing that issue? It's certanly the video-card?
Is there any way to fix this issue without screw the design for other
users?
EDIT: I try the suggestion from Nico O, and the hardware acceleration doesn't seems to have any influence in the rendering.
EDIT2: Use css3 is not an option, because there are A LOT of buttons in the web. If this is the only solution the client will prefer to leave it "bad".
Maybe it's "Hardware Acceleration (GPU Rendering)" fault. You can disable this on options and test again but you are better served using CSS3.
But my client wants IE7: declare on CSS your normal button that works on IE7 than make a media query that works for any resolution with your CSS3 button, that way the button still nice on IE7 and works pretty well on firefox.
Related
I'm trying to understand the accessibility styles from the theme, but they seem pretty overkill to me. Can someone please explain to me the reason for each line or group of lines so I can decide what is needed for my usage.
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
-wrap: normal !important;
/* Many screen reader and browser combinations announce broken
words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
The .screen-reader-text class is for adding non-visual text (you can't see it) but the text is still in the DOM so that screen readers can access it. You use it to add extra text for screen readers. For example, if you had something like this:
<p>we sell cool stuff</p>
read more
The sighted user knows that "read more" refers to reading more about cool stuff. But a screen reader user, if they tab to the link, or if they bring up a dialog that shows all the links on the page, they'll just hear "read more". They'll be thinking, "read more about what?".
You can fix that by adding non-visual text such as:
<p>we sell cool stuff</p>
read more <span class="screen-reader-text">about cool stuff</span>
Now when the screen reader moves to the link, they'll hear "read more about cool stuff" but you won't see "about cool stuff" anywhere on the page.
Lots of third party libraries have a class such as this. For example, What is sr-only in Bootstrap 3?
As far as what each individual CSS property does, you can look that up. All of those properties are needed to get the "hidden" text to work across all browsers (firefox, ie, chrome, safari), screen readers (jaws, nvda, voiceover, talkback), and os's (pc, mac, ios, android). If you leave one of the properties out, it might work on the platform you're testing on but could break with a different combination.
.screen-reader-text applies to object you want to hide visually from screen but still render with a screen reader.
The different lines are different means of hiding the text while still making it readable by a screenreader.
The .screen-reader-text:focus will reverse the precedent style in order to make visible any object which has been focused with the screenreader, when the element is focused with the keyboard.
However, hiding text for screenreaders has to be considered a bad habit as screenreader users may also be sighted users (aphasic, paralytic, people with low vision) and those people may use a mouse or eye tracking devices, ...
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons
IE6,7 are givimg me grieves on browser display. I didnt have prblems with Safari nor FF.
I'm not a CSS expert and in need of advice for this column alignment issues on IE.
And I don't know where to begin because I've tried messing around with the css files and the css browser selector javascript and still I can't get it to work on IE.
The problems I believe center around id doc, bd, yui-main, yui-b, box and box-titles.
For unclear reasons, the sizes show differently in IE from other better browsers.
The sizes width and height values are different.
<body>
<div id="doc" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id="header" class="yui-g">
<a href="index.php">
:
:
unfortunately, the 2 css files are a little overwhelming over me to understand.
I tried pasting it here but the format got out of whacked.
Could someone lend a helping hand ?
Any help is appreciated.
app.css
body {
font-size: 85%;
font-family: "georgia";
}
.yui-t2, #bd, #yui-main {
z-index: -5;
}
.yui-b, .yui-g {
z-index: auto;
}
div.yui-b div.box {
color: #333333;
border: 1px solid #c6e1ec; /* this controls the left boxes on front page */
margin-top: 15px;
}
div.yui-b div p.box-title {
/* background: #0590C7;
border-bottom: 2px solid #c6e1ec; */
background: #6f6f6f;
border-bottom: 2px solid #c6e1ec;
color: #FFFFFF;
display: block;
font-size: 93%;
font-weight: bold;
margin: 1px;
padding: 2px 10px;
}
div.yui-b div ul {
margin: 0;
}
div.yui-b div ul li {
border-bottom: 0px solid #fff;
list-style-type: none;
}
div.yui-b div ul li a {
color: #333333;
display: block;
text-decoration: none;
padding: 3px 10px;
}
div.yui-b div ul li a:hover {
background: #c6e1ec;
color: #333333;
}
grids-min.css
body
{text-align:center;}
#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}
.yui-b{position:relative;}
.yui-b{_position:static;}
#yui-main .yui-b{position:static;}
#yui-main
{width:100%;}
.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
{float:right;margin-left:-25em;}
.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
{float:left;margin-right:-25em;}
:
:
more but format is bad over here at stackoverflow to make it readable.
I apologise for I don't wish to come across in this post as unhelpful or rude.
Sincerely
This is a useful resource for dealing with ie6 generally
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
There are many many possible IE6/7 issues. Particularly IE6.
First thing to check is does your HTML code include a valid <!DOCTYPE> declaration? If not, your page will go into quirks mode, which will make all versions of IE (but IE6 in particular) go nuts. Quirks mode is effectively an IE5 compatibility mode. It is badly broken, so make sure you have a doctype.
Second thing to do is read up on some of the IE issues that may be giving you problems, and on browser support for some of the features you may be using. There's a very good website called (appropriately enough) Quirksmode.org which has a comprehensive set of compatibility tables for a wide range of browser features.
The following sites may also help:
http://haslayout.net/css/index
http://css-class.com/test/bugs/ie/ie-bugs.htm
http://positioniseverything.net/explorer.html
Google is your friend here too. ;-)
Next tip, try to narrow down your problem. Strip out the bits that are working until you end up with a page that demonstrates the problem with the minimum of other stuff getting in the way. Save that example to a site like JSFiddle. It'll be easier to work out the issue if you know exactly what the issue is.
Finally, if the remaining issues are minor display glitches that don't prevent the page being used, you should give yourself permission to simply ignore them. The market share for both IE6 and 7 has been dropping rapidly over the last year, and will continue falling. There's very little to be gained by spending too much time sweating over minor issues in these browsers.
See here for up-to-date browser usage stats: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011
(obviously if your site has significantly different demographics, you may need to pay more attention to IE6 and 7, but if that's the case you'll know already)
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.