firefox issue putting divs inside divs | WPDFD.com Forums

David said:

12/03/04, 338 44 2004 2004:%i:1102117493 18:44:53

Hi guys,

First off, congrats on a great website. I only discovered it a week ago, aparently when it's finally stopped publishing.

Anyway, I've been trying to recreate something similar to the "Buttons over Images" article from last months issue and I've hit a snag while trying to put an absoute

into a relative one. It works fine in IE, and in Firefox it works fine horizontally, but vertically the thing screws up:

The Code

(Briefly, I'm using strict xhtml with an external css. Unfortunately it's on my local disc and I notice there's no way for me to attach external files, so I'll do the best I can to explain the problem showing what I hope is the relevant code below.)

The outer

has an id looking something like this:

#bannerImgBox
{
      position: relative;
      text-align: left;
      margin-top: 90px;
      margin-left: 90px;
      width: 432px;
      height: 160px;
      background-image: url(fanartyear1.jpg);
      background-repeat: no-repeat;
      display: block
}

while the inner

looks like this:

#buttonPanel
{
  position absolute;
  text-align: left;
  width: 40px;
  height: 10px;
  margin-top: 90px;
  margin-left: 10px;
  background-color: #9500fa;
  overflow: hidden;
  display: block
}

The html is:





  
      Menu Banner

The Problem

If I set [margin-left] to 90px for the outer box, say, and then set [margin-left] to 10px for the inner one, then the inner box will appear 100px from the left hand edge of the screen, as it should. Likewise, if I set [margin-left] to -10 the distance from the left hand edge of the screen will be 80px. So far so good.

Now, if I try the same thing with margin-top strange things start to happen. If I set [margin-top] to a -ve value, the top edge of the inner-box remains flush with the outer-box and the whole lot moves up 10pxs. In the +ve domain everything remains fixed at 90pxs from the top (as if [margin-top] = 0) until the inner-box's [margin-top] value exceeds the outer-box's. Then the whole lot moves to a distance from the top of the screen equal to that set in the inner-box.

So if I set [margin-top] to 90px for the outer box and [margin-top] to 100px for the inner box the whole thing moves down 10px so that the outer box is 100px away from the top of the screen and the inner box remains flush with its top edge.

This does not happen if I open the same file in IEv6 and it doesn't happen if I make the outer-box's position absolute.

Can anyone shed any light on what might be going on here and how I might fix it. There's obviously something that I'm not taking into consideration because Joe Gillespie's examples all render fine in Firefox (although I'll be damned if I can work out why).

I wondered at one point if Firefox's own CSSs were causing a problem and tried moving my CSS inside the part of my html page, in the hope that it would take priority, but it didn't help.

This really has me perplexed; someone help?...

Joe Gillespie said:

12/04/04, 339 42 2004 2004:%i:1102153363 04:42:43

David, you are really going to kick yourself on this one...

Try putting the : after position in < position[red]:[/red] absolute; >
and you will get the behaviour you want.

David said:

12/04/04, 339 28 2004 2004:%i:1102159730 06:28:50

:o

Left calf duely kicked!

You wouldn't believe the number of hours I spent trying to solve that one. Thanks for your help: I still probably wouldn't have seen it if you hadn't shown me :

Joe Gillespie said:

12/04/04, 339 10 2004 2004:%i:1102162211 07:10:11

But, the W3C CCS Validator would have picked it up. If you have Firefox, install the Web Developer Toolbar

http://www.chrispederick.com/work/firefox/webdeveloper/

it will save the skin on your shins, the hair on your head...and whatever other forms of abuse you inflict upon yourself

David said:

12/05/04, 340 45 2004 2004:%i:1102254324 08:45:24

aye, I did try actually, but it seems that w3c won't validate pages begining "file://..", only for http or ftp websites. I already found the wd toolbar and have found it invaluable, if a little buggy. In fact I think I installed it after reading your review. So thanks for that.

Joe Gillespie said:

12/05/04, 340 02 2004 2004:%i:1102262550 11:02:30

If you go to the validator pages, you can upload files from your local machine for validation without them needing to be on a server.

HTML
http://validator.w3.org/

CSS
http://jigsaw.w3.org/css-validator/validator.html.en

David said:

12/05/04, 340 03 2004 2004:%i:1102291418 19:03:38

ah, cheers. Duely bookmarked.

Baxter said:

12/06/04, 341 41 2004 2004:%i:1102344092 09:41:32

In the WD toolbar, under "validation" select validate local html... and you're set.