Moz to IE absolute/relative differences

[johnwm]

Excuse a noob question, but I'm seeing a difference in output between Moz & IE that I can't crack. I'm using the following (courtesy

http://www.ssi-developer.net/main/templates/)

#hdr{
	height:1px;
	background:#CCFFCC url(images/bg2.gif) repeat-x;
	border:0px solid #000000;
	margin:0px 0 0 0;
 }

#lh-col{
 position: absolute;
 top: 80px;
 left: 20px;
 width: 180px;
 border: 1px solid #000000;
 background: #DDFFDD;
 color: #333333;
 margin: 20px;
 padding: 10px;
 height: 600px;
 }

#rh-col{
	margin: 50px 20px 20px 260px;
	border: 1px solid #000000;
	background: #DDFFDD;
	color: #333333;
	padding: 20px;
	position: relative;
	top: 0px
 }

as (part) of my layout.css

Using this in my page, I can't get the tops of the right and left columns to line up in IE and in Moz at the same time:

<div id="hdr">
  <h1>Essex Steam</h1>
</div>

<!-- left column -->
<div id="lh-col"><br />
<h4 align="center">Contents

<br /><br />
<a href="index.htm">Home</a>

</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"> 
  <p align="center"><a href="index.htm"
title="Go to main page."><img src="images/logo1.jpg" alt="Home" border="0"
width="500" height="160" /></a></p>
   <br />
  <p>Welcome to the Essex Steam site.</p>
  <br />
</div>

Any ideas please? or where should I look next?

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

 

[cLFlaVA]

john;

Here's the first iteration. Notice the changes I've made.

#hdr{
    height:1px;
    background:#CCFFCC url(images/bg2.gif) repeat-x;
    border:0px solid #000000;
    margin:0px 0 0 0;
 }

#lh-col{
 position: absolute;
 top: 80px;
 left: 20px;
 width: 180px;
 border: 1px solid #000000;
 background: #DDFFDD;
 color: #333333;
 margin: 20px;
 padding: 10px;
 height: 600px;
 }

#rh-col{
    [red]margin-left: 260px;[/red]
    [green]/* margin: 50px 20px 20px 260px; */[/green]
    border: 1px solid #000000;
    background: #DDFFDD;
    color: #333333;
    padding: 20px;
    [red]position: absolute;[/red]
    [red]top: 100px;[/red]
 }

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[johnwm]

Thanks for your input!

I've already tried changing position to absolute in #rh-col, but as soon as I do then IE makes the width of the right column too wide for the browser window,no matter how wide I make the window.

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

 

[cLFlaVA]

I'm not sure I understand what you mean. When I open the page in IE, the right column is completely within the window.

a) is there more code you haven't shown
b) if not, I can't replicate the problem...

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[johnwm]

Thank you for staying with me. The problem now seems to be related to body text width in the right column. I've stretched IE to cover both screens (approx 2000 px) and I can now see the rhs of the column. The column width seems to be determined by the text between <br/> rather than the size of the IE window. As I narrow the window a scrollbar appears, but the text doesn't wrap round until the column is about 3/4 of the width of the sentence. The actual text in the column is:

  <p>Welcome to the Essex Steam site.</p>
  <br />
  <p> We currently own and operate two steam rollers and one diesel roller from 
    our base in Maldon. The steam rollers are a <a
href="wallis.htm">Wallis &amp; Steevens 8 Ton</a> and an <a href="/aveling.htm"> 
    Aveling &amp; Porter 8 Ton</a><br />
    Currently the Wallis is available for <a href="trips.htm">Steaming days</a>, 
    and you will find us at many of the local steam rallies. The Aveling is currently 
    undergoing a refit, including some boiler work. The refit is being done at 
    our <a href="repairs.htm">own works</a>, where we will be pleased to quote 
    for any repairs and restoration for your engines<br />
  </p>

The CSS for body is:

body{
 margin: 10;
 padding:10;
 background: #CCFFCC url(none) no-repeat;
 color: #ffffff;
 }

and for p is:

p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: lighter;
	color: #003300;
}

I would appreciate any more thoughts please

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

 

[johnwm]

I've found the problem!!!

If the #hdr div is 1 pixel high, and you put big text or caption (or whatever) in it different things happen.

In IE the 'relative' seems to measure from the bottom of the actual text

In Mozilla the 'relative' measures from the bottom of the div. Threfore if height of the div and height of the div contents aren't the same the browsers display differently.

I hope this may save someone else some grief!

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts