CSS or HTML error?

Priapus

Priapus

Priapus

Soldato
Joined
30 Jul 2004
Posts
10,572
Location
East Sussex, UK
Howzit guys.

I'm busy making a new website. Now, I am trying to get my menu working. Which I have done. However, only one link/button isn't working. :( I just can't figure it out. When I load the page up in IE, I see all the other buttons, just not this one that is missing. However, having my mouse pointer there, I can still click on it.

So, looks like the image is missing. Which is what I am using to make this, rolover menu.

Any help would be great!

Thanks!

CSS:

Code: 
#page-container {
         width: 760px;
         margin: auto;
	      
}

html. body {
       margin: 0;
       padding: 0;
       background: #ffffff;
       }
       
       body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
}

 .hidden {
          display: none;
          }
          
/* Main Navigation */
#main-nav { height: 50px}
#main-nav dl {margin: 0; padding: 0;}

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#main-nav dt {float: left;}

                 }
#main-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:50px; /* IE 5/Win hack */ 
	padding: 50px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

#main-nav dt a:hover {
	background-position: 0 -50px;
}

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }

#main-nav dt#services,
#main-nav dt#services a { width: 71px; background-image: url(../images/nav/services.gif); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
	background-position: 0 -100px;
}


 #sidebar-a {
            float: right;
            width: 280px;
            line-height: 18px;
            }
 #sidebar-a .padding {
             padding: 25px;
          
            }
 #content {
          margin-right: 280px;
          line-height: 18px;
        
          }
 #content .padding {
           padding: 25px;
           }
                 
 #header {
      
          height: 150px;
          background: #db6d16
	            url(../images/headers/about.jpg);
          }
                 
 #footer {
         clear: both;
         height: 66px;
         font-family: Tahoma, Arial, Helvetica, San-serif;
         font-size: 10px;
         color: #c9c9c9;
         text-decoration: none;
         border-top: 1px solid #efefef;
         padding: 13px 25px;
         line-height: 18px;
         }
 #footer a:hover {
            color: #db6d16;
            text-decoration: none;
            }
#footer #altnav {
         width: 350px;
         float: right;
         text-align: right;

         } 
 h1 {
    margin: 0;
    padding: 0;
    float: right;
    margin-top: 57px;
    padding-right: 31px;
    
    }
    
    #content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

This is the HTML for the menu NAV:

Code: 
<div id="page-container">
<div id="main-nav">
         <dl>
      
          <dt id="about"><a href="#">About</a></dt>
          <dt id="Services"><a href="#">Services</a></dt>
          <dt id="portfolio"><a href="#">Porfolio</a><dt>
          <dt id="contact"><a href="#">Contact</a></dt>
          
          </dl>

It's the services one that isn't working. The rest are. :(:)
 
and you are sure the image is definately in the images folder?

Failing that, it could be that the image is not showing because you have not allowed enough width for it to be displayed in the CSS.
 
Code: 
#main-nav dt#services,
#main-nav dt#services a { width: 71px; background-image: url(../images/nav/services.gif); }

<dt id="Services"><a href="#">Services</a></dt>

Not anything to do with a capital 'S' on services in the HTML, and a lower case 's' in the CSS is it?

Jon
 
Capital S for id, lowercase s in css will be causing a problem

Also, may I ask why you're using a definition list for a menu? Semantically, in your code there is no definition, only a title.

Maybe use an unordered list instead?
 
GeForce said:
Code: 
#main-nav dt#services,
#main-nav dt#services a { width: 71px; background-image: url(../images/nav/services.gif); }

<dt id="Services"><a href="#">Services</a></dt>

Not anything to do with a capital 'S' on services in the HTML, and a lower case 's' in the CSS is it?

Jon
Click to expand...

Bingo. Well done.

Thanks bud, problemo solved! :D I keep doing that - bad habit.

If anyone has time...I need to change the backround. However it doesn't seem to be working?

Any ideas?

Thanks, Butters for the help as well. :cool:
 
Do you know, I looked at thoses 'S's and thought, Hmmmm. It's always something annoyingly simple.

Change the background to what?

Also, why do you have html.body then another body? I dont think there is a need for this.
 
Butters said:
Do you know, I looked at thoses 'S's and thought, Hmmmm. It's always something annoyingly simple.

Change the background to what?

Also, why do you have html.body then another body? I dont think there is a need for this.
Click to expand...

I'm still new to this whole CSS thing. So forgive me. :(

I want the color outside the page border to be back/grey type, like a two toened thing.

The HTML body is for margin and paddin...I think?:confused:
 
Ok, so the page background to be a colour, it has to be solid. If you want two tone you have to create an image and set that in the background.

no need for the HTML body if you are defining the body on its own and then defining content.

Code: 
body {
	background: #000;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
	color:#564b47;  
	margin: 20px 140px  0px 140px;
	}

That is all that's needed for a background which (in that example) is black. Note the margins. That creates a border at the top of 20, bottom 20, left and right 140px. It is also defining all your text there too (colour, size, font). I don't normally do that here, but its just an example. You can then set a container to be 100% (it will sit in between those margins) and will scale to fit any resolution.

Such as
Code: 
#container { 
	width: 100%;
	text-align: left;
  	background-color: #fff;	
  	overflow: auto;
	border: solid 2px #636363;
	}

If you then wanted to padd the text in the container out you'd simply add- padding:10px; (or similar), or add it to a later div if you just want to use the one above to control the layout.
 
You must log in or register to reply here.
Back
Top Bottom