7 replies [Last post]
dianaschnuth
dianaschnuth's picture
Offline
newbie
Toledo OH
Last seen: 17 years 22 weeks ago
Toledo OH
Timezone: GMT-5
Joined: 2004-08-26
Posts: 5
Points: 0

I've been attempting to build my first all-CSS-layout website. It's going badly.

http://www.dianacook.net/test/
(beware of some strong language)

The goal is to either a.) have a content div that scrolls, or b.) have the entire page scroll with a fixed background. The main issue has been getting it to be flexible as far as screen height is concerned.

I finally made it look almost right on IE6, bu the scrolling didn't work. No biggie—I figured someone could set me right on that. (I even tried setting the div height with javascript, a trick I'd been proud of in the past, but that didn't do it, either.)

But then I looked at in in Firefox, and it's all fubar. ::puts head in hands::

I thought I knew what I was doing, but apparently there's something I'm missing. I've looked at several layout examples and explanations of the box model. What am I missing?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

IE vs. Firefox and scrolling divs

Have a look at Eric Meyer's CSSEdge site, it's got a perfect tutorial, that's exatcly what you want to do.

http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

Also try demo2 and glassy.html, they should help.

Verschwindende wrote:
  • CSS doesn't make pies

dianaschnuth
dianaschnuth's picture
Offline
newbie
Toledo OH
Last seen: 17 years 22 weeks ago
Toledo OH
Timezone: GMT-5
Joined: 2004-08-26
Posts: 5
Points: 0

IE vs. Firefox and scrolling divs

::sigh:: Darn you, Internet Explorer... I was afraid of that. Only the vast minority of my audience will see my page as I intend, and that's unfortunate.

Thanks, though! I'll go root through the finer points of the complexspiral demo until I get it right. (Until it looks right in Firefox, anyway...)

- Diana

dianaschnuth
dianaschnuth's picture
Offline
newbie
Toledo OH
Last seen: 17 years 22 weeks ago
Toledo OH
Timezone: GMT-5
Joined: 2004-08-26
Posts: 5
Points: 0

IE vs. Firefox and scrolling divs

http://www.dianacook.net/test/
css file: http://www.dianacook.net/test/style1.css

OK, I've played with my layout a bit, and now I have some more specific questions:

In Firefox, there seems to be a margin at the top of my page. In IE, there is none. I have all margins, padding, and borders set at 0. What gives?

The main problem I'm having, though, is that my content div is extending beyond my container div, and I don't quite know how to keep it in check. It had previously been intent on stretching 125px beyond, which is the height of my masthead div. Now, in IE6, it's just much taller than I wanted, causing double-scrolling (in both div and main browser window). It's also covering my footer. It's even more fubar in Firefox. The goal is to have everything on one screen, and scroll either the div or the browser window (preferably the div, as scrolling the browser makes the background image jump around funny). Did I plan this wrong? Is there another way to do what I was planning?

Could somebody give me a hand?
- Diana

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

IE vs. Firefox and scrolling divs

Hi dianaschnuth,
Here's a couple of things that should help.
Firstly have a read of http://www.csscreator.com/attributes/containedfloat.php
/* use this instead of height in main*/

#main{min-height:100%;} 
 
#main:after{ content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility:hidden; } 
 
 /* Holly Hack Targets IE Win only \*/  
* html #main {height: 1%;}  
/* End Holly Hack */ 


Hope that helps

dianaschnuth
dianaschnuth's picture
Offline
newbie
Toledo OH
Last seen: 17 years 22 weeks ago
Toledo OH
Timezone: GMT-5
Joined: 2004-08-26
Posts: 5
Points: 0

IE vs. Firefox and scrolling divs

Thanks, Tony! Worked like a dream.

I only have one more question now: what is causing my margins in Firefox? In IE6, my layout is butted up against both the top and the bottom of the browser window. In Firefox and in Netscape 7.2, there appears to be about a 10px margin away from it. I think that may also be related to why my sidebar is placed out-of-whack, as well. I'll go search and putz around some more on my own, and wait for one more hint from the Forum. Smile

Ahh... almost there.
- Diana

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

IE vs. Firefox and scrolling divs

Hi Diana,
I can't see why that is happening, It might be caused by the page being in quirks mode.
You could try using margin-top:-10px; in body and if that messes up IE counteract it with * html body{margin-top:0;}

Hope that helps

dianaschnuth
dianaschnuth's picture
Offline
newbie
Toledo OH
Last seen: 17 years 22 weeks ago
Toledo OH
Timezone: GMT-5
Joined: 2004-08-26
Posts: 5
Points: 0

IE vs. Firefox and scrolling divs

Yay, it's me again! And this time, it's way past my bedtime, but I'm going to post anyway. I've been working on this too long.

So, the strange top-border issue seemed to resolve itself somehow when I added my navigation div into the mix. Unfortunately, it looks like there is now a 10px gap between my navigation and my masthead in Firefox. In IE, it's butt-up against it, no problem. Putting a top:-10px line brings it back up in Firefox, but in IE6 it unfortunately brings the navigation up to overlap the masthead, and that's no good.

Also, in both browsers, there looks like a 50px or so left-indent before the first element of my horizontal nav begins, so depending on how wide I make the list items and what browser I view in, my menu either goes onto two lines or it's off-center or both. Add to this the gap in Firefox, and I'm quite perplexed.

I did look at several other horizontal nav options, but this one was the first one I appropriated, and it seemed to come closest to what I was looking for. I just can't seem to get the finer points going on now.

Again, here's my link: http://www.dianacook.net/test/

Thanks for all your help! I feel like a total leech, but I'm really stuck.
- Diana