Firefox / IE Alignment Issue

  • HollyHunter
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

Hello All

I have an issue where the links in my navigation menu are aligning correctly in Firefox (in the middle vertically) but in Internet Explorer they are aligning at the bottom and I can't work out why as my CSS knowledge isn't great - hoping somebody can help me a little bit.

This is the code for the navigation menu in the template:

Code: [ Select ]
<!-- IF loggedin -->
  <br>   
  <table width="900" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" bgcolor="#CCCCCC">
 
            <div id="usernav_wrap">
                <div id="usernav">
                    <ul>
                        <li class="first">{anchor:url1="account/home/",url2="index.php?m=account_home",name="core|usermenu_profile"}</li>
                        <!-- IF settings.enable_messaging -->
                            <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/messages/","index.php?m=account_messages"}" title="{lang:"core","usermenu_messages"}">{lang:"core","usermenu_messages"}<!-- IF session.new_messages > "0" --> ({session.new_messages})<!-- ENDIF --></a></li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_guestbooks -->
                            <!-- IF session.new_guestbooks > "0" -->
                                <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/guestbook/unapproved/","index.php?m=account_guestbook&p=unapproved"}" title="{lang:"core","usermenu_guestbook"}">{lang:"core","usermenu_guestbook"} ({session.new_guestbooks})</a></li>
                            <!-- ELSE -->
                                <li>{anchor:url1="account/guestbook/",url2="index.php?m=account_guestbook",name="core|usermenu_guestbook"}</li>
                            <!-- ENDIF -->
                        <!-- ENDIF -->
                        <!-- IF settings.enable_blogs -->
                            <li>{anchor:url1="account/blog/",url2="index.php?m=account_blog",name="core|usermenu_blog"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_pictures -->
                            <li>{anchor:url1="account/albums/",url2="index.php?m=account_albums",name="core|usermenu_pictures"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_videos -->
                            <li>{anchor:url1="account/videos/",url2="index.php?m=account_videos",name="core|usermenu_videos"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_audio -->
                            <li>{anchor:url1="account/audio/",url2="index.php?m=account_audio",name="core|usermenu_audio"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_events -->
                            <li>{anchor:url1="account/events/",url2="index.php?m=account_events",name="core|usermenu_events"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_friends -->
                            <!-- IF session.new_friends > "0" -->
                                <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/friends/requests/","index.php?m=account_friends&p=requests"}" title="{lang:"core","usermenu_friends"}">{lang:"core","usermenu_friends"} ({session.new_friends})</a></li>
                            <!-- ELSE -->
                                <li>{anchor:url1="account/friends/",url2="index.php?m=account_friends",name="core|usermenu_friends"}</li>
                            <!-- ENDIF -->
                        <!-- ENDIF -->
                        <!-- IF settings.enable_favorites -->
                            <li>{anchor:url1="account/favorites/",url2="index.php?m=account_favorites",name="core|usermenu_favorites"}</li>
                        <!-- ENDIF -->
                        <li>{anchor:url1="account/settings/",url2="index.php?m=account_settings",name="core|usermenu_settings"}</li>
                        <li>{anchor:url1="account/logout/",url2="index.php?m=account_logout",name="core|usermenu_logout"}</li>
                    </ul>
                </div>
            </div>
    </tr>
  </table>
</div>
<!-- ENDIF -->
  1. <!-- IF loggedin -->
  2.   <br>   
  3.   <table width="900" border="0" cellspacing="0" cellpadding="0">
  4.     <tr>
  5.       <td height="20" bgcolor="#CCCCCC">
  6.  
  7.             <div id="usernav_wrap">
  8.                 <div id="usernav">
  9.                     <ul>
  10.                         <li class="first">{anchor:url1="account/home/",url2="index.php?m=account_home",name="core|usermenu_profile"}</li>
  11.                         <!-- IF settings.enable_messaging -->
  12.                             <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/messages/","index.php?m=account_messages"}" title="{lang:"core","usermenu_messages"}">{lang:"core","usermenu_messages"}<!-- IF session.new_messages > "0" --> ({session.new_messages})<!-- ENDIF --></a></li>
  13.                         <!-- ENDIF -->
  14.                         <!-- IF settings.enable_guestbooks -->
  15.                             <!-- IF session.new_guestbooks > "0" -->
  16.                                 <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/guestbook/unapproved/","index.php?m=account_guestbook&p=unapproved"}" title="{lang:"core","usermenu_guestbook"}">{lang:"core","usermenu_guestbook"} ({session.new_guestbooks})</a></li>
  17.                             <!-- ELSE -->
  18.                                 <li>{anchor:url1="account/guestbook/",url2="index.php?m=account_guestbook",name="core|usermenu_guestbook"}</li>
  19.                             <!-- ENDIF -->
  20.                         <!-- ENDIF -->
  21.                         <!-- IF settings.enable_blogs -->
  22.                             <li>{anchor:url1="account/blog/",url2="index.php?m=account_blog",name="core|usermenu_blog"}</li>
  23.                         <!-- ENDIF -->
  24.                         <!-- IF settings.enable_pictures -->
  25.                             <li>{anchor:url1="account/albums/",url2="index.php?m=account_albums",name="core|usermenu_pictures"}</li>
  26.                         <!-- ENDIF -->
  27.                         <!-- IF settings.enable_videos -->
  28.                             <li>{anchor:url1="account/videos/",url2="index.php?m=account_videos",name="core|usermenu_videos"}</li>
  29.                         <!-- ENDIF -->
  30.                         <!-- IF settings.enable_audio -->
  31.                             <li>{anchor:url1="account/audio/",url2="index.php?m=account_audio",name="core|usermenu_audio"}</li>
  32.                         <!-- ENDIF -->
  33.                         <!-- IF settings.enable_events -->
  34.                             <li>{anchor:url1="account/events/",url2="index.php?m=account_events",name="core|usermenu_events"}</li>
  35.                         <!-- ENDIF -->
  36.                         <!-- IF settings.enable_friends -->
  37.                             <!-- IF session.new_friends > "0" -->
  38.                                 <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/friends/requests/","index.php?m=account_friends&p=requests"}" title="{lang:"core","usermenu_friends"}">{lang:"core","usermenu_friends"} ({session.new_friends})</a></li>
  39.                             <!-- ELSE -->
  40.                                 <li>{anchor:url1="account/friends/",url2="index.php?m=account_friends",name="core|usermenu_friends"}</li>
  41.                             <!-- ENDIF -->
  42.                         <!-- ENDIF -->
  43.                         <!-- IF settings.enable_favorites -->
  44.                             <li>{anchor:url1="account/favorites/",url2="index.php?m=account_favorites",name="core|usermenu_favorites"}</li>
  45.                         <!-- ENDIF -->
  46.                         <li>{anchor:url1="account/settings/",url2="index.php?m=account_settings",name="core|usermenu_settings"}</li>
  47.                         <li>{anchor:url1="account/logout/",url2="index.php?m=account_logout",name="core|usermenu_logout"}</li>
  48.                     </ul>
  49.                 </div>
  50.             </div>
  51.     </tr>
  52.   </table>
  53. </div>
  54. <!-- ENDIF -->



And this is the associated CSS:


Code: [ Select ]
/* ********** [ USER NAVIGATION ] ********** */
 
div#usernav_wrap {
    height: 20px;
    background: ##CCCCCC }
 
    div#usernav {
        margin: 0px auto;
        width: 900px; }
 
        div#usernav ul {
            list-style: none; }
 
            div#usernav li {
                padding: 0px 0px;
                background: url("usermenu_div.gif") no-repeat;
                float: left; }
 
            div#usernav li.first {
                padding: 0px 0px 0px 10px;
                background: none; }
 
                div#usernav ul li a {
                    padding: 6px 10px 0px 18px;
                    height: 20px;
                    display: block;
                    float: left;
                    font: 10px Verdana, Arial, Helvetica, sans-serif;
                    color: #666666;
                    text-decoration: none; }
 
                    div#usernav ul li a:hover {
                        text-decoration: underline; }
  1. /* ********** [ USER NAVIGATION ] ********** */
  2.  
  3. div#usernav_wrap {
  4.     height: 20px;
  5.     background: ##CCCCCC }
  6.  
  7.     div#usernav {
  8.         margin: 0px auto;
  9.         width: 900px; }
  10.  
  11.         div#usernav ul {
  12.             list-style: none; }
  13.  
  14.             div#usernav li {
  15.                 padding: 0px 0px;
  16.                 background: url("usermenu_div.gif") no-repeat;
  17.                 float: left; }
  18.  
  19.             div#usernav li.first {
  20.                 padding: 0px 0px 0px 10px;
  21.                 background: none; }
  22.  
  23.                 div#usernav ul li a {
  24.                     padding: 6px 10px 0px 18px;
  25.                     height: 20px;
  26.                     display: block;
  27.                     float: left;
  28.                     font: 10px Verdana, Arial, Helvetica, sans-serif;
  29.                     color: #666666;
  30.                     text-decoration: none; }
  31.  
  32.                     div#usernav ul li a:hover {
  33.                         text-decoration: underline; }


