Topic: Differences between mozilla and IE?

I'm having some trouble getting my css to dispaly the same in both mozilla and IE 7.  I have a tabbed navigation section, and it renders perfectly fine in IE 7.  However, when I display the same page in mozilla firefox, the tabbed buttons are slightly above the bottom of the table, causing it to lose it's "tab" look.  Does anyone know if it's because there's something wrong with my code, or are there some differences between IE and mozilla that cause these kind of problems?  If anyone could help me with this, I'd greatly appreciate it.  Thanks.

# CSS
#main_nav
{
  margin: 0px;
  padding: 3px 0;
  font: bold 12px Verdana, sans-serif;
}

#main_nav ul
{
  margin: 0px;
  margin-bottom: 0px;
  margin-left: 5px;
  padding: 0px; 
}

#main_nav li
{
  list-style: none;
  margin: 0px;
  display: inline;
  border-bottom: none;
}

#main_nav li a
{
  padding: 2px0.5em;
  margin-left: 3px;
  border-left: 1px solid #778;
  border-right: 1px solid #778;
  border-top: 1px solid #778;
  border-bottom: 1px solid #778;
  background: #DDE;
  text-decoration: none;
}

#main_nav li a:link { color: #448; }

#main_nav li a:hover
{
  color: #000;
  background: #AAE;
  border-color: #227;
}



# THE ACTUAL TAB CODE
<table bgcolor="lightsteelblue" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="bottom">
      <ul id="main_nav"> 
        <li id="main_nav"><%= link_to 'Parent', { :controller => 'adult', :action
          => 'edit', :id => @adult.id }, { :id => 'parent' } %></li>   
    <li id="main_nav"><%= link_to 'Children', { :controller => 'children', :action
          => 'list' }, { :id => 'children' } %></li>
    <li id="main_nav"><%= link_to 'Purchases', { :controller => 'purchases', :action
          => 'list' }, { :id => 'purchases' } %></li>
    <li id="main_nav"><%= link_to 'Print', { :controller => 'print', :action
          => 'display_before_print' }, { :id => 'print' } %></li>
       </ul>
     </td>
   </tr>
</table>

Re: Differences between mozilla and IE?

Yes, IE and Mozilla does not treat CSS the same way. Mozilla uses Gecco to parse CSS while IE has some parser of their own. This makes it harder for the designer to achieve a universal design. However, of course there are ways of fixing these differences in layout.

Your problems seem to be quite basic. You see IE does not handle padding and margins correctly. They add pixels to your padding or margin. While Mozilla, by using the best CSS parser (Gecco), will not. So when you set your padding so that the buttons will be placed according to your wishes, the padding will be perfect for IE, but not for Mozilla. The solution? Well you could use CSS hacks (just Google it) so that IE will have their set of paddings and margins while Mozilla will have another set of margins and paddings adjusted to their browsers. However, by learning the common issues with IE you can avoid ugly CSS hacks. This is the best way to solve your problem. One site that helps you understand the differences and grants you tutorials of how to code for all forms of browsers is 24 ways. Read threw their articles.

Good luck!

Re: Differences between mozilla and IE?

You should check out the Yahoo! UI Library - specificly the reset and font reset libraries. I created a post about it here.

Chris

Re: Differences between mozilla and IE?

Make sure you have a correct doctype as well otherwise IE changes to quirks mode breaks the css box model.