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 Ikaros on Sat Nov 08, 2008 10:01 pm

Hmm thanks Charles for your input. The Internet seems full of misinformation. I'll give things another whirl!

So how does it look now? Say what browser version you are looking at it in?

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

Note - the menu buttons still point to the old css frames page layout if you want to compare.
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 Sun Nov 09, 2008 9:21 am

Generally I prefer this to your previous version.
With modern browsers it behaves perfectly correctly and fits 800 x 600 screen.
With IE6 you have deficit on the width. The floated div needs an extra 10px so that on a 800px wide screen the main content jumps down to below the sidebar. It's probably due to the double margin float bug http://www.positioniseverything.net/explorer/doubled-margin.html

You now make better use of screen height by scrolling header off the page.
In IE6 with the old version the footer behaved very strangely. When you scroll long pages to the bottom both header and footer move, when you scroll back the footer cuts into the main data area.

Otherwise the design looks pretty clean
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Postby Ikaros on Sun Nov 09, 2008 3:49 pm

I'm not sure where on the floated DIV you are saying an extra 10px goes, but the article you linked is saying the fix would be to just to add display:inline to the float left sidebar DIV?

I added the display:inline to the floated sidebar DIV just to test it.

I have another IE question about the scrollbar. What causes IE to show a blank vertical scrollbar container down the right side? If I have less content not needing a scrollbar or maximize the page fullscreen on my 1680x1050 display, the blank scrollbar area shows there.

I remember this happening on my other pages, I'm not sure but think adding my black scrollbar color external CSS (didn't add it yet) seemed to fix it for some weird reason. Just curious on this. I don't think it really hurts anything.
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 Lem3 on Mon Nov 10, 2008 1:12 am

I believe the vertical scrollbar is default behavior in IE. Use
html { overflow: auto; }

to make it go away.
Lem3
Moderator
 
Posts: 273
Joined: Sun Jun 22, 2008 3:39 pm
Location: Texas

Postby Ikaros on Mon Nov 10, 2008 3:16 am

Thanks Len3, I'll add an html section for that above my body section in my css.

Also, I noticed when my daughter was home from college this weekend, on her MacBook in both Firefox and Safari web browsers that my navbar is not centered? Its showing on the left side of my navbar div instead of in the center like the main logo graphic above it. I tried adding background-position: top center; in my navbar div css code but that didn't help. It shows centered in IE though. If it isn't one thing its another!
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 Mon Nov 10, 2008 2:50 pm

OK There is more to this than is obvious at first sight.
The 10px is of course the right margin on the Sidebar div.
The PIE method does work but in this case is not enough.
The design in FF etc will work with a screen width of 790px.
IE6 requires a width of 818px or thereabouts. That's a difference of 30px. It looks as if some other IE6 bug is coming into play. There are so many of these that when the first doesn't solve the problem it is rarely worth while pursuing the matter.

I suggest that for IE6 you simply change the sidebar from fixed position to relative position and leave it at that. (See my previous post.)
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Previous

Return to Advanced Design Q & A


Who is online

Users browsing this forum: No registered users and 1 guest