Positioning div that contains text, Netscape

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning div that contains text, Netscape

Positioning div that contains text to the top of the page, Netscape.

Adam5000

1:53 am on Mar 8, 2006 (gmt 0)

Thank you everyone for all your help. I appreciate the help and you're all fantastic.

The Netscape cross browser code for my web pages is almost fully written now but there are still a few small areas left. This one in particular.

Part of the home page involves text at the top of the page, and below is the code I'm using.

When this code is viewed with MSIE, the text is at the top of the page. But when viewed with the Netscape browser (version 8.1 based on Firefox), the text appears about 50px below the top. I'm trying to get the text to appear at the top of the page when viewed with the Netscape browser. Help!

<html>
<head>
<title>Text position Netscape</title>
</head>

<body>

</body>
</html>

JAB Creations

12:40 am on Mar 12, 2006 (gmt 0)

Hey Adam,

Odd no one has answered your question yet but...

vertical-align: top;

Plus I'd suggest not using Netscape (AOL's sister bloatware). It's not open source and I've seen some anomalies in it that I did not see in SeaMonkey or Firefox (Netscape is not opensource).

John

Adam5000

9:49 pm on Mar 12, 2006 (gmt 0)

Thank you JAB and you're right. This code works for positioning a div at the top of the page. But the strange thing is, just like the code Top: 0; Position: absolute; Left:0;, it only works with an image, for example <div><img src="picture_1.jpg"></div>

For some reason, the highest I can get the text div on the page using the Netscape browser is about 50px from the top. (when viewed with MSIE, the text div goes all the way to the top). Help!

SuzyUK

10:24 am on Mar 13, 2006 (gmt 0)

Hi Adam5000

is there anything else on the page that is positioned either relatively or absolutely?

Could you post a minimal sample of the code (HTML and CSS) that is causing this.. and btw..vertical align will only really work inside a table cell unless you are using an inline element inside an element with line-height (which might explain the image thing.. but I don't think so) some code will help us clear this up.. and also let us know which Netscape version you're speaking about.. thanks

Suzy

Adam5000

7:51 am on Mar 14, 2006 (gmt 0)

Hello Suzy. Thank you for your reply.

Yes. There are over 20 divs on the front page, all on different layers, and they're all positioned absolutely. Visibility is at zero at the start and then, one at a time, they all fade in.

Below are two of them. One image and one text. The image is at the top of the page, but the text is about 50px below the top.

<DIV id=textOne
style="FONT-SIZE: 30pt; Z-INDEX: 2; LEFT: 480px; POSITION: absolute; TOP: 0px; moz-opacity: 0.0; opacity: 0.0">
<P nowrap>Welcome!</P></DIV>

The Netscape browser version is 8.1 based on Firefox and I downloaded it from the Netscape website about four weeks ago to test the pages. It also says Mozilla 5.0 if that means anything.

SuzyUK

8:28 am on Mar 14, 2006 (gmt 0)

Hi Adam..

My bad, but the updated Netscape version gave me the clue (kick up the butt!) It's collapsing margins [w3.org], you know I can't believe I didn't test that yesterday..

IE is clearly wrong here:

Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

The margin of the <p> is collapsing with it's AP (absolutely positioned) parent div, which is a direct violation. However there is a cure and this is very possibly affecting some of your other positined divs too if they contain elements that have default margins. IE doesn't handle default margins very well but seems to prefer they are explicitly specified.

So instead of letting the default margins have control you can take control by yourself by zeroing all margins on all elements using the global reset
* {margin: 0; padding: 0;}

Then explicitly specify what you want your margins to be, if you use em's they will be based on the font size of said elements the same as the defaults are anyway.

so for your first example

<html>
<head>
<title>Text position Netscape</title>
<style type="text/css" media="screen">
* {margin: 0; padding: 0;}
p {margin: 1em 0;}
div {background: #eee;} /* to visualise div */
</style>
</head>
<body>
<div id="Text" style="font-size:30pt; LEFT: 0px; POSITION: absolute; TOP: 5px">
<p>30pt Text</p>
</div>
</body>
</html>

This then brings IE in line with compliant browsers by containing the <p> margins inside the div, this is likely not what you're after by going by your question so you can just zero the margins on those elements inside divs where you don't want the "gaps"

HTH this time
Suzy

Arkette

9:09 am on Mar 14, 2006 (gmt 0)

Adam I notice no one has asked you what doc type your using. Given that most of your code isn't valid HTML anyway I'm guessing your not using one. That means that IE is automatically running in quirks mode and so you dont stand a chance of getting IE and Mozilla based browsers to render your content the same. Look on www.w3schools.com for tutorials on using doctype and visual rendering.

Adam5000

4:14 pm on Mar 16, 2006 (gmt 0)

Thank you Suzy.
You are just right. The trouble was a huge margin or padding above and below the text. It was like the text was the middle of a sandwich with the margin or padding bigger than the text itself. And the background settings made it all visible so I could see what was going on. When I added the * {margin: 0; padding: 0;} line between the style tags in the head, the margin and padding went to zero and the text went to the top of the page. It also lined up the other text divs. Hat's off on a great job. I wish I could have you over to my place for tea.

Arkette.
Thank you for your help. Yes I do need material that is more current. The material I'm using now is from a book that was loaned to me and it was printed in year 2000 which was six years ago. It appears there have been some significant changes since then. I'll check the link you provided and I'm sure it will be helpful.