Firefox/IE CSS Difference Question, from a noob

[vexion]

Hi,

I'm practically new to web design, and find myself designing a site for a small business. I lifted a free pure-CSS horizontal dropdown menu to use along the top, but now that I've edited it to include my own buttons, I find that FF and IE are displaying it differently.

A page containing the menu is here: http://www.chewningtkd.com/testmainpage.html

The HTML reads like this:

<tr>
<td height="23" bgcolor="#b9121b">
<div>
<ul id="navigation-1">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="#" title="Programs">Programs <span>&raquo;</span></a>
<ul class="navigation-2">
<li><a href="ita.html" title="ITA Taekwondo">ITA Taekwondo</a></li>
<li><a href="jiujitsu.html" title="Jiu-Jitsu">Jiu-Jitsu</a></li>
<li><a href="defense.html" title="Women's Self-Defense">Women's Self-Defense</a></li>
</ul>
</li>
<li><a href="schedule.html" title="Schedule">Schedule</a></li>
<li><a href="calendar.html" title="Calendar">Calendar</a></li>
<li><a href="#" title="Events">Events <span>&raquo;</span></a>
<ul class="navigation-2">
<li><a href="birthdays.html" title="Birthdays">Birthdays</a></li>
<li><a href="schoolvisits.html" title="School Visits">School Visits</a></li>
<li><a href="clinics.html" title="Clinics">Clinics</a></li>
</ul>
</li>
<li><a href="instructors.html" title="Instructors">Instructors</a></li>
<li><a href="media.html" title="Photos/Videos">Photos/Videos</a></li>
<li><a href="phpBB3/index.html" title="Forums">Forums</a></li>
<li><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</td>

The CSS used is as follows:

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:88px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:88px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:86px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

The menu is embedded in a <div>, which is in turn embedded in a <td>. I originally found that, while my site table was 800px wide, because I had 9 menu buttons, I couldn't get an even fit. So I changed the background color on the <td> to the same background color as the menu buttons, to mask the fact that they didn't fit.

In Firefox, this appears to work fine: menu fits and works. In IE, though, there is an extra line of red beneath the actual menu. For the life of me, I can't figure out why.

Any help would be greatly appreciated. Thanks in advance!

[jcdevelopment]

I have looked in all browsers and i cant see a difference. Are you looking in IE6 or 7? Not sure if im missing something but i dont see it.

[tomws]

I'm with jcd - looks the same here in FF2 and IE7.

[bazz]

Have you an extra </li></ul> at the end? a blurred look at your code suggests to me that you may have.


<ul id="navigation-1">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="#" title="Programs">Programs <span>&raquo;</span></a>
<ul class="navigation-2">
<li><a href="ita.html" title="ITA Taekwondo">ITA Taekwondo</a></li>
<li><a href="jiujitsu.html" title="Jiu-Jitsu">Jiu-Jitsu</a></li>
<li><a href="defense.html" title="Women's Self-Defense">Women's Self-Defense</a></li>
</ul>
</li>
<li><a href="schedule.html" title="Schedule">Schedule</a></li>
<li><a href="calendar.html" title="Calendar">Calendar</a></li>
<li><a href="#" title="Events">Events <span>&raquo;</span></a>
<ul class="navigation-2">
<li><a href="birthdays.html" title="Birthdays">Birthdays</a></li>
<li><a href="schoolvisits.html" title="School Visits">School Visits</a></li>
<li><a href="clinics.html" title="Clinics">Clinics</a></li>
</ul>
</li>
<li><a href="instructors.html" title="Instructors">Instructors</a></li>
<li><a href="media.html" title="Photos/Videos">Photos/Videos</a></li>
<li><a href="phpBB3/index.html" title="Forums">Forums</a></li>
<li><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>

</li>
</ul>





hth

bazz

[effpeetee]

Try adding this.

@charset "utf-8";
/* CSS Document */

*{
padding:0;
margin:0;
}

a {
text-decoration:none
}
.weekday {
color:#000000;
font-family: "Times New Roman";
font-size: 16px;
font-style: normal;
font-weight: bold;
text-decoration: underline;
}

It helps on my PC - IE7 and FFox latest.

Frank