RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.
applying georgia to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle http://jsfiddle.net/mvivekc/GJaDy
the code is--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
font-family: Georgia;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
zoom: 1;
}
.georgiaWithoutTransform{
font-family: Georgia;
margin-top: 30px;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
}
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>
Cant understand why this is happening and badly need a workaround for this problem.
Here's a screen shot of the problem on IE8 --
Same happens on the fiddle as well.. problem is seen only on IE,not sure why..
Please help,
Thanks in advance
I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.
P.S : using an image as a workaround did work like a charm for me.
IE Filter Antialiasing problem
Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.
Related
I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.
This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.
This is how the Cardiff font is being displayed
If I then change the font to Helvetica, this is how it's displayed
I've tried a few things already:
Wrapping the font in a span tag, then styling this as a block and giving it a height
I've also tried a solution provided in another question
Updated...
Using fixes provided by #touko I've put together a solution that isn't really what I wanted to settle for but it works.
I've used a border for Firefox and regular text-decoration for other browsers.
h2 {
text-decoration: underline;
}
Firefox specific CSS styling as explained on this solution...
#-moz-document url-prefix() {
h2 {
text-decoration: none;
display: inline;
border-bottom: 1px solid #4c2f04;
padding-bottom: 6px;
}
}
I hope someone finds a better solution than this though because it's more of a bodge job if anything.
Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.
Just dont use vertical-align: middle
The similar problem is here: Link underline appearing above text in Firefox?
But looks like your problem is with a font itself.
I do not recommend to do a hack like border under the text. Search for other font.
body {
font-family: Cardiff;
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
Demo text
</body>
</html>
You could use border-bottom as underline and set the space below to desirable with padding.
yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}
I'm using Compass to create webpage CSS styles. I wanna use CSS3 features like border-radius and linear-gradient but Internet Explorer refuses to cooperate.
I coded it this way:
$pie-behavior: url("../stylesheets/PIE.htc");
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink').
$pie-base-class: pie-base;
.pie-base {
#include pie-element(relative);
}
body {
#include pie;
#include background(
image-url('header_background.png') no-repeat top center,
linear-gradient(top center,
$bg-gradient-start, $bg-gradient-stop
) no-repeat,
image-url('wavy-white.jpg')
);
}
What's wrong with it?
My test methodology would be:
1/ Is PIE.htc found by IE? PIE documentation states that:
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
In order to verify if the directory indicated in your Compass file is OK, you can add an image in the same directory and try to display it as an HTML image, something like:
<body><div>
<img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400">
</div></body>
It should then be clear if this directory is the good one or not :)
2/ Then try some simple CSS rule with no Compass code, in order to avoid problems that could be caused by Compass and not involving PIE. Example :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>PIE and border-radius</title>
<style type="text/css">
p {
width: 400px;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
color: yellow;
background-color: darkgreen;
border-radius: 5px 6px 7px 8px;
pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */
behavior: url(***/PIE.htc);
</style>
</head>
<body>
<p>this paragraph should be rounded in lesser IE</p>
</body>
</html>
3/ Add other CSS3 instructions one by one, still in CSS with no Compass code. background won't be parsed by PIE, you must use -pie-background (not sure if your Compass generates that?).
First a simple linear gradient with no multiple background:
p {
/* (...) */
-pie-background: linear-gradient(#F44, #400); /*PIE*/
/* (...) */
}
Then multiple background:
p {
/* (...) */
-pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
url(***/repeating_image2.png) left top repeat,
darkgreen;
/* (...) */
}
and finally a mix:
p {
/* (...) */
-pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
linear-gradient(#F44, #400),
darkgreen;
/* (...) */
}
BTW, is your multibackground successfully displayed on Firefox and webkit browsers with -moz-linear-gradient and so on? The generator from Colorzilla can help you with all this prefixes (and for the next step with Compass, it happens to support its format via "switch to scss", in case you didn't already know).
4/ Then add variables and scss code in your Compass file. I can't help you there, I use LESS or plain CSS. You should check the generated CSS against your Compass code: does the latter generate the CSS you intended it to generate?
I have found that cssPIE is tricky to work with. When I set it up, I used the js implementation instead of the htc implementation:
<!--[if lte IE 8 ]>
<script src="/js/libs/PIE.js" type="text/javascript"></script>
<![endif]-->
Here is my real world example: http://www2.highpoint.edu/
Have you tried adding a proper MIME type in your .htaccess ?
Like so :
AddType text/x-component htc
I've found that cssPIE don't understand rgba values so my idea of making gradient from colour to transparent shouldn't work :/ Also IE don't understand inline SVG in CSS styles so even that feature isn't working. So only way is to make another style for IE and delete gradients from all gradiented elements :/
Does someone know why there is a margin (about 1px) around the button background-image, only in Internet Explorer ?
Try this code in IE vs Firefox :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type='text/css'>
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
}
</style>
</head>
<body>
<button>LOL</button>
</body>
</html>
Here is how it is displayed on my computer in IE9 (in big size) :
Notice : If I remove the (black) border, the margin disappears.
Thanks.
Differnet browsers have different definitions of the button tag (and other tags). In fact, Chrome have a margin of 2px. You can easily solved it by making margin explicit:
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
margin: 0; /* or ex 1px */
}
Update:
I think it is the font-family (or the rendering of it) which is different, try:
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
/* To get it exact */
margin: 0; /* or ex 1px */
padding: 0; /* or ex 1px */
font-family: Consolas;
}
Update:
Without <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> I can reproduce the problem. And in this case IE is running in Quirks mode. Do you include the doctype when you test it?
Anyway, you just have to avoid quirks mode: http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode
Ex avoid ANYTHING before doctype.
I didn't faced such problem with your code, probably this is because you ie version is older one.
Different browsers have different generic style standards for different html elements. To avoid this problem (or defend against it the best you can!) you should really include a reset style sheet in all your sites to try and synchronise the styles of all browsers best you can. One of the greats I have found is Erics Archived thoughts:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
This typically does the trick (with a few little tweaks after a penultimate cross browser test).
I want my submit buttons + links to look as buttons and the same in all browsers.
Firefox 3.5 plays nice. But IE6,7,8 have all different looks. Can you help me with that (apparently) simple task?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
Buy now
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
For the button instead of type="submit" use type="image".
For instance:
<button type="image" src="path_to_your_image.png">Buy now</button>
For link you can use css to set the background of your link:
background-image: url('path_to_your_image.png');
I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.
And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.
You can fix the most glaring differences on IE6 and 7 quite easily, though.
Add this to the CSS for your buttons (<button> and <input>):
overflow: visible;
You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.
And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:
display: inline-block;
I know this is an old question, but I recently ran into this issue and didn't want to use any images in my layout. The solution I came up with (after making the links blocks, as others suggested) was to explicitly setup the borders, fonts, and background colors. To get the borders to match, set them individually. Originally I was trying to use outset borders, but I had better success using solid borders with specific colors for top, left, bottom, and right. (I chose the colors based on what firefox was using for its outset borders.) Hope this helps someone. Also, adding a border-radius to the links and buttons makes them a bit cleaner.
If you want a uniform appearance, you'll need to use an image submit button.
You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.
Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.
Has anyone been able to succesfully use the IE CSS hack #IEroot? I stumbled upon it from this article but it doesn't seem to work for me.
I'm trying to fix/hack the inline styling bug to produce li inline blocks
#featured li {
margin:0px;
padding:0px;
width:317px;
height:310px;
display:inline-block;
border-left:1px #bdbdbd solid;
}
#IEroot #featured li {
display:inline;
}
Any help would be greatly apperciated, thanks.
IT DOES WORK, exactly as described, EVEN in IE8, and is actually a pretty smart CSS hack to get around IE specific bugs.
You MUST swap out the DOCTYPE line for a REAL DOCTYPE though first.
Here is the code from the link, tweaked to be a working sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* all browsers make border red */
#IE { border : 2px solid red; }
/* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */
#IEroot #IE { border-color : blue; }
</style>
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<p id="IE">This browser is IE. (red in all, blue in IE)</p>
<p id="notIE">This browser is not IE.</p>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
I'm using a beta of IE8, and the example on the page that you are referring to does not work. The live demo also doesn't seem to take IE8 in count.
These kinds of hacks are clever, but I'd advice you to stay away from it.
Whenever you encounter differences between browsers, there are always alternative ways to do the same thing in such a way that it works for all browsers.
I've made more websites full of CSS than I can count, and I never ever resort to browser-specific code, especially not the kind that exploits bugs in specific versions of browsers. They solve a tiny problem today, but give you twice the headaches tomorrow, and are a bitch to maintain.
If you insist on using such a hack, make sure to add a comment like this:
/* >>>>>>> BUTT-UGLY BROWSER HACK! FIX ME!!!!! <<<<<<<< */
#IEroot #featured li {
display:inline;
}
:-)