Extra Space at bottom/positioning 1

[Baldwin238]

Could someone explain why I have LOTS of extra space at the bottom of my page? I believe it has something to do with the way I'm positioning my div's. This is the only way I have found to position them without using absolute. The middle content box will have to be able to expand vertically, but not horizontally. Any insight or ideas would be appreciated.

http://jbaldwin.net/powell/index.html

 

[Vragabond]

1. Put a valid and complete doctype at the top of the page and see it completey break. This is how your page is seen by non IE users.

2. The extra space is there because of your weird positioning. Negative positioning values are usually more trouble than they are worth. Try recoding the page and use floats.

 

[Baldwin238]

Thanks, I see what you mean about breaking up completely. I am playing around with floats now. I will inquire to some advice/feedback again, once I get the new layout complete.

http://golf.jbaldwin.net

http://jbaldwin.net/powell/index.asp

<--- Not Completed Yet

 

[Baldwin238]

http://jbaldwin.net/powell/index.html

OK. I have redone my code and also installed Netscape, FF and Opera to test it. Of course all 4 (including IE) give different results (with the exception of NS and FF - same results).
I included a complete doctype and used floats and all validates well. How does the code look? My question now is, what can I do about the div height issue in IE? Min-Height works well in all browsers BUT IE...? Any suggestions? (The only TWO active links in the left menu are the "VANES AND FEATHERS" and "STABILIZERS" links.)

http://golf.jbaldwin.net

http://jbaldwin.net/powell/index.html

<--- Not Completed Yet

 

[philote]

I don't think IE supports min-height. What you can do is put the bottom menu and copyright in another div (footer) and clear it left so that it's always below your three columns (here's an example I found doing just this). This will make the columns only long enough to hold their content but the footer text will stay below the longest column. The problem then is that your blue vertical lines between your columns won't extend all the way to the footer since they're implemented as borders. What you can instead do is use the faux columns technique.

 

[BillyRayPreachersSon]

if you do not need your CSS to validate, consider using an HTC to do the job:

http://www.ozoneasylum.com/5838

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Vragabond]

I played around with your website and came to this:
Powell's Archery

A few pointers:

1. I avoided even the little absolute positioning you had.
2. I utilized the wrapper div.
3. Avoid positioning flowing elements with top/bottom/right/left commands. I got rid of all of that.
4. Use css to size your input boxes. It is much more cross-browser happy and even more precise.
5. You can use simple height attribute to set the min-height in IE. Just make sure you use it solely for IE (use a hack)
6. The result looks exactly the same in IE6, Mozilla 1.7 and Opera 7.
7. I liked your design and everything you demonstrated here a lot and I wanted to help you. Good work.

 

[Baldwin238]

Thank you VERY much. That is exactly what I was looking to accomplish. So basically the wrapper is making up for the blank spots in IE (almost like a background?) Thanks again Vragabond (a star was sent your way) for your help and the others who offered a guiding hand on the coding help.

Jeff Baldwin
I dislike everyone equally, that way I don't have to play favorites

http://golf.jbaldwin.net

http://jbaldwin.net/powell/index.html

<--- Almost completed !