Problems precisely positioning H1 and P in DIV

And IE showing different results from the rest

[picophd]

I have a "static" #container, and a "relative" #masthead inside it at the top. They're centered horizontally on the page.

Positioning and floating the nested images inside the #masthead is fairly manageable. However, positioning an h1 heading element for the site title and a paragraph p element for the links--seems like mission impossible! The heading always has strange uncalled-for spaces over it, and the links appear far to the right in weird places. I tried to adjust the line-height of both, and tried giving them margin-top, etc, but it just won't work. And just when I'm about to make it work with Firefox, for instance, things look very different in IE. And there must be floating here to make the items look the way they should. There's also a logo to the left of the heading and links, so it looks very complicated to me.

I'm not sure if this explanation is enough for a CSS savvy to visualize the problem, but I sincerely hope so.

How can I accurately position the h1 and p elements inside that masthead?

Thanks for anyone taking the time to help and give tips.

[4css]

Some browsers tend to give extra space around headings and I believe in regards to a paragraph?, in IE.

say you have a set up like this

div#header {
text-align: left;
}
and you have a heading within this. What you need to do is zero out margins and paddings (You can give your styles within the header div for the heading and it should work out for you)

div#header h1 {
margin: 0px;
padding: 0px;
}
I'm sure that someone that knows this a bit better might be able to explain it better for you, but try this out and see if it helps you any.

I also did this with a paragraph that seemed to have a one or two letter indentation in IE and it worked, I'm not sure if that was a legitimate way of doing it, but it worked. You might want to search IE bugs with paragraphs to see what you can find on it.

[picophd]

Ok, after rigorous correcting and pinpointing, I've come to feel that the problem with the H1 (haven't tackled the P yet!) is that there's some space over it by default in Firefox, whereas there's no space over it in IE. So if H1's position is being controlled using a DIV layer, for instance, and the line-height is zero, half of the heading is invisible in IE as it is outside the DIV layer upwards, but it all shows correctly in Firefox. And if I increase the line-height until all the heading is showing, I'm left with the problem of the difference in position.

Do you know a hack or solution to this problem?

[4css]

and the line-height is zero

Ok, I think you misunderstood. Its not the line height that you need to zero out. Its the margin and padding that needs to be zeroed out.

div#one h3, div#two h3, div#three h3, div#four h3 {
 margin: .45%;
 background-color: #F0FFFF;
 text-align: center;
 font-weight: bold;
 font-size: 125%;
 }
div#one {
 width: 98%;
 float: left;
 background-color: #ffffff;
 font-weight: bold;
 font-size: 85%;
 }

Here is a sample from one of my pages. See how I have the divs set up? With the margins and the paddings? In this case though, since I have a background color, I gave my headings a slight margin to see how this would work out for me. And of course, since you can't view the whole design, you can't really picture what it is that I am doing with it. But it should give you some idea of how to do this.

Also, you are using an incorrect term here. A Div is not a layer. ;) A div is a div.

Maybe you could post some of your css and xhtml. Someone who is more experienced then I can most likely help you out much faster.

[kk5st]

You're both on track. The issue is margins and how they collapse.

By making h1, p {margin-top: 0;}, both will snug up to the top of their respective divs without the margins collapsing and separating the divs from that above.

You may also give each div containing the offending elements padding or border. Either will confine the element's margin within the div.

Eric Meyer discusses uncollapsing margins [complexspiral.com] with more clarity than I could ever muster.

cheers,

gary