Help With Wrapper

[Joseph Witchard]

http://www.uhrebirth.com

I have the following in my CSS:

#wrapper { width: 1025px; }

That div should contain all of the information and other elements on my page. However, when I use aardvark (Firefox extension), it claims that the wrapper only contains my header. What gives? Both my HTML and CSS validate on the W3C.

[MichaelF10]

The tag is clearly wrapped around the whole site. Is there some sort of display issue your concerned about?

I don't even see a change when I delete the wrapper all together.


Tested in:
FF 3.0.7
IE 7.0
IE 6.0

[Fang]

Elements that are positioned absolute are out of the document flow.
You can bring them into the flow by having their parents positioned relative.

[Joseph Witchard]

Elements that are positioned absolute are out of the document flow.
You can bring them into the flow by having their parents positioned relative.

So just change all absolute positioned elements to relative?

**EDIT: Well, I got some stuff working, I guess. It's AS IF the wrapper is wrapped around the whole site. However, it's still showing up in Aardvark as only wrapping the headers:(

[MichaelF10]

So just change all absolute positioned elements to relative?

**EDIT: Well, I got some stuff working, I guess. It's AS IF the wrapper is wrapped around the whole site. However, it's still showing up in Aardvark as only wrapping the headers:(

Sorry, I took a better look at your site and I see what you wanted now.

Change your tags like so:

#wrapper {
width: 1025px;
margin: 0px auto;
position: absolute;
top: 0px;
left: 50%;
margin-left: -512px;
}

#navigation {
width: 150px;
margin-right: 15px;
position: inherit;
top: 155px;
}

#right {
padding-left: 5px;
padding-right: 5px;
width: 300px;
height: 1400px;
margin-left: 10px;
position: inherit;
top: 175px;
left: 690px;
}

#center {
padding-left: 5px;
padding-right: 5px;
width: 500px;
height: 2500px;
position: relative;
top: 30px;
left: 160px;
}

#disclaimer {
width: 235px;
position: relative;
left:10px;
font-size: 8pt;
text-align: center;
}


If this isn't what you wanted, let me know.

[Joseph Witchard]

All I wanted was for the site content to center, and I got that. However, I don't understand why even though it appears to indeed be "wrapped" up in the wrapper div, Aardvark still claims that wrapper only contains the headers. I would like to be able to make it where Aardvark recognizes that wrapper contains everything, if that's at all possible through coding. I've looked at other website wrappers that have their position set to relative, and Aardvark works on them just fine.

Thanks:)

P.S. My site, along with its modified CSS, can be found at http://www.uhrebirth.com. I deleted the test page.

[MichaelF10]

All I wanted was for the site content to center, and I got that. However, I don't understand why even though it appears to indeed be "wrapped" up in the wrapper div, Aardvark still claims that wrapper only contains the headers. I would like to be able to make it where Aardvark recognizes that wrapper contains everything, if that's at all possible through coding. I've looked at other website wrappers that have their position set to relative, and Aardvark works on them just fine.

Thanks:)

P.S. My site, along with its modified CSS, can be found at http://www.uhrebirth.com. I deleted the test page.

That's because it is around the header...

here's your script with the wrapper with a white border:
http://www.ziptank.com/demo/josephwitchard/wrapperbefore.JPG

and this is with my code and the same white border:
http://www.ziptank.com/demo/josephwitchard/wrapperafter.JPG

If you change the code to what I showed you, it will wrap around your entire site.

EDIT:
Please note you will have to tweak things slightly to get them to the exact same location they were in before.

[Joseph Witchard]

Will it leave the content exactly as it is now? I'm just making sure, because a couple of things were off in your image; the background banner of the first header wasn't shown, the background image of the news ticker wasn't shown, and there was an extra google adsense ad in the second header.

Also, could you please explain why making those edits will make Aardvark work correctly? I'm baffled by this. I just really want to understand:o

**EDIT: Just saw your edit. Is there any one thing that's causing Aardvark to not show it correctly? I like using my own code whenever possible, so I would prefer changing as little to my CSS as possible. If I can't, however, that's fine too.

[MichaelF10]

Will it leave the content exactly as it is now? I'm just making sure, because a couple of things were off in your image; the background banner of the first header wasn't shown, the background image of the news ticker wasn't shown, and there was an extra google adsense ad in the second header.

Also, could you please explain why making those edits will make Aardvark work correctly? I'm baffled by this. I just really want to understand:o

**EDIT: Just saw your edit. Is there any one thing that's causing Aardvark to not show it correctly? I like using my own code whenever possible, so I would prefer changing as little to my CSS as possible. If I can't, however, that's fine too.

Just change it and if you don't like it you can change it back.

It won't remove content, the images and other things missing on my screen shot are missing merely because I downloaded your website since you provided no code. If you like using your malformed code so badly don't ask for help. I don't have time to tweak every little thing for you, you will have to adjust it slightly, things will be off 1-2 pixels, not 1000-2000. You just adjust the tags accordingly.

Best of luck.