can anyone tell me why this sprtie code doesnt work

lostyboy · #1 Oct 15th, 2007, 12:00

can anyone look at the code and tell me why the roll over isnt visible please

Code: Select all

#skyline {
    width: 633px; height: 111px;
    background-image:url(button_bg.gif);
    margin: 10px auto; padding: 0;
    position: relative;}
  #skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #skyline li, #skyline a {
    height: 111px; display: block;}
    
    
    
#panel1b {left: 0; width: 122px;}
  #panel2b {left: 122px; width: 109px;}
  #panel3b {left: 231px; width: 51px;}
  #panel4b {left: 282px; width: 63px;}
  #panel5b {left: 345px; width: 63px;}
  #panel6b {left: 408px; width: 100px;}
  #panel7b {left: 508px; width: 125px;}
  
  #panel1b a:hover {
    background: transparent url(button_roll.gif)
    0 -122px no-repeat;}
  #panel2b a:hover {
    background: transparent url(button_roll.gif)
    -122px -122px no-repeat;}
  #panel3b a:hover {
    background: transparent url(button_roll.gif)
    -231px -111px no-repeat;}
  #panel4b a:hover {
    background: transparent url(button_roll.gif)
    -282px -111px no-repeat;}
    #panel5b a:hover {
    background: transparent url(button_roll.gif)
    -345-111px no-repeat;}
  #panel6b a:hover {
    background: transparent url(button_roll.gif)
    -408px -111px no-repeat;}
  #panel7b a:hover {
    background: transparent url(button_roll.gif)
    -508px -111px no-repeat;}

Marc · #2 Oct 15th, 2007, 12:05

Do you have any HTML that you can show us?

karinne · #3 Oct 15th, 2007, 12:06

PLEASE READ: How and When to post your question!

Quote:

Explain the problem as clearly as possible. Mention which browsers you have tested it in and in which you are seeing a problem.
Provide a link. If you don't have hosting setup yet, there are plenty of Free Hosting providers out there. A popular, no hassle choice is Freewebs.

lostyboy · #4 Oct 15th, 2007, 12:12

http://www.juxdesigns.com/button/buttons.html sorry hear is the link

karinne · #5 Oct 15th, 2007, 12:14

The DOCTYPE should be the very first line in your document

HTML: Select all

<link href="buttoncs.css" rel="stylesheet" type="text/css" />
<link href="buttoncs.css" rel="stylesheet" type="text/css">
<!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>

So ... move the to <link....> tags into the <head> ... </head> of your document

lostyboy · #6 Oct 15th, 2007, 12:24

i have changed this and uploaded it can you take a look please its still not working

Marc · #7 Oct 15th, 2007, 12:27

Why do you have background:transparent on all of the a:hover's?

lostyboy · #8 Oct 15th, 2007, 12:30

Because that what i was like in the tutorial i didnt think it was right but just followed it anyway ill take it off and see what happens .

karinne · #9 Oct 15th, 2007, 12:32

I still see the same code

lostyboy · #10 Oct 15th, 2007, 12:36

try now sorry my fxp is well slow cheers

karinne · #11 Oct 15th, 2007, 12:47

It's still work and I haven't seen so many errors in so few lines of code.

HTML: Select all

    <link href="buttoncs.css" rel="stylesheet" type="text/css" />
    <link href="buttoncs.css" rel="stylesheet" type="text/css">
    <!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><ul id="skyline">
    <li id="panel1b"><a href="#1"></a></li>
    <li id="panel2b"><a href="#2"></a></li>
    <li id="panel3b"><a href="#3"></a></li>
    <li id="panel4b"><a href="#4"></a></li>
    <li id="panel5b"><a href="#5"></a></li>
    <li id="panel6b"><a href="#6"></a></li>
    <li id="panel7b"><a href="#7"></a></li>
  </ul>
</head>

<body>

		
</body>
</html>

What is your list doing in the <head> of your document?
You have no metadata or title - Make your HTML efficient
You still have those <link ...> tags above the DOCTYPE

lostyboy · #12 Oct 15th, 2007, 14:20

i have gone threw it about 1000 times now i just dont no where im going wrong iv tried everything and this is what im left wid a bar of links that do nothing please sumone help me http://www.juxdesigns.com/button/index.html

karinne · #13 Oct 15th, 2007, 14:25

I'm not sure what you want to happen when you hover ... I'm assuming you want a different image to show up but the button_bg.gif image is the same as the one you use for regular links

There is no hover state in it.

Your image should look like the image in this example - Fast Rollovers Without Preload

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
code behind code doesnt work	skat	ASP.NET Forum	4	Feb 18th, 2008 10:05
iFrame Sizing Doesnt Work	xKillswitchx	Web Page Design	6	Mar 5th, 2006 00:58
colspan doesnt work in IE but does in firefox	helen_166	Web Page Design	0	Nov 17th, 2005 14:38
text fields doesnt work on Mac IE	hey259	Web Page Design	1	Jan 23rd, 2004 20:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
can anyone tell me why this sprtie code doesnt work