And the problem in image form:

Image


Any ideas much appreciated.

Thanks

Holly x
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Just try removing the unordered list tag.

You may have to add

display:inline;

to your li like this: I'm not sure why your links are showing up in a line.

Code: [ Select ]

div#usernav li {
                padding: 0px 0px;
                background: url("usermenu_div.gif") no-repeat;
                float: left;
                display:inline;
}
  1. div#usernav li {
  2.                 padding: 0px 0px;
  3.                 background: url("usermenu_div.gif") no-repeat;
  4.                 float: left;
  5.                 display:inline;
  6. }


I'd first just remove the <ul></ul> .
  • HollyHunter
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

Thanks for the suggestion devilwood, that just removed all of the formatting from the links and bunched them together, not the answer unfortunately.

Just trying to get them vertically centered.

Appreciate the effort though :)

All ideas appreciated ....?


Holly x
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

I should be able to get this soon so here's try #2. I've had the same issue you're having, but I can't remember which project that I finally got it working on. Try the following as I think it's similar to the html structure you're looking for.

Code: [ Select ]

<div id="navigation">
<div align="center">    
<li><a href="main.html" target="_self">Home</a></li>
<li><a href="about.html" target="_self">About</a></li>
<li><a href="properties.html" target="_self">Properties</a></li>
<li><a href="sprojects.html" target="_self">Special Projects</a></li>
<li><a href="videos.html" target="_self">Videos</a></li>
<li><a href="news.php" target="_self">News and Events</a></li>
<li><a href="testimonials.html" target="_self">Testimonials</a></li>
<li><a href="links.php" target="_self">Links</a></li>         
</div>
</div>
  1. <div id="navigation">
  2. <div align="center">    
  3. <li><a href="main.html" target="_self">Home</a></li>
  4. <li><a href="about.html" target="_self">About</a></li>
  5. <li><a href="properties.html" target="_self">Properties</a></li>
  6. <li><a href="sprojects.html" target="_self">Special Projects</a></li>
  7. <li><a href="videos.html" target="_self">Videos</a></li>
  8. <li><a href="news.php" target="_self">News and Events</a></li>
  9. <li><a href="testimonials.html" target="_self">Testimonials</a></li>
  10. <li><a href="links.php" target="_self">Links</a></li>         
  11. </div>
  12. </div>


