Header won’t show up online but will offline – need help!

[kendra69]

Hello All,

Thanks in advance for taking a look. The header won’t show up online and the content color is a lot darker (it is light gray offline). Everything looks pretty good offline except for the menu bar needs fixed with drop downs and the menu wrap issue plus it is shoved to the right.

Any help as to why the header won’t show up and menu bar issuses with drop downs not extending on the Forms tab appreciated. CSS & HTML below.

Kendra

Here is the link: http://handnhanddaycare.com/index1.htm

The CSS:

Code:

body {
position:relative;
margin: auto;
width:100%;
height:100%;
background-color: #986547;
body text=”#FFFFFF”;
padding-top: 10px;
}

#container
{
width: 1000px;
line-height: 130%;
}

#wrap {
margin: 10px auto;
width: 1000px;
}

#top h1 {
background-image:url(images/testlogo4.jpg);
background-repeat:no-repeat;
height: 225px;
clear: both;
}

#menu {
padding:0;
margin-top:-22px;
height: 40px;
line-height: 40px;
background: #666666 url(images/menu.jpg) no-repeat;
}

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
font-size: 0px;
}
#menu li a{
width:8em;
height: 40px;
display: block;
text-decoration:none;
text-align: center;
line-height: 40px;
background-color: black;
color: white;
font-size: 15px;
}
#menu li a:hover{
background-color: #800000;
}
#menu ul ul {
top: 40px;
position: absolute;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}

#content {
background: #666666 url(images/content.jpg) repeat-y;
color: black;
padding: 50px;
}

#bottom {
background: black url(images/bottom.jpg) no-repeat;
padding: 20px 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;}

.clear {
clear:both;
}

————————————-

The html:

Code:

• Home
• About
• Classes
  • Carolyn
  • Ashley
  • Julie
  • Tracy
• Forms
  • Handbook
  • Photo Consent Form
  • Late Policy
  • Certificate of Child Health Examination
  • Application/Record of Child Information
  • Consents to Daycare Providers
• Lunch Menu
• Parent Resources
• Unit 7
• Contact Us

Hand in Hand’s Mission Statement

Our goal at Hand-In-Hand daycare is to provide loving and nurturing care to children of working parents and student parents. We will provide a stimulating environment to aid in the child’s
growth through play and developmentally appropriate activities, which will help to build self-confidence and good self-esteem within the child.

Our goal is to provide an environment in which a child will feel secure, and to help them make a successful break from home. Our further goal is to provide new experiences for the children to help grow an learn.

© All rights reserved. KVR Company 2009

[apostrophe]

First validate your markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhandnhanddaycare.com%2Findex1.htm and then check your path to the images relative to the css file, the browser can’t find them.

[Rob MacKay]

It looks like you have not uploaded testlogo4.jpg coz its not in your images folder :D

[kendra69]

Thank you, Thank you. To "test" the new page I had made an images1 file and everything was pointing to just "images". The header shows up now. Can you take a look at the site again and tell me why the gray is not wrapping up the the right side of the menu bar. Also, why won’t the drop down menu bar extend for the last items under forms. Also, I want them to drop vertically directly below an not out to the right like they are now. Also how to I make the drop down wording "fit" and look nice. Sorry lots of questions but any help appreciated.

Thanks again for fixing the header issue – so simple!!

Kendra

[calebkester]

There is margin and padding messing with your "ul"… You could do either this:

Code:

#menu ul {padding:0; margin: 0;}

Or this (which I’d recommend since it’s always good to start with a basic clear)

Code:

* {margin: 0; padding: 0;}

Also for the gray wrapper, do you want it to be around the sides of the navigation? FF only does the left side while Chrome the right side :D

Try this if you want it both:

Code:

#menu {padding:0 10px;}

[kendra69]

That worked great! Now my menus are directly below the main tab. I haven’t changed it online yet but will soon. Yes I want the wrapper to wrap up the ends of the navigation bar (on both ends) if that makes sense. Also, is there some type of limit to how far the background goes on the drop down list (see forms drop down) because the last item doesn’t have the background behind it.

Thanks so much for all of your help!

Kendra

[apostrophe]

Try this:

Code:

#menu ul {
padding:0;
}

#menu li a {
background-color:black;
color:white;
display:block;
font-size:15px;
line-height:40px;
padding:0 28px;
text-align:center;
text-decoration:none;
width:auto;

#menu ul li ul li a {
color:white;
display:block;
font-size:15px;
line-height:40px;
padding-right:40px;
text-align:center;
text-decoration:none;
width:8em;
}

[kendra69]

That worked. Now the only issue is how do I make the longer titles under Forms like "Photo Consent Form" all on one line. Also, the border is wrapping on the menu bar in IE but not in FF. Thanks for all your help I really appreciate it!

Here is the new css file:

body {
position:relative;
margin: auto;
width:100%;
height:100%;
background-color: #986547;
body text="#FFFFFF";
padding-top: 10px;
}

#container
{
width: 1000px;
line-height: 130%;
}

#wrap {
margin: 10px auto;
width: 1000px;
}

#top h1 {
background-image:url(images/testlogo4.jpg);
background-repeat:no-repeat;
height: 225px;
clear: both;
}

#menu {
padding:0;
margin-top:-22px;
height: 40px;
line-height: 40px;
background: #666666 url(images/menu.jpg) no-repeat;
}

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
font-size: 0px;
}
#menu li a{
background-color:black;
color:white;
display:block;
font-size:15px;
line-height:40px;
padding:0 28px;
text-align:center;
text-decoration:none;
width:auto;
}

#menu ul {
padding:0;
}
#menu ul li ul li a {
color:white;
display:block;
font-size:15px;
line-height:40px;
padding-right:40px;
text-align:left;
text-decoration:none;
width:8em;
}

#menu li a:hover{
background-color: #800000;
}

#menu ul ul {
margin: 0; padding: 10;
top: 40px;
position: absolute;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}

#content {
background: #666666 url(images/content.jpg) repeat-y;
color: black;
padding: 50px;
}

#bottom {
background: black url(images/bottom.jpg) no-repeat;
padding: 20px 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;}

.clear {
clear:both;
}

[apostrophe]

Please use the code tags, it’s what they are there for.

Quote:

Also, the border is wrapping on the menu bar in IE but not in FF.

Look at calebkester’s post.

Code:

#menu {padding:0 10px;}

Quote:

Now the only issue is how do I make the longer titles under Forms like "Photo Consent Form" all on one line.

I would give the forms list item its own class;

Code:

[kendra69]

Thanks to you guys all the issues are fixed and I have learned a great deal today to understand toward building my next site and I hope I can help someone else on here and return the favor.

Here is the final version: http://handnhanddaycare.com/index1.htm

It looks great thanks to you guys.

Have a great day!
Kendra

[Author]

Posts