padding/positioning ??? don't know

[catfish]

I need a bit of help and want to explain myself but probably best to view. I have a couple of questions as usual with the discrepency between IE and FF. I like the way it looks in IE. In question is the position of the logo. I want it sort of centered top to bottom within the red header as in IE but it is not in FF.

Secondly the left Col is flush at the top with the bottom of the red header in IE. I want this too but it has a gap between the 2 in FF.

Here is a link to a site in progress.

http://www3.telus.net/public/catfish/about.html

Can anyone explain this please, I've been positioning/repositioning and padding for hours now.

Thanks so much. :mad:

[jessnoonyes]

Well if I were you I'd design it so it looks the way you want in FireFox, and then add some IE hacks to adjust the padding in IE. So say this was the way it's supposed to look in all browsers but IE:

.logo {
position:absolute;
left: -37px;
top: -130px;
}

to adjust it for IE put a _ just before. All other browsers will ignore it but IE will apply it. So something like:

.logo {
position:absolute;
left: -37px;
top: -130px;
_left: -47px;
_top: -140px;
}

By the way, looks like you'll need some kind of png fix for your logo for internet explorer. But it's a nice looking website! Good job!

[Centauri]

What you are seeing here is the incorrect way IE treats margin collapse (top margin on the h1, which correctly pulls the top of #container down). If both the the logo image (with link) and the address div were inside the header div (which would make more sense) then they would not be affected by this. Also, rather than use a top margin on the h1, use top padding instead.

[catfish]

Thankyou for your replies so fast;
I agree, that it makes more sense to have the logo and the address positioned within the header div and believe me I tried many things. What I was trying to achieve was for the logo to remain in a fixed position sitting above the left Col for when the browser window is minimized slightly. I now do have it in the header div and it has corrected the position top and bottom within the red header, I don't have to use the IE fix but it moves now when adjusting the browser window??

I removed the margin top of the h1 in the content and the h2 in the left col and I am still getting the gap between the header and the left col in FF. I guess it doesn't look bad but I would like it to look the same in all browsers.

What do you mean about a png fix for the logo? How is it looking to you? Now you have me worried.:confused:

Here is the link again. Thanks for the help.

http://www3.telus.net/public/catfish/about.html

[Centauri]

Actually, it doesn't move, just that it is positioned relative to the side of screen while the content is relative to the center. If you put the logo link within the #address div, you can use that div to provide the centering (like the content), float the logo to the left, and use a right margin to space the contact text across. If the address heading was actually a heading(h4), then a bt of top paddng spaces it from the top :<div id="header">

<div id="address">
<a href="#"><img class="logo" src="images/logo.png" alt="Radd Cruisers Logo" height="120" width="500"></a>
<h4>RADD CRUISERS</h4>
21 - 4970 Polkey Rd.<br>
Duncan, B.C.,<br>
1-250-746-8977</div>
</div>
.logo {
float: left;
margin-right: 150px;
}

#address {
width: 820px;
font-size:1em;
color:#000000;
margin: 0 auto
}

#address h4 {
color:#000000;
font-size:1.2em;
font-weight:bolder;
font-family:"Times New Roman", Times, serif;
font-style: italic;
padding-top: 25px;
margin: 0;
}