.CSS issue - IE vs. Mozilla

I'm working on some new site templates, designing with .css. I've tried every
possible .css combo I can think to get identical correct results in IE and
Mozilla browsers. I've succeeded except for a 5-pixel gap on the right side of
my navbar (link borders and css background image are short of the right edge by
5 pixels) when viewing in IE, but displays perfectly in Mozilla. View URL below
in both browsers and you'll see what I'm talking about. I've attached .css
code. I'd be most grateful to anyone who can identify the missing piece of the
puzzle here.

http://www.healthdataservices.com/2006HDShome.htm

Thanks!

JD

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000066;
width: 182px;
border-top: none;
border-right: none;
border-bottom: 1px solid #FFFFFF;
border-left: none;
text-decoration: none;
line-height: 20px;
float: left;
text-indent: 5px;
}

a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000066;
width: 182px;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
line-height: 20px;
text-indent: 5px;
float: left;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #006699;
background-color: #FFFFFF;
width: 182px;
margin-left: 0px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
text-decoration: none;
line-height: 20px;
float: left;
}
.navheaders {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
width: 182px;
line-height: 20px;
background-color: #004284;
margin: 0px;
padding: 0px 0px 0px 5px;
}
.BkgrndImage {
background-image: url(images/2006-NavbarArt_03.jpg);
background-repeat: no-repeat;
}
.MLbkgrndImage {
background-image: url(images/2006-MLNavbarArt_03.jpg);
background-repeat: no-repeat;

I don't think there's a default margin or padding, but try adding these two
rules:

td {
margin:0;
padding:0;
}

a {
margin:0;
padding:0;
}

Every browser is a little different on default margins and padding, so it's
good practice to zero them out, then adjust them to suit.
"jdove" <webforumsuser (AT) macromedia (DOT) com> wrote

I'm working on some new site templates, designing with .css. I've tried
every
possible .css combo I can think to get identical correct results in IE and
Mozilla browsers. I've succeeded except for a 5-pixel gap on the right
side of
my navbar (link borders and css background image are short of the right
edge by
5 pixels) when viewing in IE, but displays perfectly in Mozilla. View URL
below
in both browsers and you'll see what I'm talking about. I've attached .css
code. I'd be most grateful to anyone who can identify the missing piece of
the
puzzle here.

http://www.healthdataservices.com/2006HDShome.htm

Thanks!

JD

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000066;
width: 182px;
border-top: none;
border-right: none;
border-bottom: 1px solid #FFFFFF;
border-left: none;
text-decoration: none;
line-height: 20px;
float: left;
text-indent: 5px;
}

a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000066;
width: 182px;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
line-height: 20px;
text-indent: 5px;
float: left;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #006699;
background-color: #FFFFFF;
width: 182px;
margin-left: 0px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
text-decoration: none;
line-height: 20px;
float: left;
}
.navheaders {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
width: 182px;
line-height: 20px;
background-color: #004284;
margin: 0px;
padding: 0px 0px 0px 5px;
}
.BkgrndImage {
background-image: url(images/2006-NavbarArt_03.jpg);
background-repeat: no-repeat;
}
.MLbkgrndImage {
background-image: url(images/2006-MLNavbarArt_03.jpg);
background-repeat: no-repeat;

Lionstone,

Thanks for the reply. Through another forum I learned that by simply setting
the Block Display to 'Block' (which I didn't know to do) fixed the problem,
though I was also informed that creating links as either an ordered or
unordered lists was really the correct way to do this. For more (and extensive)
info, see CodingForums.com thread:

http://www.codingforums.com/showthre...176#post328176

Now displays correctly in Mozilla and IE (and NS)!

Thanks again,

JD

Yeah, using an unordered list helps out when someone is looking at your page
in a text-only browser (your navigation is a neat little bulleted list) or a
Blackberry or things of that nature.

"jdove" <webforumsuser (AT) macromedia (DOT) com> wrote

Lionstone,

Thanks for the reply. Through another forum I learned that by simply
setting
the Block Display to 'Block' (which I didn't know to do) fixed the
problem,
though I was also informed that creating links as either an ordered or
unordered lists was really the correct way to do this. For more (and
extensive)
info, see CodingForums.com thread:

http://www.codingforums.com/showthre...176#post328176

Now displays correctly in Mozilla and IE (and NS)!

Thanks again,

JD