Simple 2 Column CSS Fixed-Fliud with Header/Nav and Footer?

HTML Source, Tables, CSS, JavaScript, and Embed/Object.

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Postby charlescooke on Thu Oct 30, 2008 9:52 pm

In IE6 the footer is about 50px wide, starts OK at the left but the rest is completely missing.
I also suggest you place an anchor about half way down the page and link something to it and see if the link works.
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Postby wink0r on Fri Oct 31, 2008 12:10 am

The header is also hosed using the IE-6 engine from within FF and renders the same in IE-6. Your header section is on the order of 100 px and the nav bar fills in the level to the right of the header. Both header and footer divs end at the end of the last letter in the word in the div.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Postby Ikaros on Fri Oct 31, 2008 2:00 am

Thats screwy how its chopping the header and footer off. It works if I leave those DIVs 100% width, but I wanted my header and footer text/graphics to center in the space between the left image and right window edge. I'll try the 100% width and add a 256px wide padding the left side of the header and footer DIVs and Z-index them with a lower value than the left DIV so the padding area in hidden under the left image DIV or something like that. Check it now, it looks okay to me through Browsershots (browsershots.org) cross platform compatibility check for IE6 and IE7 comparisions:

http://home.comcast.net/~yngwie100/yngwie4layout.html

Whether I end up with CSS frames or regular CSS 2 column page, I hope to avoid having to modify the HTML pages (containing left, header, footer, content DIV sections) by changing only the CSS layout if I can.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby Ikaros on Sat Nov 01, 2008 12:40 pm

Not to be a pain, but can someone with IE6 or 5.x check the test layout link above (in my last post) to confirm to me it's displaying properly in older browsers? It's looking fine from a screenshot test page but want to be sure.

Thanks...
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby wink0r on Sun Nov 02, 2008 7:49 am

Looks fine to me.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Postby Ikaros on Tue Nov 04, 2008 2:08 am

I'm editing my new layout (offline only right now) get the thing looking fine and then my header graphics jumps down on browser window resize and footer text wraps funny instead of staying in the DIV space. I can't make Stu's code generate a min-width horizontal scrollbar to keep the header and footer from wrapping. I give up. I'm either leaving things as they are cutting out older IE users or I'm going back to the drawing board with a regular layout or adding IE quirks mode before my doctype line with my current uploaded page at http://home.comcast.net/~yngwie100/ to make it display right on older IE versions breaking W3C validation. I need to step back and re-think this before I do something drastic. If I switch my doctype and code to xhtml there is a way to trigger quirks mode and still have valid code without doctype being first line? I know, I'm grasping for straws.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby Ikaros on Thu Nov 06, 2008 11:37 pm

Yet another test with a "normal" CSS layout:

http://home.comcast.net/~yngwie100/marakana.html

How's it behave in your browsers? I temporarily gave some of the sections a gray background so you could see where they are. I forget what causes the blank vertical scrollbar (if everythings in view) area but that's the least of my worries now.

One question though. In my sidebar div I noticed while my background image stays fixed when the page scrolls, the sidebar div "window" bottom edge comes up from the bottom covering the background image. I tried setting the sidebar div height to 100% instead of 600px but it has no effect. Is there any way to stop this from happening as I want to keep the image fixed on the page as you scroll to the bottom of the content towards the footer.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby agsone on Fri Nov 07, 2008 2:16 pm

The left column scrolls with the content in IE6 - you could probably fix that with a conditional style sheet if it bothers you, it's not an aesthetic disaster.

The problem with the footer scrolling up over the picture can be solved by having a height in px greater than the height of the content but that seems a bit unsatisfactory to me (maybe you can fix that dynamically with javascript but that is beyond my ken). I tried putting the header, content and footer in the one div column and applying left margins to that instead but it doesn't seem to help.
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Postby Ikaros on Fri Nov 07, 2008 2:39 pm

