5 replies [Last post]
jperez
Offline
newbie
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2008-03-01
Posts: 4
Points: 0

Hello everyone. I'm new to this site and "almost" new to CSS. I need help with nested layers.

I have a simple set of layers: a container, a left floating menu and a right floating content panel (see test code below).

It works fine in Adobe GoLive and in IE7. However, the container layer colapses in Firefox. I need this layer to grow vertically with either the menu or the content, whichever is longer.

AttachmentSize
layertest.txt917 bytes
jperez
Offline
newbie
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2008-03-01
Posts: 4
Points: 0

Sorry, here is the code




Layer Test








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

FF is correctly handling the

FF is correctly handling the rules you have fed to it.

You need to read up on clearing your floats, it's the commonest problem inquired about on the forum, floats are meant to drop through their parents, they are removed from the flow in order that elements may wrap around them, if you want the parent to contain them (bottom edge of parent below floated element, i.e parent stretching with child height)then you need to explicitly tell it to, simplest method that works 7 out of ten times is to add overflow:hidden to parent, it's important though that you read up on this aspect as you need to understand fully how and why this happens and of the other approaches you can take to solving this that may be needed for other layout situations and how the IE family get this aspect badly wrong.

Quick pointers about your markup;

No presentational or positional attributes should be used this is why you have CSS at your disposal.

Drop the use and naming convention 'layers#' layers don't exist as a descriptive name it's a made up dreamweaver thing used to express position absolute elements, name your elements with something far more descriptive of their function.

Use strict Doctypes and ensure that you validate your work often and catch any markup errors, use FF as your primary testing browser along with it's HTML-tidy extension to perform real time validation.

Take care with your CSS properties, don't declare unnecessary properties such as visibility and don't position everything, be careful with offsets such as 'top', 'left' etc seldom are they used and have consequences that you must be aware of.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Let me expand on what Hugo

Let me expand on what Hugo has said.

Yes, you do need to give serious study to floats. The specs do cover all this. Unfortunately, a lot of the applicable rules are scattered about in areas related to how other properties and elements relate to the float, and much is implicit rather than explicit. I've pulled together these disparate bits into a demo, Enclosing Float Elements.

Using offsets for relative positioned elements is a handy tool, but it has side effects. If you don't fully grok what's going on, they will become large toothed gotchas with an appetite for your butt. Further, IE has a particularly buggy position model. There are times when making an element {position: relative;} will fix a bug, and other times, it will cause a bug. Use relative positioning only when you have compelling reason. The many IE bug articles at PIE will touch on this time and again.

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.

jperez
Offline
newbie
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2008-03-01
Posts: 4
Points: 0

Thank you.

Hugo, thank you very much for your reply. You're right: I should read more before trying to do this, but I forgot I've been an engineer for more than 30 years and started coding like a novice. I made it work already. Again, thank you for your reply.

jperez
Offline
newbie
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2008-03-01
Posts: 4
Points: 0

Thanks

Hey Gary, thanks to you too. I checked-up your page about float elements. I whish I had seen it "before" I started coding.