14 replies [Last post]
Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Hello everyone. I'm pretty much brand new to this whole css, and have been getting help form a friend, but now she and I are stumped.

I have a page on my site where the background color of a div stops halfway down the page, when it's supposed to go all the way. This appears to only happen in Firefox (it's ok in Opera and IE).

Here is the page: http://www.avonleatreasures.com/LMMbio.html

The lighter color background should continue all the way to the foot of the page.

here is my css: http://www.avonleatreasures.com/AvTreas.css

The lighter background is controlled by #innerwrapper

Any ideas?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Backround color problem in firefox

Remove these four lines from #wrapper

/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD */
width: 98%;
position: absolute;
top:180px;

And remove the fixed height from .container.

To explain.

In standards compliant browsers (not IE) a specified height means exactly that height. You have told firefox to make .container 700px high. Any content that can't fit within that height will be displayed according to the overflow value. AND the element will not expand beyond 700px. Similarly any element it is nested within will only be pushed to expand by the 700px height. Hence the background stops at that point.

For #wrapper. You shouldn't need position:absolute. The element can remain in flow. Because its in flow, it no longer needs a width - it'll automatically take the width remaining once margins, borders and paddings have been taken into account.

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

Thanks so much!

But...now my menu bar is within the innerwrapper. I'd like it to be between the inner wrapper and the submenu (the horizontal bar)

Any ideas on that?

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

Ok, here is what I've done:

I added back in:

width:98%
position: absolute
top: 180px

Without these, wrapper and innerwrapper are too high on the page and don't allow a place for the menu bar.

If I don't have the width: 98%, then both the wrapper and innerwrapper are shifted to the left side of the page. I need them to be centered.

Is this ok the way I have it?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Backround color problem in firefox

Instead of adding back the position:absolute and top:180px, use margin-top: 48px (or some appropriate value).

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

That sorta woked.

If my pages had any photos near the foot, they would extend down beyond the wrapper and innerwrapper.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Backround color problem in firefox

Floats are out of flow. You need to clear them or use one of the wrapping techniques:
- float the parent
- overflow:hidden or overflow:auto on the parent
- position:absolute

Using position absolute is not a good habit to get into because they too are out of flow. Where possible, keep elements in flow as much as possible, your pages will be more robust.

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

Chris..S wrote:
Floats are out of flow. You need to clear them or use one of the wrapping techniques:
- float the parent
- overflow:hidden or overflow:auto on the parent
- position:absolute

Using position absolute is not a good habit to get into because they too are out of flow. Where possible, keep elements in flow as much as possible, your pages will be more robust.

Unfortuantely, you have me lost, now.

when you say the parent, do you mean my wrapper?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Backround color problem in firefox

See enclosing float elements for a simple demo.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

Ok...I think I might have it.

Would you mind taking a look at my css now, and see if it's ok?

I'm still having issues with this page though:

http://www.avonleatreasures.com/RTA/KingFamily.html

Note how the innerwrapper just stops at a certain point. I thought I fixed this issue by taking out the height property from the "container"

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Backround color problem in firefox

Smile nope you haven't got it, you're clearing the wrong element, you are attempting to stop floated elements from doing what they are supposed to do which is drop through their containing element/parent, you have applied overflow:hidden to '#wrapper' it needs to be placed on #innerwrapper not #innerwrappers parent '#wrapper' that element will expand along with #innerwrapper or put another way it's height is controlled by #'innerwrapper.

The basic nomenclature used to describe element grouping /hierarchy, where elements are nested is one of a
'child'( innermost nested element)
belonging to or having a 'Parent' (it's containing element that it sits in , and that surrounds the child) both child and parent can also have 'Ancestors' (being one or more elements that are further up containing the parents and children, not necessarily immediately though ) and of course children can have 'Siblings' (elements that exist at the same level within a group) bellow any element can exist further nested elements these are referred to as 'Descendents' a general term to describe an element that exists as a nested one.

There are of course those elements that have yet to be conceived and these are known as 'Twinklings' Smile

'Sibling' and 'Descendent' as well as 'child' are also methods of specifying/targeting elements from your stylesheet.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

Wow, that seems like it can get so confusing.

No wonder I can't make my family tree, either! Smile

Ok, so all I needed to do was move the overflow: hidden to the innerwrapper? That is done, and the example page above now look right. So I suppose my problem is solved.

Thanks so much everyone for your help.

I have one more question, related to what I've been trying to solve.

Is it possible to make the innerwrapper and wrapper always fill the screen to the foot of the screen?

Here is another example:

http://www.avonleatreasures.com/contact.html

Note that once the content ends, the wrapper and innerwrapper stop. Ii it's possible, I'd like it to continue a bit. Should I just add a bunch of <br />'s?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Backround color problem in firefox

Now you're thinking like a print designer. A web page has no set height. It is as tall or as short as the content. The viewport (the browser window) is whatever size the user wants it to be. Why even fret yourself over it?

That said, and if you insist on doing paper things on an unknowable viewport, it could be done fairly easily were it not for IE. Since IE is pretty stupid about css, we have to fake it. Take a look at this footer demo. It locks the footer to the bottom of the viewport as long as the content doesn't push it down. The space between the content and the footer does not belong to either, but if you control the background correctly, it will appear to belong to the content.

Play with it for a while to get it figured out. If you then hit a snag, yell; we'll be here.

And one more thing, never, never, let me reiterate, never use <br>s to fill space.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Avonlea22
Offline
Regular
Last seen: 15 years 50 weeks ago
Timezone: GMT-4
Joined: 2006-05-19
Posts: 15
Points: 0

Backround color problem in firefox

Thanks Gary...I'll give it a try, if not only to learn a bit more about css.

It must be the printer in me coming out...yes, I worked in printing for over 10 years.

So what DO you use to fill space space?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Backround color problem in firefox

Nothing. You might use margins to create space between elements, or padding to create space within an element.

This is the hard part for trained graphic designers and print people, the content controls the design, not the other way around. In print, design and content are closely intertwined. In a web page they are separate. In print you know the bounds of your document/brochure/label/flyer/whatever. In web design, you have no knowledge of the viewport nor can you control it.

To compare, you've just finished a nice 11×17 poster to advertise a famous author's talk at the library reading club. Now the PR rep says, "Oh, here's 500 words of bio and blurbs that just must be included." Well, that won't fit. You'll have to redesign. Can you even get 500 words on the 11×17 sheet along with the other stuff? At all?

On a web page it doesn't matter. A web page is as long (or short) as it needs to be. The converse is that it is a PITA to emulate a sheet of paper.

I hope you'll understand that the two media are as different as night and day. It's unfortunate that it looks like they have more in common than they really do. It's new paradigm time. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.