Code: [ Select ]

#navigation {
background-color:#6d6d4a;
border-top: 1px #999967 solid;
border-bottom: 1px #999967 solid;
border-left: 2px #999967 solid;
border-right: 2px #999967 solid;
padding-left:0;
margin-left:0;
float: left;
left: 0px;
width: 99.5%;
height: 20px;
}

#navigation li {
top:0;
border:none;
position: relative;
padding:0;
display:inline;
margin-right: .75em;
}

#navigation li a{
    font: 14px/18px Arial, Helvetica, sans-serif;
    color: #48231A;
    text-decoration: none;
}

#navigation li a:hover {
    color: #000000;
}
  1. #navigation {
  2. background-color:#6d6d4a;
  3. border-top: 1px #999967 solid;
  4. border-bottom: 1px #999967 solid;
  5. border-left: 2px #999967 solid;
  6. border-right: 2px #999967 solid;
  7. padding-left:0;
  8. margin-left:0;
  9. float: left;
  10. left: 0px;
  11. width: 99.5%;
  12. height: 20px;
  13. }
  14. #navigation li {
  15. top:0;
  16. border:none;
  17. position: relative;
  18. padding:0;
  19. display:inline;
  20. margin-right: .75em;
  21. }
  22. #navigation li a{
  23.     font: 14px/18px Arial, Helvetica, sans-serif;
  24.     color: #48231A;
  25.     text-decoration: none;
  26. }
  27. #navigation li a:hover {
  28.     color: #000000;
  29. }
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

set your div height and set your line height to the same value. then set your vertical align to middle

Code: [ Select ]
 
#usernav{
line-height: 30px;
height: 30px;
vertical-align: middle;
}
 
  1.  
  2. #usernav{
  3. line-height: 30px;
  4. height: 30px;
  5. vertical-align: middle;
  6. }
  7.  

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 125 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.