Layout: firefox issue putting divs inside divs

started by David on Dec 3, 2004 — RSS Feed

David David
Posts: 40

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 <div> 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 <div> 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 <div> 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >

<html>
<head>
 <link rel="stylesheet" type="text/css" href="menuBanner.css" />
     <title>Menu Banner</title>
</head>

<body>
<div id="bannerImgBox">
 <div id="buttonPanel"></div>
</div>

</body>
</html>


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 <head> 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 Joe Gillespie
Posts: 528

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 David
Posts: 40

: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 Joe Gillespie
Posts: 528

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 David
Posts: 40

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 Joe Gillespie
Posts: 528

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 David
Posts: 40

ah, cheers.  Duely bookmarked.

Baxter Baxter
Posts: 157

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

You must login to reply