Topic: Why the big space? (Page 1 of 1)

I can't figure out why I am getting this big space on a page at http://www.metropolitanuniform.com/new_store.htm

Note the big space above the "footer" div. I turned on borders on everything to see if something was pushing it down, but I'm not coming up with anything.

If I set the display to NONE for #controls and #here, this appears to resolve the problem. But I can't see what is causing the problem. Argh!

Any one of you CSS nuts want to take a crack at this?

Pugzly: Potential suspects are:

1. display:block; - I don't see why you need to use it here (and so much of it - .navigation a{} has two lots of it!!). And remove this too: div {display: none;} as I can't see a good reason for it (hmm it might be related to some JavaScript kind of thing I suppose).

2. #footer {position: relative;} - a couple of things - I don't see why you need any type of positioning and if you are going to use it then add top:5px; as you are telling it to position itself relative to something but not how or where.

3. The form - it looks fine but forms can cause some odd things to happen occasionally - try the page without it. I don't think it is the problem but if the 2 points above don't fix it try this.

Emps

Pugzly! I can't believe you are having a problem...I thought you knew EVERYTHING! It is refreshing to think that even you can get stumped once in a while. Gives me a bit of hope!

No my question:

I looked at www.w3schools.com on the CSS display property, but I don't really understand how or why you would use it.

Pugzly, why would you create an element and then block it from being displayed? Is this a temporary measure during development or a way to turn certain elements off on selected pages or what?

I don't think I understand the practical application of that property.

e-maestro

display: block; is being used as part of my troubleshooting. I turned display: none; on all of them except footer, and then turned them on one by one until I could tell that #here and #controls were the cause of the problem. But I can't tell WHY they are causing the problem.

Pugzly, one way of fixing it is to place "top: -115px; " in your #footer class

Simply put, since you placed the first element in the code after the navigation -115px from the navigations lower right corner and left 200px, you have to follow that principle with the elements that follows your "here" in the actual code when it comes to "top". Otherwise the relative placement will be to the code itself, not the placement of the element. At least that's what I think,
Tested in IE6, Opera 5 & mozilla, it works.

(you also have an extra display: block; in your class ".navigation a" don't know if that does any harm though.)
/Dan


-{ a vibration is a movement that doesn't know which way to go }-

Hey pugzly, I don't have any advice for you but I noticed the People Mover in the pics on that page. Nice to see a fellow (I hate this word) Michigander here!

Yeah, that office is spitting distance from Greek Town. When they get that building done, the employees can go to the casinos at lunch, and to the nice restaurants for dinner!