unwanted margin in FF around plain DIV 1

[Ghodmode]

Example is better than description:
[URL unfurl="true"]http://aggrippino.com/demo/html[/url]

I have a [tt]<div>[/tt] at the top of a document that I want to stick up in the top-left corner of the page and have the rest of the text kinda wrap around it. It contains only some plain text. I've got a corresponding stylesheet with padding and margin set to 0, but there's still a space above the [tt]<div>[/tt], which is at the top of the page. The padding and margin are also set to 0 for both the body and html elements.

This problem occurs in Firefox, but not IE. So, I thought it might have something to do with the default stylesheet for each browser. I don't see anything in html.css that would cause this and I don't know how to look at the default stylesheet for IE.

Experimenting, I've learned that I can correct the problem in FF by setting the [tt]margin-top: .5em;[/tt]. Naturally, that hides the top half of the letters in IE.

Does anyone have any idea why it's like this?

The only reason for this page is that I'm trying to improve my understanding about the differences between FF & IE. So, I'm going to write a few demo pages which I may or may not share with the world in a useful way in the future.

Thank you.

--
-- Ghodmode

 

[Vragabond]

You seem to be holding something back. Your example shows a box with HTML inside and some text floated next to it. Now that text could be in a paragraph tag that has some default margin. Why don't you show us the code that does this and we'll see what's the matter.

 

[Ghodmode]

The URL I gave is everything I have. The images on the page are images of that same page.

There's also [tt]css/index.css[/tt], which I didn't mention, but I figured people would glean that from "view source".

The "HTML" is

<div id="title">HTML</div>

and the stylesheet for [tt]div#title[/tt] says

div#title {
    float: left;
    font-family: sans-serif;
    font-size: xx-large;
    font-style: italic;
    font-weight: bold;
    line-height: 1em;
    padding: 0;
    margin: 0;
    /*
    padding-left: 1em;
    padding-right: 10px;
    */
    border: 1px solid blue;
}

Thank you.

--
-- Ghodmode

 

[Foamcow]

Although you have taken the margin and padding from the body and the #title div you still have a margin on the p.

Since the title is floated against the p tag it is pushed down by the margin on the p tag.

Remove that and it will butt against the top of the viewport.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Ghodmode]

Jackpot! Thanks Foamcow! I thought I had already taken care of that with this :

p {
    padding: 0 1em;
}

but that's just the padding. I forgot about the margin. I've added [tt]margin: 0;[/tt] and now everything looks as expected.

I should've known better than to think something would render properly in IE and not in Firefox.

Also, true to my original assumption, I've found why in FFs html.css :

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

I was looking for something affecting DIVs, not Ps

I'm tempted to try an experiment. If I make a copy of Firefox's default stylesheet and [tt]@include[/tt] it at the top of the main stylesheet for every page I create, maybe I can reduce the number of problems encountered when trying to get pages to look the same in all major browsers.

I'll be reading and experimenting. If I learn enough useful stuff, I'll create a new FAQ here.

--
-- Ghodmode