You appear to have a style sheet link in the body of your page. I’m not saying that that’s causing your problem, but it’s certainly not going to help.
The other HTML errors on your home page, at least, are so serious that the parser gives up:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsoccerkeepertraining.com%2F
Again, I’m not saying that these errors are causing the problem, but until you clear them, it’s going to be very hard to get things working correctly.
HTH
PAE
I second what peredur said.
However, the primary problem I’m seeing is that most of the elements on your page have the position set to absolute. This causes these absolutely positioned elements to ignore the other elements on the page while positioning and other elements to ignore the absolutely positioned ones. So when you’re trying to get your pagewrap div to adjust around the elements on your page, it won’t see those elements that were set to absolute. That is probably a good starting point to troubleshooting your problem.
thank you both for you replies and for the validation link. I will work on cleaning these items up and rerun the validator.
cacheflowdesign curious if there is a rule of thumb for absolute positioning. As you can tell CSS in terms of using DIV tags are new to me. The last time I attempted to do a webpage was late 1990’s or early 2000’s when most aspects were positioned by tables.
Absolutely positioned elements are positioned with respect to their most immediate non-statically positioned ancestor. If they have no non-statically positioned ancestor then they are positioned with respect to the viewport. This latter can really make a mess of your design on viewports of different sizes and resolutions.
You should be aware that support for all but the most basic bits of absolute positioning are absent in older versions of IE (versions 6 and 7).
Elements are positioned statically by default.
To position relative to an ancestor, the most usual technique is to set position: relative; on the ancestor. It then provides a positioning context for it’s descendents.
It is usually preferable to use the normal flow to position blocks wherever possible. Floats would come next on my own personal set of positioning preferences. Absolute positioning comes with all sorts of problems, so most designers just use it for specific, relatively small items, like search boxes and the like.
But each to their own, of course. Some people love statically positioned sites despite the messing about setting up positioning contexts.
HTH
PAE
Again, I second everything peredur said.
There are plenty of articles on the subject. Here’s one I’d recommend if want even more detail.
http://www.alistapart.com/articles/css-positioning-101/
Personally, I only use absolute positioning on a div when it’s wrapped in a relative div (with the exception of unique elements like sticky footers, or things you want to stay on the page even when you scroll). This way the wrapper can interact with other elements on the page and I can control the presentation of that element within the wrapper, like so.
HTML
<div id="wrapper">
<div id="wrapped-element">
Content
</div> <!-- wrapped element -->
</div> <!-- wrapper -->
CSS
#wrapper {
position: relative;
}
#wrapped-element {
position: absolute;
}
In most other cases, relative positioning is my preference.
Thank you both very much. I hope to have time tonight to fix these errors and see if that fixes the problem. The positioning link helped explained several things I was unaware of.
Thanks Again for your help
