aaaaaa I hate firefox

I don't really, I love it, but I am annoyed that my site works perfectly in IE and not firefox when it's normally the other way round.

I can't for the life of me figure out where I'm going wrong. I'm sure I've tried editing every single css element 20 times and I just can't fix it.

Anyway, here's the link

www.10yetis.co.uk/pr/home.html

You can see in IE it's all aligned perfectly, however in firefox, it's moved down about 10 pixels just above the iceberg image, which has in turn pushed everything else down so that I don't have a proper border on the footer.

Here's the css file:

/* Layout Stylesheet */

body {
background:#ffffff;
color: #000000;
text-align:center;
margin-top:30px;
}

.img {
border:none;
}

p {
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
text-decoration: none;
vertical-align: top;
}

h1 {
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: bold;
text-decoration: none;
}

#headerlinks {
background-image:url(../images/bartop.gif);
background-repeat:repeat;
border:solid black;
border-width:1px 0 1px 0;
width: 650px;
height:19px;

}

#outside {
background:#ffffff;
text-align:left;
border:solid black;
border-width:1px 1px 1px 1px;
width:650px;
height: 378px;
margin-left: 10px;
margin-top: 10px;

}

#copyright {
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color:#999999;
}

#greybox {
text-align:left;
background:#999999;
border:1px solid #000000;
width:670px;
height:408px;
margin: auto;

}

#headerimage {
width: 650px;
height:40px;

}


#main {
width:650px;
height:300px;
background:#ffffff;

}

#flash {
float:left;
background:#ffffff;
color: #000000;
width:150px;
height:300px;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;

}

#content {
background-image: url(../images/iceberg_pr.gif);
width:490px;
height:300px;
color: #000000;
text-align:left;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 10px;
font-weight:normal;
text-decoration:none;

}

#footer {
background-image:url(../images/barbottom.gif);
background-repeat:repeat;
text-align:right;
color: #000000;
border:solid black;
border-width:1px 0 0 0;
height:19px;
width: 650px;

}

/******************************** links ***************************************/

a.foot:link {
vertical-align:text-bottom;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
color: #000000;
font-weight: bold;
}
a.foot:hover {
vertical-align:text-bottom;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
color: #ffffff;
font-weight: bold;
}
a.foot:visited {
vertical-align:text-bottom;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
color: #000000;
font-weight: bold;
}

a.a:link {
vertical-align:text-bottom;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
border:none;
}
a.a:hover {
vertical-align:text-bottom;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
}
a.a:visited {
vertical-align:text-bottom;
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
}

a.pink:link {
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FF00FF;
border:none;
}
a.pink:hover {
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FF99FF;
}
a.pink:visited {
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FF00FF;
}

a.grey:link {
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #999999;
border:none;
}
a.grey:hover {
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
}
a.grey:visited {
text-decoration: none;
font-family:Tahoma,Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #999999;
}

Please someone help me before I put my head in the oven?

 

And lifelong user of IE only.
I gave up on firefox for a number of reasons.

 

it also pushes everything out of the box over to the right if I go over the 300 height in the content div.

grr

 

That's due to margin collapse. Firefox has done this correctly. IE has failed again. Do either of

h1 {
    margin-top: 0;
    }

or

#content {
    padding-top: 1px;
    }

Code (markup):

I would choose the second, in this case.

cheers,

gary

 

IE and Firefox has been an issue for me for a long time.
Then i heard that the problem comes from IE not complying to the W3C standard. In this case it's IE you should hate.
Though there are some script to fix this.

 

I see, thanks

It's not fixed it completely, but it's definitely better.

Although it's still pushed way over to the right - any idea what I've done wrong there?

 

ignore me, i worked it out

 

Consider yourself ignored.

cheers,

gary

 

Hope you love firefox now..

 

still doesn't look quite right to me. can you try setting some margins or line heights on your hyperlinks? they seem to be jumping around.

James

 

Is the news text supposed to be so microscopic? Screenshot here.

Mike