Sprite help

Hi All, I am terrible at sprites - hoping to learn more.

Not sure why the hover and current isn’t working on this site. The sprite image is [URL=“http://goodyoga.net/wordpress/wp-content/themes/child/images/nav.png”]here.

Also, if you put your cursor over the navigation, the spacing is not accurate. For example, you have to put cursor between last two links to get last page. Can’t click on actual “Register/shop”.

Thanks in advance so much!

You need to place the background image on each <a> element, rather than on the UL, and position it appropriately for each link.

I’m really bad at trying to figure out why it doesnt work. I work better taking something that works and adding to it. Try that with mine. http://www.visibilityinherit.com/code/sprites.php

Thanks Ralph. Which a in the code below? I tried it on each below but it didn’t work. I’m sure I am misunderstanding.

#menu-nav {
	width:651px;
    	height:36px;
	float:right;
    	margin:-40px 30px 0 0;
    	padding:0;
	list-style: none;
	background:url(images/nav.png) no-repeat 0 0;
}
#menu-nav li, 
#menu-nav li a, 
#menu-nav li em, 
#menu-nav li span {
	width:100px;/* width of image*/
    	height:36px;
    	text-decoration:none;
    	float:left;
    	overflow:hidden;/* hide text if zoomed*/
    	position:relative;/* stacking context for absolute element*/
    	cursor:pointer;
}
#menu-nav li{margin:0 0 20px;}

#menu-nav li.menu1, #menu-nav li.menu1 a, #menu-nav li.menu1 span {width:94px;background-position:-25px 0;}
#menu-nav li.menu2, #menu-nav li.menu2 a, #menu-nav li.menu2 span {width:105px;background-position:-119px 0;}
#menu-nav li.menu3, #menu-nav li.menu3 a, #menu-nav li.menu3 span {width:123px;background-position:-224px 0;}
#menu-nav li.menu4, #menu-nav li.menu4 a, #menu-nav li.menu4 span {width:170px;background-position:-347px 0;}
#menu-nav li.menu5, #menu-nav li.menu5 a, #menu-nav li.menu5 span {width:160px;background-position:-517px 0;}

#menu-nav li a { text-indent: -9999px; }

#menu-nav li a:hover {visibility:visible}/* IE6 fix to make inner element show on hover*/

#menu-nav li.menu1:hover, #menu-nav li.menu1.current-menu-item {background-position:-25px -36px;}
#menu-nav li.menu2:hover, #menu-nav li.menu2.current-page-item {background-position:-119px -36px;}
#menu-nav li.menu3:hover, #menu-nav li.menu3.current-page-item {background-position:-224px -36px;}
#menu-nav li.menu4:hover, #menu-nav li.menu4.current-page-item {background-position:-347px -36px;}
#menu-nav li.menu5:hover, #menu-nav li.menu5.current-page-item {background-position:-517px -36px;}

Got it. Thanks.

Any idea why sprite isn’t working in IE 8?

Try adding position:relative here.


#menu-nav li{
	width:auto!important;
	margin:0 0 20px;
	position:relative;
}


Just another IE bug.

Thanks Paul. That worked!

Should I start a new thread?

