JS:
DD_belatedPNG js
HTML:
<script type="text/javascript" src="js/fixpng.js"></script>
CSS:
.sbToggle{
background: url(/img/select-icons-trans.png) 0 0 no-repeat;
display: block;
height: 27px;
outline: none;
width: 31px;
}
.sbToggle:hover{
background: url(/img/select-icons-trans.png) 0 -27px no-repeat;
}
The above code works in IE6+ and FF. But in IE6, when my mouse moves to the a element that triggers the .sbToggle:hover event, the background-image (background-position:0 -27px) have one pixel shift (like the a element with margin-top:-1px).
I guess it has to do with the DD_belatedPNG.js's vmlOffsets method. Does anyone have the same problem?
==============updated===============
i found a description about one pixel shift) at DD_belatedPNG site
- the one pixel gap problem has been mostly solved. Few people noticed,
but it bugged me, and was VERY hard to fix.[0.0.6a / 2008.12.14]
It seems to me that if you are supporting IE6, then you probably have (or will have by the time you are done) a way of targeting css just for IE6 (conditional comments or some other means). If that is so, then the easiest solution is to use whatever means you are using to target IE6 and then just change your css for IE6 to:
.sbToggle:hover{
background: url(/img/select-icons-trans.png) 1px -27px no-repeat;
}
Related
My site actually works okay in other browsers but when I checked in IE6, there is a problem. In my global navigation, I clicked this certain page. For example, I clicked ABOUT ME page. My global navigation changes its image when the page is active. Like it has a different color from inactive pages. In IE6, when I'm in the current page, ABOUT ME, the current image in the global navigation is different. Say, it's CONTACT US. But when hovered, the image that appears is correct.
This is the snippet of CSS:
.cat-item-5 {
float: left;
display: inline;
width: 162px;
height: 48px;
text-indent: -30000px;
background: -639px 0 url(images/menu.png) no-repeat;
}
.cat-item-5 a {
display: block;
width: 162px;
height: 48px;
background: -639px 0 url(images/menu.png) no-repeat;
}
.cat-item-5 a:hover,
.cat-item-5.current-cat a {
background: -639px 0 url(images/menu_o.png) no-repeat;
}
Hope you can help me, thanks!
IE6 has really really bad CSS support. It also has some nasty little bugs, of which you've been tripped up by one.
The bug is that when you have a double-class selector like .cat-item-5.current-cat, IE6 will only see the first of those classes, so it acts as if the selector is just .cat-item-5.
There's no good way around this bug. The only solution is to add another class to the relevant elements, and select that instead.
Your only other option is to simply drop support for IE6.
I've created a small search widget, however the background doesn't appear when viewing it through chrome. I've tested IE, FF and safari which all appear OK.
http://paradigmsearch.co.uk/widget/?id=1
I'm usually reluctant to put layout issue on SO. However, I've been going over this for a while.
On the element:
<div class="widget" id="id_300x250">
I'm applying the following CSS definitions
.widget {
font-family: arial;
height: 250px;
width: 300px;
border: none;
background: url('/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}
The background just isn't visible. If this is a really silly mark-up / css oversight then I apologies profusely.
Currently using chrome browser Version 25.0.1364.172m
This is a pretty funny issue which I only figured out when opening your page in Chrome's incognito mode: Your background image is being blocked by AdBlock.
Also, for rendering purposes it's better practice to stick style elements in your page's head.
I've tested your code using chrome 25.0.1364.172m, all appear OK.
Check it: http://jsfiddle.net/rcHMc/
HTML
<div class="widget" id="id_300x250">
CSS
.widget {
font-family: arial;
height: 250px;
width: 300px;
border: none;
background: url('http://paradigmsearch.co.uk/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}
I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.
There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.
I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”
This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.
Any suggestions?
That affect can be achieved using CSS 3 image masking. However, at the moment, only webkit supports the property. I would implement something like this, then use a fallback for other browsers until everybody catches up to speed.
As a side note:You can also increase the CSS adoption be using ChromeFrame, or something similar
An Example from that link:
SVG images can be used as masks. For example, a partially transparent
circle can be applied as a mask like so:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
I ended up using two images without any holes or transparency. It's a hack but works in all browsers.
html5 or something like a gpd as php gui. But html5 doesnt work with ie8 or before, at least if the client doesnt have the chrome frame of google inc.
If you can play with mix-blend-mode property, there is simple solution that work on all modern browsers.
http://codepen.io/sajijohn/pen/OXEgkj
HTML
<h1>SUPER-FLY</h1>
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
background-size: cover;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: raleway, sans-serif;
font-size: 80px;
line-height: 60px;
text-align: center;
padding: 20px;
/*/////////MAGIC//HERE////////*/
background: #fff;
color: #000;
mix-blend-mode: color-dodge;
/*////////////////////////////*/
}
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
I'm attempting to do the following...
Here's what I've got right now.. but it's not rendering correctly. Does anyone have any idea as to how I'd fix this?
CSS
/* Curved Corners */
.bl {
background: url(bl.gif) 0 100% no-repeat;
/*background-color:#EFFBEF;*/
width: 700px;
margin-left: auto ;
margin-right: auto ;}
.br {
background: url(br.gif) 100% 100% no-repeat;
}
.tl {
background: url(tl.gif) 0 0 no-repeat;
}
.tr {
background: url(tr.gif) 100% 0 no-repeat;
}
.clear {font-size: 1px; height: 1px}
HTML
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<div id="header">
</div>
<div id="footer">
</div>
</div></div></div></div>
Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com
In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.
To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.
Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.
There's always curvycorners as well, it uses native css for speed if the browser supports it or falls back to javascript if the browser doesn't.
Can be done easily with jQuery rounded corners rounded_corner
$(document).ready(function(){
$("#b1").corner();
});
You don't need to worry about cross browser issues with jQuery approach.
A fantastic summary for all major browsers, telling you how to round each corner or all corners:
http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/
Instead just put this code in the class where you want to have rounded corners .it will definitely work.
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
I have my site working perfectly in IE 6+ but it looks weird in IE 6 or IE 5.5, as I can't ignore the users with IE6 because still around 6% of traffic occur from this version. I am looking forward to have the alternate.
With my some research I came to know that by setting haslayout property, I can solve out formatting issue, but I consider myself extremely poor in CSS and hence I need a help of yours to rectify this issue.
You can find the URL below& you can see it's behavior in IE6, just in case if you are unable to test you can check it by viewing the source, please share your suggestions.
URL: http://anujtripathi.net/BlogListing.aspx?Id=2
Your code (default.css):
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
Try shrinking down 95% to like around 92%.
You can use a IE6 hack like so:
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
* html .bg1 {
width: 92%; /* Star Html Hack IE6 only */
}
*+html .bg1 {
width: 93%; /* Star Html Hack IE7 only */
}
But I highly recommend learning the right way and looking at the link below for organizing CSS for cross browser compatibility:
What is the best way to deal with IE compatibility issue?
I would look at your border widths, margins and paddings. It looks like your content is being pushed down because there isn't enough horizontal space. For a quick check, make your main container a little longer and see if the content shifts up.