|
CSS - Css Sprites Not Working Correct In Ie7 Or Opera9
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 Similar TutorialsDear 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> Hey guys, at sev<dot>nj-webdesigner<dot>com/firm/profile.html - on the bottom of the page if you mouse over the first couple ticks (by "1928"), a hidden div displays above the tick mark. The positioning works as expected in Firefox and IE7, but the positioning is off in IE6. Any ideas why there is a difference and how to fix it? Thanks. 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 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 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! 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. 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 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 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. 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? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet). I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state. I don't really want to post the link to the test site itself if I don't have to for client privacy. Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work. I don't even need the javascript, I just need it to work. I've experimented with javascript and without. This is the code I am using: javascript: Code:
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>
HTML Markup: Code: <div id="nav"> <ul id="menu"> <li><a href="index.php" class="home"></a></li> <li><a href="link" class="tour"></a></li> <li><a href="link" class="events"></a> <ul class="drop"> <li><a href="/events/calendar">Calendar</a></li> <li><a href="/events">Ag Science Hall of Fame</a></li> <li><a href="/events/tastes">TASTES</a></li> </ul> </li> <li><a href="news" class="news">News</a> <ul class="drop"> <li><a href="link">Legislation</a></li> <li><a href="news/latest-news">Latest News</a></li> <li><a href="/news/newsletter">Newsletter</a></li> <li><a href="news/in-the-media">In the Media</a></li> </ul> </li> <li><a href="link"></a></li> <li><a href="link"></a></li> </ul> </div> Menu CSS: Code: #nav {
position: relative;
float:left;
width:940px;
height:35px;
z-index: 9;
background: #fff;
}
#menu, #menu ul {
position: relative;
padding:0;
margin:0;
clear:both;
float:left;
width:455px;
z-index: 9;
}
#menu ul.drop {
background:#520006;
/* padding:10px;*/
width:inherit;
clear:both;
float:left;
margin-top:35px;
z-index: 9;
}
#menu ul.drop li {
width: 130px;
clear:both;
padding: 5px;
z-index: 9;
}
#menu ul.drop li:hover {
background: #c10101;
z-index: 9;
}
#menu ul.drop a {
color:#fff;
font-size:11px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
z-index: 9;
}
#menu a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:130px;
}
#menu li {
float: left;
/*width: 10em;*/
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index: 9;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;}
/*SPRITE BACKGROUP POSITIONING*/
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
float:left;
background:url('images/menu.jpg') no-repeat;
height:35px;
text-indent:-999999px;
}
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}
#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}
#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}
#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}
#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}
#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}
ul {list-style: none;}
XHTML strict (no inline elements in <form) Code: <form ...> <div> <input ... /> <input ... /> </div> </form> Is the empty div element acceptable? Thank you <p>All-in-one solution for all your Web site needs <i>and</i> wants <ul> <li>Subscriptions and Web alerts</li> <li>Web site replication</li> <li>Integrated Document Management</li> <li>Next-generation HTML Form support</li></ul> What the question is is if it is correct to mix text (inline) with a <ul> element (block-level). Thank you Is it correct to use in CSS?? thank you http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now. Someone said something about problems with floats but i didnt quite udnerstand it Hi guys, Is it correct to have a <div after a <form or after a <p ?? For example, is this correct: Code: <form action="... </form> <div id="forgot_pass"> ... </div> OR Code: <p id="... </p> <div id="forgot_pass"> ... </div> Thank you Hello all. I wouldn't say that I'm a CSS n00b because I've been using it for a while but this is my first attempt at trying to build a site without tables using CSS. I looked at a few examples online and came up with the following for the page itself: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
<html>
<head>
<title>My Site</title>
<script src="scripts/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
</head>
<body>
<div id="logo_search">
<form name="search_form" method="POST" action="" onSubmit="return validate_form(this);">
<div id="logos">
<img align="absbottom" src="images/logo.png"><img align="absbottom" src="images/curve.png">
<input class="search_field" type="text" name="search_field" size="20">
</div>
</form>
</div>
</body>
</html>
Where the contents of main.css are as follows: Code:
body {
margin: 0;
padding: 0;
background: #0081b3; } /* end body */
#logo_search {
display: block;
background: #ffffff; }
#logos {
display: compact;
background: #ff0000;
margin-left: 200px; } /* end #logo */
.search_field {
text-align: right;
margin-left: 400px; } /* end #search_field */
form {
margin: 0;
padding: 0;
} /* end form */
Thinking tabularly (I know, I can't help it), what I'm trying to accomplish is to position these items on a single row with the search field about 25-50px from the right edge of the browser and the first image beginning about 200px from the left edge of the browser with white space from the image to the left and red from the image to the right. The code I have accomplishes this task however when the browser window shrinks, the search field wraps below the images so I'm thinking that there is a better way to do it than what I was doing. I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list. The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong. I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox. The next problem was when I went to put the doc types in. I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> above the <html> tag. Once again it worked in IE but not Firefox. I took out the doctype tag and inserted <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> inside the <head> tags. This seems to work in both IE and Firefox. Is this an incorrect way to put a doc type in? Below please see the css I am using and my header info Code: /*right hand nav bar*/
#nav ul{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li{
background: url(../images/divider_rht_nav.gif) repeat-x bottom;
padding-top: 0.3em;
padding-bottom: 0.6em;
padding-left: 1 em; /*this is for IE*/
padding-left: 10; /*this is for FireFox*/
}
#nav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height: 13px;
color: #325087;
}
#nav a:hover {
color: #CC0000;
line-height: 13px;
}
#nav li.selected {
color: #174A4A;
font-weight: bold;
background-image: url(../images/divider_rht_nav_arrow.gif);
}
.heading {
font-weight: bold;
color: #174A4A;
font-size:10px;
}
.headingspace {
font-weight: bold;
color: #174A4A;
font-size:10px;
margin-top: 1.5em;
}
/*end style*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>
Hi all, There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me... Thanks in advance, Amanda 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>
<style type="text/css">
body{
background: url(images/background.jpg) no-repeat top center;}
#contain{
width: 800px;
height: 640px;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
height: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
#community{ float: right;
background: url(images/community_spot.jpg) no-repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}
#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800px;
height: 286px;
}
.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}
.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}
.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}
</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" alt="" title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of 'em - without having to keep 100 dogs at your house. MORE...</p></div>
<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p>
</div>
</div>
</body>
</html>
|
|||||||