div's not inside container

[jrthor2]

Can someone help me with the footer of this site http://www.alanwenrichphd.com (http://www.alanwenrichphd.com/). The text at the bottom should be inside the footer at the bottom, but I can't seem to get them to display there. Also, if you view the site in IE6, there is a gap on the right by the header, nav and footer. how can I fix that as well? Thanks!!

[joseph_liu]

URL isn't live....make sure your nameservers are pointing to your hosting account.

[jrthor2]

Oops, sorry. The link should be http://www.alanwenrichphd.com/index2.php

[joseph_liu]

Your p tags inside your footer div have a 10px top margin applied to them. Removing that should do the trick.

[jrthor2]

ok, got the footer fixed. How about the right whitspace in IE6?

Thanks!

[jrthor2]

Ok, I got the whitespace to go away, but the blue border is not even all the way around now. The right side is wider than the left side. Any idea how to fix that? In FireFox, it appears to be the same, but not in IE(6). Thanks.

[Centauri]

Remove the right margin from #hp-extra - it is pushing the container wider.

The gap below the menu is due to the <ul> height being dependant on font size rendering, and IE will push the height of #hor_nav_container. If you remove the top and bottom padding from #nav a and set the height and line-height to 29px and float them left, it should resolve the gap.

[jrthor2]

Ok, I made all your fixes, but now my dropdown menu under the "Type of Therapy" link does not dropdown underneath it. It goes to the right in IE, and overtop of it in Firefox.

Thanks!!

[Centauri]

That is due to not specifically specifying where the absolutely positioned dropdowns are to go, and relying on the browser to guess.

First, you want the dropdowns to be positioned relative to the parent <li>, so the <li> should get relative positioning. Next you want the top of the dropdowns to be at the bottom of the <li>, so 29px down. Next, you want the dropdown to be at the left edge of the <li> on hover, so use a left value of 0 instead of "auto" :#nav li {
float: left;
padding: 0;
position: relative;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 280px;
font-weight: normal;
border: 1px solid #002B5C;
margin: 0;
background: #c1b8a2;
top: 29px;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: 0;
}

[jrthor2]

Great, but now when you rollover, the second item's text is garbled until you roll over it???

Thanks again!!

[Centauri]

This is due to the dropdown <a>s inheriting the modified styles for the top <a>s, causing an overlap where the <a> goes to two lines ("Hypnosis" appears over the top of "Therapy"). A few additional things to reset this should fix that :#nav li ul a {
font-size:100%;
height: auto;
line-height: 1.2em;
padding: 0.2em 1em;
}

[jrthor2]

Ah, I see now. I didn't even notice the word therapy dropping down, duh. Hey, thanks for all your help. You are da man!!!