CSS - Problem With Css Sprites

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

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

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?

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;}

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

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

I'm trying to migrate my web site from layout with HTML tables to a CSS-only layout. After a great deal of blood and tears, I was able to get the page to display the way I wanted in Mozilla Firefox version #1.0. However, I'm having a problem in Internet Explorer 6.

I'm using a 3-column layout. I want to split a portion of the center column into 2 divisions that lay out side by side. The left division will display an image. The right side some text.

IE6 stacks the content vertically, instead of side by side. I've attached the CSS file and HTML file in a zip file. If you could take a look at my code, and suggest a hack for IE6, I'd appreciate it.

The Sunburned Surveyor

P.S. - Other comments on ways to improve the code or page layout are also welcome.

Problem solved, thank you very much

Go to my site. Click on Pokemon.

What do I need to do to make it so the layout works on every page with every browser? Do I need to edit my .CSS file?

Hi Guys,

I need some help.

Take a look at a layout i recently coded with css and strict xhtml

http://www.invalidheart.org/my/

I'm having a problem with my coding, I don't know what I'm doing wrong, but it doesn't work properly in FireFox OR IE, the problem in firefox is the background doesn't continue with my two columns, so intead of my white background, it shows the background image, and the footer half-way through, do you see?

also, in IE, the footer is suppose to be directly at the bottom (hence, bottom:0) but, it doesn't work. But, the background works fine in IE.

Can someone help me find out the errors in my CSS coding?

here is my CSS

Code:

.hide
    {
    display: none;
    }

body
    {
    font: 11px/1.7 Garamound, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", Utopia, "Times New Roman", times, serif;
    background-color: #fff;
    text-align: center;
    padding: 0;
	background: url(bg.gif);
    margin: 0;
    }
	
#container
    {
    width: 748px;
	background: #fff;
    background: url(bgfront.gif) repeat-y;
    padding-bottom: 30px;
    }
	
div#wrap {
    position: relative;
    background: url(bgfront.gif) repeat-y;
	margin:0 auto;
	text-align: left;
	width:748px;
	}

body#sectionone #menu li#one a,
body#sectiontwo #menu li#two a,
body#sectionthree #menu li#three a,
body#sectionfour #menu li#four a,
body#sectionfive #menu li#five a,
body#sectionsix #menu li#six a,
body#sectionseven #menu li#seven a
    {
    background-position: 0 -20px;
    color: #fff;
    font-weight: bold;
    }

#main {
    margin-left: 25px;
    float:left;
    width:450px;
	background: #D6E6FD;
    min-height: 550px;
	text-align: justify;
}
#sidebar {
    width:232px;
    margin-left:492px;
	background: #D6E6FD;
    min-height: 550px;
	text-align: justify;
}

#mainmiddle
	{
	width: 420px;
    padding: 3px 0 0 9px;
	}
	
#sidebarmiddle
	{
	width: 202px;
    padding: 3px 0 0 9px;
	}

#wrap > #sidebar {
	width:200px;
}
	
p
    {
    color: #555;
    margin-top: 5px;
    margin-bottom: 10px;
    }

blockquote
    {
    padding: 0 0 0 10px;
    font-style: normal;
    margin: 0 15px 0 25px;
    }

blockquote p
    {
    color: #777;
    }

h1
    {
    display: none;
    }

h2
    {
    font-size: 18px;
    line-height: 1.2;
    font-weight: normal;
    text-transform: uppercase;
    color: #666;
    margin: 18px 0;
    }

h3
    {
    font-size: 18px;
    line-height: 1.2;
    font-weight: normal;
    color: #666;
    margin: 18px 0 0 0;
    }

.caps
    {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    }
    
ul, li
    {
    color: #666;
    list-style-type: none;
    border: 0;
    margin: 0;
    padding: 0;
    }

a:link, a:visited
    {
    color: #4B80EA;
    text-decoration: none;
    }

a:hover
    {
    color: #386DE8;
	border-bottom: 1px solid #386DE8;
    }

a:active
    {
    color: #FB7FD7;
    }

h3 a:link, h3 a:visited, h3 a:hover, h3 a:active
    {
    border: 0;
    }

#header
    {
    margin: 0 10px;
    background-image: url(header.jpg);
    height: 315px;
    width: 729px;
    }

#menu
    {
    margin-left: 25px;
    margin-right: 20px;
    }

#menu ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    clear: left;
    }

#menu ul li
    {
    display: block;
    float: left;
    text-align: center;
    }

#menu ul li a
    {
    font: 9px/1.9em "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
    background: url(navbg2.jpg) top left repeat-x;
    width: 100px;
    height: 18px;
    padding-top: 2px;
    color: #666;
    display: block;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    }

html>#menu ul li a
    {
    font-size: 9px;
    }

#menu ul li a:hover
    {
    color: #000;
    background-position: 0 -60px;
    text-decoration: none;
	border: 0;
    }

#menu ul li a:active
    {
    color: #000;
    background-position: 0 -40px;
    }

#whitespace
	{
	height: 15px;
    margin-left: 25px;
	background: #fff;
    text-align: center;
	width: 700px;
	}

#copyright
    {
	position: relative;
    bottom: 0;
    width: 700px;
    font: 9px/1.8 "lucida grande", tahoma, verdana, sans-serif ;
    color: #555;
    text-align: center;
    margin-left: 25px;
    height: 18px;
    padding-top: 2px;
    background: url(navbg2.jpg) repeat-x;
    background-position: 0 0px;
    }

#copyright a:link, 
#copyright a:visited
    {
    color: #666666;
    }

#copyright a:hover,
#copyright a:active
    {
    color: #000;
    border-bottom: 1px dotted #000;
    }

Thanks so much guys for taking the time to look this over for me.

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:block;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??