positioning - augh!

[TBanks]

Can somebody help me - I'm (STILL!) working on this page, trying to figure out positioning.

http://www.eodweb.com/test/

The main concern for me is the position of the address/phone numbers. It's supposed to fit just under the company logo on the right side (below the line). The secondary concern is the size of the text.

Problem:

The positioning looks different in Explorer 6, Netscape 7.1, Mozilla Firebird and Opera 7.2 (the worst!!). Now I understand that by (trying) to adhere to standards and create a tableless layout that the idea is that this will all display in many different environments (and quite likely look very different). So I'm not sure if the fact that the address is in different places is

1. the fault of each browser
2. just how it is

- or -

3. my error

The same goes for the size of the text. I know users can set defaults in their browsers, etc., I'm using 'em' for sizing but as I've read that this is the 'best' choice - but is it?

Totally open to comments and suggestions. Still getting my feet wet with css here.

Thanks!

Toni

Extra-Credit: the address sometimes appears way above the company name in internet explorer when all the other browsers show it well below (when I adjust the 'margin-top' value in the style sheet). I'm seriously wondering if it's my ineptitude..but I can't for the life of me figure it out...

[ComputerBob]

I've read many opinions on font sizing. A month ago, I decided to use the technique described here:

http://www.thenoodleincident.com/tut...phy/index.html

[vgarcia]

How's this?

	body {
		background-color: #184642;
		text-align: center;
		font: 1em/1.5em Arial, Verdana, sans-serif;
		color: #cccc99;
	}
      #outer {
		background: #184642 url(test.gif) no-repeat top center;
		width: 744px;
		height: 800px;
		text-align: left;
		margin: 0px auto;
		border: 1px solid #184642;
position: relative;
top: 0;
left: 0;
 /*This is a fix to stop mozilla from sliding the whole page off the left hand side of the viewport as the browser window is resized smaller. (If you want that effect then take the border out.)*/ 
      }
      
      #slideshow {
        margin-left: 30px;
        margin-top: 110px;
      }

      .caption {
       /*	position: relative;
        left: -200px;
        bottom: -30px;    */
        color: #cccc99;
      }
	  #nav {
	  	/*margin-left: 275px;
		margin-top: -25px;*/
                position: absolute;
                top: 180px;
                left: 300px;
	  }
	  #contact {
		/*margin-top: -290px;
		margin-right: 13px;*/
                position: absolute;
                right: 13px;
                top: 90px;
		text-align: right;
	  }
	  ul {
	  	list-style: none;
                margin: 0;
                padding: 0;
		}

[TBanks]

Computer Bob - thanks for the reference - looks like some good info

      .caption {
       /*	position: relative;
        left: -200px;
        bottom: -30px;    */
        color: #cccc99;
      }
	  #nav {
	  	/*margin-left: 275px;
		margin-top: -25px;*/
                position: absolute;
                top: 180px;
                left: 300px;
	  }
	  #contact {
		/*margin-top: -290px;
		margin-right: 13px;*/
                position: absolute;
                right: 13px;
                top: 90px;
		text-align: right;
	  }
	  ul {
	  	list-style: none;
                margin: 0;
                padding: 0;
		}

Vinnie - thanks for the code. Would you mind explaining the reasoning behind the following a bit? Helps me understand better.

in #nav and #contact you took away the margins, and put in absolute positions

in caption, you took away the positioning altogether - in this case it doesn't matter too much since I don't want it to show anyway - but...

in UL you added padding and margin

I was trying to avoid using absolute or relative positioning, to just let things flow naturally - I thought I read that this was better, when possible?? I guess the problem is I don't (still!) know when to do it or when it's better to use relative or absolute positioning, as opposed to - what is it, static positioning?

I also don't understand why what I did didn't work, or if it could (without adding absolute or relative positioning).

thanks!

Toni