What’s the best way to make the PayPal section on this page work in IE 6 and 7? Should look like [URL=“http://goodyoga.net/wordpress/wp-content/themes/child/images/capture2.jpg”]this but it looks like [URL=“http://goodyoga.net/wordpress/wp-content/themes/child/images/capture1.jpg”]this in IE 7.

Thanks so much!

Hi,

You will need to restructure that better for IE7 and under I’m afraid as that structure is too lose.

You should float two columns of the correct width to start with so that you can have the paypal buttons and associated text in the left column and the big image in the right column and then you won’t need to add a class to the last one to add a big margin. That will fail should any browser render the line-height differently to what you have or indeed if anyone enlarges text then all the buttons will move down and more will wrap.

So make two columns to start with.

Next stack the text and the buttons in the left column but note that in IE7 and under that floats must come first or they will start on a new line. You have floated the input but it comes after the text and inside the form which means ie will place it on a new line.

You should instead float the text to the left and then float the whole form to the right. However you will need to contain those floats as IE will try and stack them all unless they are all exactly the same height (including margin etc.). So its probably easier to wrap the text and the form in a div and set overflow:hidden;zoom:1.0 to contain the floats and start each float on a new line.

You also have an odd break tag at the end which should be removed and apply the margin to the new wrapper instead.

Not sure in that second to last paragraph whether you mean one big float for text and PP stuff or two. If one, not sure how to do that. I started it on the very bottom of the page. Close but no cigar. Styles are at the very bottom of the style sheet.

You also have an odd break tag at the end which should be removed and apply the margin to the new wrapper instead.

Not sure where you mean.

Hi,

I meant something roughly like this:


<div id="columns">
		<div class="colleft">
				<div class="row">
						<p>Monday Gentle Flow: 10-11:30 a.m.</p>
						<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
								<input type="hidden" name="cmd" value="_s-xclick">
								<input type="hidden" name="hosted_button_id" value="529V8C3NJD584">
								<input type="image" src="http://goodyoga.net/wordpress/wp-content/themes/child/images/btn_cart_SM-2.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
								<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
						</form>
				</div>
				<div class="row">
						<p>Monday Gentle Flow: 10-11:30 a.m.</p>
						<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
								<input type="hidden" name="cmd" value="_s-xclick">
								<input type="hidden" name="hosted_button_id" value="529V8C3NJD584">
								<input type="image" src="http://goodyoga.net/wordpress/wp-content/themes/child/images/btn_cart_SM-2.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
								<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
						</form>
				</div>
				<div class="row">
						<p>Monday Gentle Flow: 10-11:30 a.m.</p>
						<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
								<input type="hidden" name="cmd" value="_s-xclick">
								<input type="hidden" name="hosted_button_id" value="529V8C3NJD584">
								<input type="image" src="http://goodyoga.net/wordpress/wp-content/themes/child/images/btn_cart_SM-2.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
								<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
						</form>
				</div>
		</div>
		<div class="colright"><img src="http://goodyoga.net/wordpress/wp-content/uploads/2011/10/image2.jpg" alt="Kelly McKibben teaching Good Yoga Class" title="Kelly McKibben teaching Good Yoga Class" width="234" height="265" /></div>
</div>



#columns {
	margin:0;
	overflow:hidden;
	zoom:1.0;
}
.colleft {
	float:left;
	width:64%;
}
.colright {
	float:right;
	width:35%;
}
.colright img{float:right;}
.row {
	overflow:hidden;
	zoom:1.0;
	margin:0 0 5px;
}
.row p {
	float:left;
	margin:0 0 0 42px;
	padding:0!important;
	display:inline;
}
.row form { float:right }


Not sure where you mean.

This break here should be removed:


<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">[B]<br />[/B]
</form>

Okay, got it and it’s working. I would not have known how to do this :-(.

What do these mean:

zoom:1.0; - ?
padding:0!important; - what does the Important mean - when do you use it?

What does the .row p {display:inline;} do? “The display property specifies the type of box an element should generate.” Inline is “The element will generate an inline box (no line break before or after the element). This is default”. Don’t get when we can or can’t use this or when we should and shouldn’t use it. How does it apply? Thanks!

Another question: Why do the column widths add up to 99% instead of 100%?

That gives IE6 haslayout and enables it to clear the floats. You can read up on haslayout in the Sitepoint css online reference.

padding:0!important; - what does the Important mean - when do you use it?

You had padding set on other more specific elements so I made sure that mine won out. Usually you wouldn’t need it but I couldn’t be sure where you would place my rules. !important does as it say and makes the element more important than any other non important rules. Use it sparsely and wisely.

What does the .row p {display:inline;} do? !

That was simply to cure the IE6 double margin bug on floats (see faq on floats).

Another question: Why do the column widths add up to 99% instead of 100%?

Because percentages are rounded measurements and 35% and 65% might equal 100% + 2 pixels in some browsers and the float would drop. Always allow breathing room and don’t account for every single pixel of space. In a fixed width layout as yours there was no need to use percentages anyway as you could have worked out the exact pixels to use.

Okay, thanks Paul. I’ll take a look at the css reference - finally found it.

Where’s the FAQ on floats? In the reference guide?

Is the percentage thing why the form is dropping in IE 5 and 6 on the contact page: /contact?

It’s in the sticky thread at the top of the forum, or follow the CSS Faq link in my sig.

Is the percentage thing why the form is dropping in IE 5 and 6 on the contact page: /contact?

No.

Add a different background colour to the right and left columns and the reason will be obvious. IE6 is not the problem - you are :slight_smile:


.wpcf7{background:red}
.colleft3{background:blue}

The left column is 296px wide yet you have added a 260px image inside a p element that has 40px padding inside. That makes 340 px trying g to squeeze into 296px and it just won’t fit. IE6 tries to help and stretches the left column to 340px width but then that knocks the right float down because there is no room for it.

Sorry, Paul. I’m not sure I’ll ever become good at this :-(.

Where’d you get .wpcf7? Don’t see it on Firebug.

It’s fixed though. Working well in all browsers.

It was here:


<div class="colright3">

<p>Contact us today to learn more about Good Yoga!</p>
[B]<div class="wpcf7"[/B] id="wpcf7-f194-p192-o1"><form action="/contact#wpcf7-f194-p192-o1" method="post" class="wpcf7-form">
<div style="display: none;">

Oh, the contact form css. It’s a plugin. Thanks Paul!!!