Working on designing a page with CSS, but just cannot seem to get it to display properly.
Take a look at the attached GIF file and tell me if this can be accomplished without both the use of tables and javascript.
It just seems like it shouldn't take this much effort to incorporate "web standards" into your design.
8^)>
Thanx.I don't know about anyone else, but I cannot read the text in yout gif file.Here's a better pic...That was even worse!Last chance.
If y'all can't read this...
8^)>Here is my feeble attempt:
<!-- m --><a class="postlink" href="http://home.att.net/~gil.davis/footer_example.htm">http://home.att.net/~gil.davis/footer_example.htm</a><!-- m -->
It looks different in NS and IE. I could not define the height of the footer and make the text go to the bottom on either browser, and the footer is taller in NS for some odd reason.
I set the margins of the body to zero because NS pushed the footer off the right side of the page when I specified width: 100%. Oh, well.Cool...definitely closer to what I want.
Now, how do I limit the entire thing to a width of 700 pixels and center it in the "viewable" area?
Thanx again.Yet another question...
How do I vertically AND horizontally center the whole thing within the "visible" area of the browser?
Thanx.I have managed the fixed header, fixed footer and a content area that expands as you put stuff in it, all centered horizontally. I dunno how to do vertically.
Did you want the main content area to expand as stuff is put in it or exactly fill the rest of the viewable area with scroll bars for any extra content? I got confused sorry.
Hope the file helps, tried to annotate it but its pretty simple so you should be able to work your way around. If you need anything then PM me.
Works in IE5.5, Mozilla 1.6, Firefox 0.8 and Opera 7.23 all in Windows, don't have any other browsers so don't know about them.
<!-- w --><a class="postlink" href="http://www.harrymills.co.uk/cssStuff/test/stmasi.htmOkay...I">www.harrymills.co.uk/cssStuff/test/stmasi.htmOkay...I</a><!-- w --> think I have it now.
I just can't seem to get it perfectly centered in the "visible" area of the browser.
Check it out:
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/">http://www.geocities.com/stmasi/</a><!-- m -->
Thanx.Any takers?
Thanx.Which browser because it is messed up in Opera and Mozilla.Whoa!
Yeah...that's messed up quite a bit.
Is there any way I can get all browsers to interpret the code identically? You know...either by using hacks or by some sort of code that checks for browser and then supplies the appropriate style sheet for each browser?
Thanx.Yep...
Between IE6, M1.6, N7.1, and O7.11, it appears as though only IE and N display properly...except for the centering.
Thanx.The height of your #main div is too large. It's set to 100%, but that 100% doesn't take into account the other elements in the containg div. Reduce the height of your #main div to around 370px, and you should be good to go.Cool.
That works for every browser except for Opera.
There remains a gap between the main div and the footer div.
Any ideas on how to eliminate this?
Thanx.Originally posted by stmasi
Cool.
That works for every browser except for Opera.
There remains a gap between the main div and the footer div.
Any ideas on how to eliminate this?
Thanx.
Really? I'm using Opera 7.23 and everything looks kosher to me.Hmm...I'm testing with Opera 7.11 and I can see a gap between the main div and the footer div (maybe 25px or so).
Perhaps the difference in versions?
Thanx.Probably. Opera tends to be a bit quirky in my opinion. I always find something wrong when testing in Opera.
Okay.
Now, is there a fix or workaround?
Thanx.the two buttons at the bottom overlap the footer.Good morning, all.
Just wondering...did ne1 think of a fix / hack for the Opera 7.11 problem?
Thanx.Nevermind...found the problem.
I had a <p> </p> embedded in the html that I didn't catch. Once I removed that, it's good to go.
Thanx.
Take a look at the attached GIF file and tell me if this can be accomplished without both the use of tables and javascript.
It just seems like it shouldn't take this much effort to incorporate "web standards" into your design.
8^)>
Thanx.I don't know about anyone else, but I cannot read the text in yout gif file.Here's a better pic...That was even worse!Last chance.
If y'all can't read this...
8^)>Here is my feeble attempt:
<!-- m --><a class="postlink" href="http://home.att.net/~gil.davis/footer_example.htm">http://home.att.net/~gil.davis/footer_example.htm</a><!-- m -->
It looks different in NS and IE. I could not define the height of the footer and make the text go to the bottom on either browser, and the footer is taller in NS for some odd reason.
I set the margins of the body to zero because NS pushed the footer off the right side of the page when I specified width: 100%. Oh, well.Cool...definitely closer to what I want.
Now, how do I limit the entire thing to a width of 700 pixels and center it in the "viewable" area?
Thanx again.Yet another question...
How do I vertically AND horizontally center the whole thing within the "visible" area of the browser?
Thanx.I have managed the fixed header, fixed footer and a content area that expands as you put stuff in it, all centered horizontally. I dunno how to do vertically.
Did you want the main content area to expand as stuff is put in it or exactly fill the rest of the viewable area with scroll bars for any extra content? I got confused sorry.
Hope the file helps, tried to annotate it but its pretty simple so you should be able to work your way around. If you need anything then PM me.
Works in IE5.5, Mozilla 1.6, Firefox 0.8 and Opera 7.23 all in Windows, don't have any other browsers so don't know about them.
<!-- w --><a class="postlink" href="http://www.harrymills.co.uk/cssStuff/test/stmasi.htmOkay...I">www.harrymills.co.uk/cssStuff/test/stmasi.htmOkay...I</a><!-- w --> think I have it now.
I just can't seem to get it perfectly centered in the "visible" area of the browser.
Check it out:
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/">http://www.geocities.com/stmasi/</a><!-- m -->
Thanx.Any takers?
Thanx.Which browser because it is messed up in Opera and Mozilla.Whoa!
Yeah...that's messed up quite a bit.
Is there any way I can get all browsers to interpret the code identically? You know...either by using hacks or by some sort of code that checks for browser and then supplies the appropriate style sheet for each browser?
Thanx.Yep...
Between IE6, M1.6, N7.1, and O7.11, it appears as though only IE and N display properly...except for the centering.
Thanx.The height of your #main div is too large. It's set to 100%, but that 100% doesn't take into account the other elements in the containg div. Reduce the height of your #main div to around 370px, and you should be good to go.Cool.
That works for every browser except for Opera.
There remains a gap between the main div and the footer div.
Any ideas on how to eliminate this?
Thanx.Originally posted by stmasi
Cool.
That works for every browser except for Opera.
There remains a gap between the main div and the footer div.
Any ideas on how to eliminate this?
Thanx.
Really? I'm using Opera 7.23 and everything looks kosher to me.Hmm...I'm testing with Opera 7.11 and I can see a gap between the main div and the footer div (maybe 25px or so).
Perhaps the difference in versions?
Thanx.Probably. Opera tends to be a bit quirky in my opinion. I always find something wrong when testing in Opera.
Okay.Now, is there a fix or workaround?
Thanx.the two buttons at the bottom overlap the footer.Good morning, all.
Just wondering...did ne1 think of a fix / hack for the Opera 7.11 problem?
Thanx.Nevermind...found the problem.
I had a <p> </p> embedded in the html that I didn't catch. Once I removed that, it's good to go.
Thanx.