I am re-doing a site in CSS instead of tables (I have posted this site before). So far, so good except...The first headline on the page is not in the same position in IE as in FF. The text in question is "Welcome to real change"

Does anyone have any suggestions on how to make the line appear the same in both browsers.

The page is: http://www.ontraxweb.com/test/index.php

Note that I do not have the links or the form active on this page.

Thanks.

Firefox is adding on a default margin amount to the top and bottom of the H1. Add a margin value to the H1 in your css and it should line up the same in both browsers.

Thank you, what a quick easy fix. Much appreciated.

Get in the habit of zeroing out margins and padding on all your main elements at the very top of your CSS file and you won't have to deal with this again.

I am having an issue with the css for my clients site in IE it lines up smooth but in Firefox it has this annoying 1 px alignment off and it's only on this one section, now i have zeroed out the padding and etc, but still it persists. any chance one of you could help this young aspiring web designer.

here's the css

.header
{
width:762px;
height:95px;
background-image: url(images/header.gif);
background-repeat: no-repeat;
color: black;
text-align: center;
padding:0px;
border-spacing:0px;
margin:0px;
}

.logo
{
width:258px;
height:600px;
background-image: url(images/stripes.gif);
padding:0px;
border-spacing:0px;
vertical-align:top;
text-align:left;
}

.buttons
{
padding:0px;
width: 762px;
height: 19px;
background-color: #46166b;
border-spacing:0px;
border:none;
vertical-align: top;




}

.content
{
padding:0px;
width: 762px;
height: 486px;
background-image: url(images/content.gif);
text-align:center;
color: black;
padding:0px;
border-spacing:0px;
vertical-align: top;
}

.footer
{
width: 1020px;
height: 137px;
margin-left: auto;
margin-right: auto;
background-image: url(images/footer.gif);
background-repeat: repeat;
text-align: left;
padding:0px;
border-spacing:0px;
color: black;
}

thank you

almost forgot here is my drop button div's

.main0outerTABLE
{
border-spacing:0px;
border-style: none;
border-collapse: collapse;
}
.main0outerTD
{
padding:0px;
border-style: none;
border-collapse: collapse;
}
.main0innerDIV0
{
text-align:center;
vertical-align:middle;
background-color:#46166b;
border-collapse: collapse
}
.main0innerDIV0:hover
{
text-align:center;
vertical-align: middle;
background-color:#46166b;
border-collapse: collapse
}
.main0innerDIV_current0
{
text-align:center;
vertical-align: middle;
background-color:#46166b;
border-collapse: collapse

}
.main0A0
{
font-family:arial;
font-size:12px;
font-weight:bold;
color: white;
text-decoration:none;
text-align:right;
vertical-align:middle;
margin-left:4px;
margin-right:4px;
}
.main0A0:hover
{
font-family:arial;
font-size:12px;
font-weight:bold;
color: #a7c178;
text-decoration:none;
text-align:right;
vertical-align:middle;
margin-left:4px;
margin-right:4px;
}
.main0A_current0
{
font-family:arial;
font-size:12px;
font-weight:bold;
color: white;
text-decoration:none;
text-align:right;
vertical-align:middle;
margin-left:4px;
margin-right:4px;
}


.main0innerDIV1
{
text-align:center;
vertical-align:middle;
background-color:#df7a1c;
}
.main0innerDIV1:hover
{
text-align:center;
vertical-align: middle;
background-color:#df7a1c;
}
.main0innerDIV_current1
{
text-align:center;
vertical-align: middle;
background-color:#df7a1c;

}
.main0A1
{
font-family:arial;
font-size:12px;
font-weight:bold;
color: white;
text-decoration:none;
text-align:center;
vertical-align:middle;
margin-left:4px;
margin-right:4px;
}
.main0A1:hover
{
font-family:arial;
font-size:12px;
font-weight:bold;
color: #a7c178;
text-decoration:none;
text-align:center;
vertical-align:middle;
margin-left:4px;
margin-right:4px;
}
.main0A_current1
{
font-family:arial;
font-size:12px;
font-weight:bold;
color: white;
text-decoration:none;
text-align:center;
vertical-align:middle;
margin-left:4px;
margin-right:4px;
}

Have you got a URL where we can actually see it ?