Topic: Menu bar is display centered instead of aligned to the right

Hi and a good evening,
I have here a huge issue. In an application I use a standarized CSS Layout. In the IE and the Eclipsebrowser, the Layout is displayed correct, but in the FF the menu is displayed centered:
http://www.southendjazz.com/bilder/cssissue.jpg

I don't get into it, why this happend. The header is displayed in the layout file in a div:

<div id="header">

  <h1 id="logo">Pattern <span class="green">To</span>-<span class="gray">Go</span></h1>
  <h2 id="slogan">L&ouml;se deine Probleme hier</h2>
  <!-- Menu Tabs -->
  <ul>
      <% if logged_in? %>
   Eingeloggt als: <%= current_user.login %>
   <% end -%>

      <% if logged_in? %>
   <li><%= link_to content_tag(:span, "Startmen&uuml;"), :controller => 'pattern', :action => 'index', :user_id => @current_user.id %> </li>
      <% end -%>

   <% if logged_in? %>
   <li><%= link_to content_tag(:span, "Mein Konto"), :controller => 'users', :action => 'edit', :user_id => @current_user.id %> </li>
   <% end -%>

   <% if logged_in? %>
   <li><%= link_to content_tag(:span, "Neue Idee"), :controller => 'pattern', :action => 'new' %> </li>
      <% end -%>

   <% if logged_in? %>
   <li><%= link_to content_tag(:span, "Forum"), :controller => 'forum', :action => 'index' %> </li>
      <% end -%>

   <% if logged_in? %>
   <li><%= link_to content_tag(:span, "Ausloggen"), :controller => 'users', :action => 'logout' %> </li>
   <% else -%>
   <li><%= link_to content_tag(:span, "Einloggen"), :controller => 'users', :action => 'login' %> </li>
   <li><%= link_to content_tag(:span, "Anmelden"), :controller => 'users', :action => 'new' %> </li>
   <% end -%>
    </ul>

</div>


So in the Layout nothing is written about center. In the CSS file, I'm also not able to find an allignment...
/* headers */
h1, h2, h3 {
font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
color: #333;
}
h1 { font-size: 1.5em; color: #6297BC; }
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; }

p, h1, h2, h3 {
margin: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #4284B0;
}
ul span, ol span {
color: #666666;
}

/* header */
#header {
position: relative;
height: 69px;
background: #000 url(../images/headerbg.gif) repeat-x 0% 100%;
}
#header h1#logo {
position: absolute;
margin: 0; padding: 0;
font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
top: 0; left: 5px;
}
#header h2#slogan {
position: absolute;
top:36px; left: 95px;
color: #666666;
text-indent: 0px;
font: bold 11px Tahoma, 'trebuchet MS', Sans-serif;
text-transform: none;
}
/* menu tabs */
#header ul {
z-index: 999999;
position: absolute;
   margin:0; padding: 0;
   list-style:none;
right: 0;
bottom: 6px !important; bottom: 5px;
font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(../images/tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(../images/tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
color: #FFF;
}
/* end menu tabs */


In the rendered View (FireFox) I got the following HTML:
<div id="header">                
           
        <h1 id="logo">Pattern <span class="green">To</span>-<span class="gray">Go</span></h1>   
        <h2 id="slogan">L&ouml;se deine Probleme hier</h2>
        <!-- Menu Tabs -->
        <ul>
            
            Eingeloggt als: beatrice
                       
            
            <li><a href="/pattern?user_id=2"><span>Startmen&uuml;</span></a> </li>           
            
           
            <li><a href="/users/edit?user_id=2"><span>Mein Konto</span></a> </li>           
                       
           
            <li><a href="/pattern/new"><span>Neue Idee</span></a> </li>           
                       
           
            <li><a href="/forum"><span>Forum</span></a> </li>           
                       
           
            <li><a href="/users/logout"><span>Ausloggen</span></a> </li>

                      </ul>   
                                                   
    </div>


Is their any chance to change this for FF? I need this layout really (for my university) and I go crazy with this issue.

How can I align those spans to the right?

Last edited by mcrj45 (2008-09-28 17:27:24)

Re: Menu bar is display centered instead of aligned to the right

Solved by align div header to the right.