Thanks for checking that.

Maybe if I were to have the header and footer be full width, remove the sidebar div and just have the image as a fixed non-scrolling background in the content div with a left margin of 266px so the text doesn't overlap the image?

Or I could remove the sidebar div and make the background image part of the content div with the header and footer having a 266px left margin to simulate what you see now with the image 256x600px image starting at the top left. I'd probably have a centering problem though in the header and footer because of the left margin so that might be a show stopper. I'd also need to add top and bottom padding or something to the content div to keep from overlapping the header and footer areas.

I'm still brainstorming and experimenting as you can see ;)

You don't want me to give up and go to html 4.01 transitional and put a table based frameset back in!
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby agsone on Fri Nov 07, 2008 7:04 pm

Ikaros wrote:Maybe if I were to have the header and footer be full width, remove the sidebar div and just have the image as a fixed non-scrolling background in the content div with a left margin of 266px so the text doesn't overlap the image?

Not such a bad idea - particularly given that the image is more style than content in this context. This approach is probably of benefit to users with a slow connection and from an accessibility viewpoint too.

Ikaros wrote:You don't want me to give up and go to html 4.01 transitional and put a table based frameset back in!

Indeed, plus Dr. John might spontaneously combust which would be a shame.
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Postby Ikaros on Sat Nov 08, 2008 6:52 am

[Note - This message has been edited since my last post]

My last idea above didn't pan out. I think I fixed the problem with the bottom of the image being covered over over as you scroll the page downward.

By accident I removed background-attachment: fixed and changed position: absolute to fixed and then the image bottom didn't get covered over when scrolling the page down and the image still stays fixed in the viewport.

Because IE6 and below doesn't understand position:fixed in my Sidebar div, the background image should just revert to position:absolute and just scroll with the page instead of always staying in the viewport? I think that wound be an acceptable compromise.

Update - I just tested it on Browsershots.org and it appears position:fixed caused the image to parially repeat even though I have background-repeat:no-repeat in the css. Weird!!!
Last edited by Ikaros on Sat Nov 08, 2008 7:35 am, edited 5 times in total.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby wink0r on Sat Nov 08, 2008 7:18 am

With a good text editor like Notepad++ you can open all your pages (within reason) and do a find and replace in all open documents. Hit the save all button, and you are done.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Postby Ikaros on Sat Nov 08, 2008 7:47 am

wink0r wrote:With a good text editor like Notepad++ you can open all your pages (within reason) and do a find and replace in all open documents. Hit the save all button, and you are done.


Excellent thanks! I just downloaded and installed it. Looks very nice. I'll use this instead of regular Notepad from now on.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby Ikaros on Sat Nov 08, 2008 3:37 pm

I must be the most nuttiest person here trying to do wierd things with page layouts!

Okay, I'm reading you can't use a fixed CSS background image in a DIV and you can only apply that in the Body. I can make the DIV position:fixed but that messes up in some browsers like IE6 and below. No good for me. So there is no proper way of having a fixed background image inside a sidebar DIV?

Things were so much simpler in earlier days!
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby charlescooke on Sat Nov 08, 2008 8:39 pm

Ikaros wrote:Okay, I'm reading you can't use a fixed CSS background image in a DIV and you can only apply that in the Body.

Then you are reading in the wrong places. Background positions obey the rules in every case I know of. Just make the appropriate settings in the background Tab in CaScadeS.
Ikaros wrote:I can make the DIV position:fixed but that messes up in some browsers like IE6 and below. No good for me. So there is no proper way of having a fixed background image inside a sidebar DIV?

I don't know about messing up. Certainly IE6 does not support position fixed instead renders it as position relative. You will have to allow for that in the design and the background will respond as it is expected to e.g scrolling with the div but remaining in the same position relative to the div
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

PreviousNext

Return to Advanced Design Q & A


Who is online

Users browsing this forum: No registered users and 1 guest