|
CSS - Ie6 Png Hack... But With Sprites?
So, I have an app that allows the user to select images from a list of thumbnails. The thumbnails have an 'on' and 'off' state, but also have a drop shadow.
I can get the drop shadow to render nicely in IE6 using a PNG hack, but I can't seem to find a hack that will allow me to use a PNG sprite so I can have the on and off state in the same image. Any suggestions would be great. Similar Tutorialswhen reading an identifier in CSS IE will treat two dots in a class decleration as one: accepted rules (strict mode): Code: win ie 5.01: p..class, p./**/.class win ie 5.5 : p..class win ie 6 : p..class, p./**/.class, p./**/class, p/**/.class win ff 1.5 : p./**/class, p/**/.class (comments ignored) win opera : (as firefox) win ns 7.0 : none! Trying to figure how how to turn my nav bar into where if you hover over one of the parts of the nav bar it turns into the highlighted version of that part. Web Site: http://kansasoutlawwrestling.com/v3/index.php Nav Bar: http://kansasoutlawwrestling.com/v3/images/nav.png Highlighted Nav Bar: http://kansasoutlawwrestling.com/v3/images/nav2.png I've got a problem with my sprites in IE6. I'm not sure if this is a simple fix, or just something I can't fix, but an extensive search online produces no meaningful results. Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Sprites</title>
<style type="text/css">
h1 {height:24px; width:25px; font-size:14px; padding-left:30px;}
#hd2 {background:url(images/sprite-popHelpH1.jpg) 0 0 no-repeat;}
#hd2 {background:url(images/sprite-popHelpH1.jpg) 0 -24px no-repeat;}
</style>
</head>
<body>
<h1 id="hd1">Hello World!</h1>
<h1 id="hd2">Hello World!</h1>
</body>
</html>
Unexpected IE6 Expected IE7 and FF3 Obviously the FF3 one isn't 100% how I would like it, but that isn't issue i'm trying to deal with. Clearly IE6 is expanding the entire H1's height past what I specified in the CSS, as where IE7 and FF3 listen to me and wrapped text flow outside the height I specified. Anyhow, thanks very much for any help! Hello, I'm having an issue with sprites. I have a few images on my hompage (not a menu), and when a user hover over those images, the image will swap with another one. Here is the HTML Code: <table width="100%" border="0"> <tr> <td align="center"> <a id="sw_sN_facebook" href="social-networking.php"></a> </td> <td align="center"> <a id="sw_sN_myspace" href="social-networking.php"></a> </td> <td align="center"> <a id="sw_sN_flickr" href="social-networking.php"></a> </td> <td align="center"> <a id="sw_sN_twitter" href="social-networking.php"></a> </td> </tr> </table> And here is the CSS Quote: #sw_sN_facebook, a#sw_sN_facebook, a#sw_sN_facebook:link, a#sw_sN_facebook:visited, a#sw_sN_facebook:active{ background:url(../images/logo-social.png) 0 0 no-repeat; width: 101px; height: 20px; } a#sw_sN_facebook:hover{ background:url(../images/logo-social.png) 0 -20px no-repeat; } #sw_sN_myspace, a#sw_sN_myspace, a#sw_sN_myspace:link, a#sw_sN_myspace:visited, a#sw_sN_myspace:active{ background:url(../images/logo-social.png) -101px 0 no-repeat; width: 78px; height: 20px; } a#sw_sN_myspace:hover{ background:url(../images/logo-social.png) -101px -20px no-repeat; } #sw_sN_flickr, #sw_sN_flickr a, #sw_sN_flickr a:link, #sw_sN_flickr a:visited, #sw_sN_flickr a:active{ background:url(../images/logo-social.png) -179px 0 no-repeat; width: 72px; height: 20px; } #sw_sN_flickr a:hover{ background:url(../images/logo-social.png) -179px -20px no-repeat; } #sw_sN_twitter, #sw_sN_twitter a, #sw_sN_twitter a:link, #sw_sN_twitter a:visited, #sw_sN_twitter a:active{ background:url(../images/logo-social.png) -251px 0 no-repeat; width: 86px; height: 20px; } #sw_sN_twitter a:hover{ background:url(../images/logo-social.png) -251px -20px no-repeat; } For a better understanding, here is the homepage: www.lightblu.com The problem: Nothing displays. Now I've tried many different codes, and the best result I had was to display all the images like they should, but they're not hyperlinked, and they don't swap images on mouse over. Please help Thanks Dear Friends I implemented the css sprites in my application.css sprites working well in all browser except IE 6 and IE 7.I cannot know i do it .Please Help me.......... My CSS File .follow_us_blogger { background: no-repeat url('/design/csssprites/follow_us.png') 0 0px; width: 100px; height: 31px;} MY HTML page <div class="follow_us_blogger"><div> In my website (geotool.flagfox.net) I have a drop-down menu which allows people to change to locale of the website. If you look at this menu you can see that I have placed flags next to each country, but as I now have 35 different languages I don't really want to load 35 separate images (especially as most visitors never even look at this menu). Is there a way of using CSS sprites for this? I've made a small test website to make it easier to look at this: test.rleeden.no-ip.com. You can see that I can successfully use a CSS sprite image in the main body, but I've not been able to achieve the same affect in the select menu. Or alternatively somehow make it that the images are only downloaded if the menu is shown?? Any advice or help most welcome. Richard Hi guys I have been reading about sprites and CSS. The fact you can load an image that contains all the state the image can have on hovers is excactly what i am looking for. also the fact that you can do it without javascript makes it even better. But i have a problem that i need to create a menu, where the text turn blue on hover. Here it is (danish text): As far as I know, I need to map all areas the with polygon to make the links work. And then apply sprite functionality. But I haven't seen any 'sprites and maps' tutorials, so I am beginning to think that it cant be done with CSS. But before I give up, I would like to ask you if it can be done, and maybe give me some tutorial link or suggestions. I have tried to do some tutorials, so I think I have the basic idea. Thanks in advance I can't see it working (and in practice it hasn't). Surely the background position needs to be fixed as the image is not scalable. I hope I am right on this or it's back to the drawing board. Hi I have been making a world map with hover tooltip effects using css sprites. it works fine on ff and chrome but in ie and opera it is messed up. everything checks out to be valid xhtml and i get no errors listed anywhere. i have heard some issues with older versions of those browsers but my ie is 7 and my opera is 9. i based my map on this tutorial so css is the same except for positioning. http://www.alistapart.com/articles/sprites also the master image is 800 wide and 1224 tall, maybe that is a problem? i ma stuck and dont know what is wrong could anybody take a look and offer some advice to what is wrong or offer a suggestion? thanks, the map i ma referring to can be found at: travelmagoo.com In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns. With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too. But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript. I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical? nevermind got it sorted out Quote: hi, i just made a footer the other day and had to realize (at work today) that it is not quite there in IE where it is in FF. it seems to have to do with another element on the page (the navigation) - you will see what i mean by viewing the following page in IE: http://www.chocolateriewanders.com could you just tell me which one of the endless hacks for IE i need to apply - or how you call this alignment problem (then i can look it up in google myself ... i just need to know how you call this) thanks Hello all, I'm really interested in hearing the opinions of those more seasoned in web development. I have been working hard at learning CSS and believe I have really improved my web design skills because of it. I love working with CSS and have completely freed myself from tables. But... I am so tired of playing for hours with the coding just so my page looks okay in both IE and FF. I'd much rather my page look great in FF (my prefered browser) and to heck with IE. I have made my stand and will no longer design my personal pages for IE. I have a clear message on one of them telling my visitors to wise up and download FF. Of course my audience allows me to get away with this. I realise that if your visitors are average surfers who barely know how to do a search on google, they aren't about to deviate from IE. But for those audiences who have a little more internet experience, do you think it's cool to try and push them into using FF? In terms of usage it's clearly on the rise, IE has been steadily declining. I'd really like to see IE hit bottom. The way I see it, as long us the development community continues to jump through hoops so people can keep using IE or other inferior browsers, there will be little motivation to develop some solid web browser standards. Any thoughts? Yeah, we all know IE sucks because we have to do all types of extra css to make it work. I just did a design update on my site. I did my usual, worked the design with Chrome and Firefox. I got it all working with those browsers, and them I just opened IE 7 so see how much more work I need to do for IE. Well to my surprise, everything was correct. I checked IE 8. Same thing. It all looked correct. Now, I may have had a stroke and didn't know. So I'm asking if someone can look at my site with there IE 7 or 8 and confirm that looks alright. www. netgamegurus .com I just don't believe that I could have coded it that perfect. From my experience it just not possible. Sorry about the URL hack, but I came to this forum for css support and it's kinda hard to get css suport if we can't post URL's to show our css at work. Hi all, I need some help. I know I need an IE hack to make my drop down menu on the header of this page work correctly (hover over 'pictures', 'rides', or 'maps') but for the life of me I can't seem to find what that workaround (hack) is. Please help! Oh yeah, of course, it work perfectly fine in Firefox. Here's a copy of the 2 CSS files I am using for this page... main2.css header.css And yeah, I am still working on the header, that's why it looks kinda empty right now. =) Manny If you are having problems with Son of Suckerfish and IE7, where the drop down menu will not disappear like it should. Take out the javascript because you do not need it with IE7, but if you still want IE6 to work then put it in. For IE7, you need to add Code: *:first-child+html #nav {
height: 1%;
}
*:first-child+html #nav li {
height: 1%;
}
to your css and you will be fine. Don't ask me why, Don't ask how, i just chalk it up to just IE When the :not pseudoclass is used with an element selector in Firefox, it works as expected, excluding the selector inside the parentheses. But used by itself or attached to the * selector, it applies the rule to ALL elements. This unexpected behavior can be exploited to write Mozilla-specific patches to your CSS code. example:
html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Testing :not Hack</title> <style type="text/css"> :not([id]) p { font-weight: bold; } </style> </head> <body id="thisthing"> <p>This is a test.</p> <p id="test">This is a test.</p> <div>This is a test.</div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> The idea is to set the ID of the parent and browsers which correctly interpret this selector will not apply the rule to anything; also those browsers which don't already support it will simply ignore it. The :not selector is part of the new CSS3 recommendation. Here's just the css code for the hack: css Code: Original - css Code :not([id]) example { /* Moz/FF/Netscape code here */ }
:not([id]) example {
I've encountered the italics problem with IE and am trying to work around it. I followed the hack from the http://www.positioniseverything.net...alicbug-ie.html page but it really screws things up. My page is cut, more or less, into 3 sections: header, main, footer. Since I don't use any italics in either the header or footer, the rule needs only to apply to main. It CAN apply to the others, but it doesn't need to. Now, when I apply the hack, instead of my page lining up with the 'header' on the left hand side and the main on the right hand side, it completely pushes my 'main' area down so that it doesn't start until after the header and I have no idea why? I noticed that if I put the hack in each particular page (rather than in the external file sheet) then it works, but why? Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows <div id="White">White area</div> <div id="Black">Black area</div> when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css. how do i do it ? hope i made myself clear on this Here's how it works: first you make CSS rules like these, for example:
css Code: Original - css Code body { font-size: small; } body.0 { font-size: x-small; } #content { width: auto; } .0 #content { width: 100%; }
body {
and then you specify the class and id attributes: html4strict Code: Original - html4strict Code <body class="0"> <div id="content"> <body class="0"> The first of each rule targets strict standards mode, while the second of each rule targets quirks mode, including accidentental quirks mode due to a failure to read and parse the DTD. Why does it work? Because in standards mode, numeric classes (0, 1, 2, 23, 586, etc.) are correctly not applied to the rendered document, whereas with Quirks Mode in IE and Opera, these styles are parsed and applied. Technically the dot-zero rules will not validate, but the HTML will. So don't freak out if your CSS is flagged as invalid; this hack wasn't intended for standards mode anyway. Note: This hack will not work on Firefox, but since its default mode is not quirky, it doesn't matter. I'm trying to apply the min-height hack for IE shown here http://www.greywyvern.com/code/min-height-hack.html It entails floating a 1 pixel wide box, then put your content below, then clear the float. It seems to work fine, but something in my layout is screwing this up royally on IE. Can someone take a look at this on IE and compare it to firefox. What in the world is IE doing here? http://section31.us/temp/rateyourmo...min-height.html That layout is just part of a larger website that i'm working on for fun. http://section31.us/temp/rateyourmovie.com/index1.php |
|||||||